넷플릭스 클론 팀 프로젝트 - 소셜로그인 WORK FLOW

개요

• 이 글은 넷플릭스 클론코딩 서버 파트를 개발하면서, 소셜로그인을 어떻게 적용시켜볼 수 있는지를 고민하고 설계했던 개념을 담고 있다.
• SpringSecurity와 Auth를 사용하는 것이 아닌 오로지 Rest API만으로 구현했다.

소셜로그인 WORK FLOW

1. 사용자가 나의 서비스에서 [소셜 로그인]을 누르면 소셜 로그인 창이 뜨게된다.
2. 소셜 로그인이 정상 수행되면 카카오가 [인가 코드](Authorization Code)를 미리 설정한 redirect_uri로 되돌려준다.
3. 나의 서비스는 redirect_uri로 들어온 url에서 [인가 코드]를 얻어서 소셜 로그인 서비스 server에 AccessToken을 요청한다.
4. 소셜 로그인 서비스는 [인가 코드]를 확인하고 AccessToken을 돌려준다.
5. 사용자가 AccessToken을 얻고 이걸로 나의 서비스에 가입한다.
6. 나의 서비스는 AccessToken으로 소셜 로그인 서비스 서버에 사용자 정보를 요청하고 값을 가져올 수 있으면 JWT을 발급시켜준다.
7. 사용자는 발급받은 JWT으로 나의 서비스의 API를 요청한다.

현 애플리케이션에서 DB 레코드는 어떻게 저장하기로 했나

• Account 테이블 내에 socialLoginType과, socialLoginIdx라는 컬럼을 만들었다.
• 해당 컬럼에 소셜 로그인 서비스 식별 고유 아이디를 socialLoginIdx에,
• 소셜 로그인 서비스 명칭(Naver, Line, Google)을 socialLoginType에 입력하도록 했다.
• 만약 소셜 로그인으로 회원가입/로그인 요청이 있다면, 해당 두 컬럼을 제일 먼저 확인한다.
• 소셜 로그인 서비스 유형이 null값이라면 일반적인 계정으로 간주하도록 했다.
• DB 내에 소셜 로그인 서비스 식별 고유 아이디로 이미 계정이 있는지 구별한다.

Line과 Google, Naver 모두 동일한 WORK FLOW를 가지도록 설계했으며, 잘 작동하는 것을 확인할 수 있었다.