SSO SSO(Single Sign On)는 한 번의 로그인으로 여러 서비스에 접근할 수 있는 통합 인증 방식입니다. 서비스의 규모가 커질 때 여러 서비스를 통합 관리하기 위해 SSO를 사용합니다. SSO를 구현할 때 다음과 같은 두 가지 패턴이 존재할 수 있습니다. 1. 인증 gateway 방식 각 서비스에 접근할 때 이전 레이어에 통합 인증 서비스가 존재하는 방식입니다. User는 SessionID를 가지고 있고 통합 인증 서비스를 통과하면 해당 서비스를 이용할 수 있습니다. 이 방식의 단점은 각 서비스를 이용할 때마다 인증 과정을 거쳐야 하며 인증 서비스 자체가 bottle neck이 될 수 있다는 것입니다. 2. 인증 토큰 발급 방식 유저는 우선 통합 인증 서비스를 통해 토큰이라는 인증 대행 매체..

SAML 인증 SAML은 XML 기반의 표준 데이터 포맷입니다. 인증 정보를 XML 포맷으로 생성하고 암호화한 것이 Assertion인데 이를 이용합니다. User, IDP(Identity Provider), SP(Service Provider) 가 존재하며 다음과 같이 인증이 이루어집니다. (그림) User가 SP로 서비스를 요청하면 SP는 인증된 User인지 체크합니다. 인증되지 않았으면 인증 요청(SAMLRequest)을 생성하여 User에게 전송합니다. SAMLRequest에 의해 User는 IDP로 redirect되고 로그인을 통해 인증을 진행합니다. 인증에 성공하면 IDP는 SAMLAssertion이 포함된 SAMLResponse를 User에 내려줍니다. → 그 과정에서 IDP가 설정한 Ses..

인증 Best Case 기본 flow (OpenIDC) Best Case라고 생각하는 인증 flow(OpenIDC)를 먼저 설명하겠습니다. 먼저, Auth Service가 타 서비스가 아닌 자사의 서비스일 때는 OAuth 기반의 flow가 필요없이 다음과 같이 시퀀스 다이어그램이 그려집니다. (타 서비스일 경우 OAuth 보기) Client가 id(username)와 password를 입력하여 로그인합니다. 로그인 요청은 BFF → Server → Auth Service로 전해집니다. 전달된 id와 password로 Auth Service에서 인증합니다. 인증에 성공하면 access token, refresh token, id token 를 Server로 전달합니다. Server는 id token 을 d..

오늘은 Next JS에서 Client Data fetching 사용 시 마주할 수 있는 Anchoring 이슈에 대해 정리하려 합니다. Next JS docs에서 권장하고 있는 코드 스타일을 적용했을 때 생길 수 있는 이슈이기 때문에, 관련 이슈가 생겼을 때 저는 디버깅에 시간을 꽤나 썼습니다. 먼저 Next JS의 Data fetching에 대한 지식이 전무할 분들을 위해 개념부터 정리하고 이슈에 대한 해결 과정을 차례로 적어보겠습니다. Data fetching Next JS를 이용한 Data fetching에는 다음과 같은 방법을 사용할 수 있습니다. 자세한 내용은 공식 문서를 참조해주세요! getStaticProps / getServerSideProps : Server Side에서 미리 page h..

Sticky 스펙을 구현하는 방법 스펙에 필요한 조건을 하나씩 추가해가면서 어떻게 해결할 지를 고민해보자. css의 poistion: sticky; 를 이용하자. 우선 Sticky되어야 하는 Element가 최상단에 위치해있다면 쉽다. css를 이용하면 position: relative; 인 부모의 상단에 해당 Element가 sticky된다. .sticky{ position: sticky; top: 0; } https://codepen.io/bucketressi/pen/GROoeKE Sticky-1 ... codepen.io sticky container를 만들자. 이번에는 sticky header(첫번째 Sticky Element) 아래에 sticky sub-header가 위치해야 한다고 생각해보자...

Main Concepts 처음 React를 시작할 때 거의 이해 못하고 practice 정도만 참조했을 듯 싶어서 다시 읽어보았다. 개념을 이번에 명확히 했다거나 처음 들어본 것들을 정리해보았는데, Main concept에서도 꽤나 많았다. 이번 기회로 해당 정리 글을 주기적으로 보도록 해야겠다 😊 Introducing JSX React는 기존에 html, js 와 같이 기능 별로 문서를 나누던 데에서 한 컴포넌트 단위로 나누게 함으로써 js, html(jsx), css를 컴포넌트 단위로 다룰 수 있게 하였다. JSX의 내부의 변수들은 렌더 시점에 이미 문자열로 변경 되므로 XSS 공격을 피할 수 있다. Rendering Elements React로 만들어진 어플리케이션은 하나의 root DOM 노드를 ..

개발을 진행하면서 안드로이드 OS에서 네이버 앱을 사용할 때 (특정 안드로이드 버전 - 아마도 11 이상 에서만) flex 레이아웃이 깨지는 이슈가 발생하였다. css를 다방면으로 고쳐보면서 해결해보았는데, 원인은 'flex-shrink를 지원하지 않는 것'이었다. (caniuse) 반응형 웹을 구축할 경우 해당 사례를 피하기 위해 css 코드에 flex-shrink 사용을 지양하도록 하자.

Open Graph란? 어떤 웹페이지든 social graph의 일부분이 될 수 있도록 하는 프로토콜이다. Metadata og:title : url 공유 시 제목으로 들어가는 영역이다. (카카오톡 공유는 title만 공유된다.) og:type : object의 type이다. (ex_ video.movie, website) og:image : url 공유 시 나타나는 이미지이다. og:url : graph에서 id로 쓰이는 url이다. og:audio, og:video : audio, video 파일의 url이다. og:description: object에 관한 설명이다.카카오톡 공유에서는 표시되지 않고 슬랙 공유, 블로그에서는 description까지 표시된다. og:site_name : 방대한 웹사이..