7/16 넥스터즈 3주차 (1) : 인증 구현

3주차때에는 소셜 로그인 구현 중 네이버 로그인을 구현하였다.

 

Next.js의 API 서버를 마치 Api Gateway처럼 생각하고 BE와 Server to Server로 구현할 계획이다.

네이버 아이디로 로그인 구현(이하 네아로)의 OAuth2.0 구현은 Gateway에서 할 수있을듯 해서 Gateway에서 구현하였다.

 

개요

회원가입 플로우 다이어그램

 

위 다이어그램에서 볼 수 있듯이 로그인 시에만 인증서버(여기서는 네이버)를 거치고, 그 이후에는 BE에서 생성한 자체 토큰(jwt)으로 검증한다.

 

시나리오

시나리오 1. 최초 로그인 (a.k.a 회원가입)

1. 사용자가 '네이버 로그인'을 클릭

2. 정보제공 동의를 받는 인증 화면으로 이동하여 정보 제공에 동의한다.

3. redirectURL인 /bridge/naver 로(이하 브릿지 화면) 이동된다.

4. 브릿지 화면의 getIntialProps(SSR) 에서 토큰 발급 및 프로필 정보 조회 API를 호출한다.

5. 조회한 프로필 정보를 BE로 넘겨서 유저 DataBase에 저장한다.

6. BE에서 jwt 토큰을 생성 후, FE로 전달한다.

7. FE에서 전달받은 jwt토큰을 브라우저 Cookie에 저장한다.

 

시나리오 2. 재로그인

이미 가입된 사용자가 재로그인 할때

 

1. 사용자가 '네이버 로그인'을 클릭

2. 이전에 정보제공에 동의하였으므로 바로 redirectURL로 이동

3. 브릿지 화면의 getIntialProps(SSR) 에서 토큰 발급 및 프로필 정보 조회 API를 호출한다.

4. 조회한 프로필 정보를 BE로 넘겨서 유저 DataBase에서 조회한다.

5. 존재하는 유저이면, BE에서 jwt 토큰을 생성 후, FE로 전달한다.

(만약 우리 DB에 저장한 프로필정보와 인증서버에서 받은 프로필 정보가 상이하면 업데이트)

6. FE에서 전달받은 jwt토큰을 브라우저 Cookie에 저장한다.

 

시나리오 3. 재접속

로그인한 사용자가 브라우저를 껐다가 다시 접속했을 때

 

1. 사용자가 브라우저에서 우리 서비스로 재접속

2. 브라우저 Cookie에 저장된 토큰이 있는지 검색한다.

3. 토큰이 없다면(만료되었다면) 로그인 화면으로 리다이렉트한다.

4. 토큰이 유효하다면 접속하고자 하는 페이지를 로드한다.

 

---

구현 상세

1. 네이버 인증화면 URL 이동

 

 

2. 브릿지 화면에서 프로필 정보 조회 + Cookie Setting

@todo 주석 부분은 실제 BE API를 호출하지 않는 mock 코드이다.

 

 

3. BE에서 프로필 정보 조회 (mocking)

Context API로 구현하였다. (SWR 적용)

 

 

4. __app.tsx 의 SSR에서 CSR 이전에 쿠키 검증

 

 

5. 완성 화면

 

참고한 자료들

• JWT 란? (JWT vs Session) (세션과 JWT의 차이점)
• 네이버 아이디로 로그인 연동 가이드

 

---

7/18 구글 로그인 추가 (react-google-login)