Oauth Login을 통해 추가정보 입력받아 회원가입하기(feat : React, Spring)

박재현·2022년 8월 5일
7

FE 톺아보기

목록 보기
7/10
post-thumbnail

용어 정리

Client

자사 서비스가 실질적으로 운영되는 사이트.

이 프로젝트는 React를 통해 Client를 띄워주고 있다.

Authorization Server

Google, Kakao, Naver 등 인증에 필요한 아이템을 제공해주는 서버.

Client는 ID, PW로 로그인 요청을 해서 Authorization Code를 발급받을 수 있다.

Resource Server

Google, Kakao, Naver 등 사용자의 개인정보를 가지고있는 애플리케이션 서버.

Server는 Authorization Code를 넘겨 개인정보를 응답받을 수 있다.

Server

자사 서비스의 Backend를 담당하는 서버.

Client로부터 받은 Authorization Code를 Resource Server로 전달해 개인정보를 응답받고 DB Server에서 회원중복검사를 한 뒤, 로그인 또는 회원가입 로직을 수행한다.

이 프로젝트는 Server로 Spring Boot를 사용한다.

DB Server

자사 서비스의 회원정보를 관리하는 DB 서버.

이 프로젝트는 DB Server로 MySQL을 사용한다.

로그인 flow

Oauth 로그인을 할 수 있는 서비스는 무수히 많다. 그 중에 Kakao 로그인을 통한 로그인을 설명하겠다.

flow 상세설명

1. 로그인 요청

서비스 접근을 위해 미리 발급 받은 client ID와 Spring Server로 Authorization Code를 전달하는 로직을 담당하는 라우터주소를 Redirect URI에 담아 요청을 보낸다.

2. 로그인 페이지 응답

Kakao에서 로그인 페이지를 띄워준다.

3. 카카오 계정으로 로그인

Kakao 로그인 페이지에서 ID, PW를 입력 후 로그인을 시도한다.

4. authorization_code 응답

Authorization Code를 Query에 담아 Redirect URI로 리다이렉션된다.

5. Spring 서버로 로그인 요청

Authorization Code를 담아 Spring Server로 로그인 요청을 보낸다.

6. access token 및 회원정보 요청

Client에서 받은 Authorization Code를 포함해서 Kakao Resource Server로 access token과 회원정보를 요청한다.

7. access token 발급 및 회원정보 응답

authorization code가 올바른 code이면 access token과 Server가 요청한 회원정보를 응답한다.

8. 회원 중복 확인 요청

Kakao Resource Server로부터 전달받은 회원정보를 통해 DB Server에 회원정보가 이미 존재하는지 확인한다.


아래에서는 signIn 과정과 signUp 과정을 구분하여 설명하겠다.

로그인

1. JWT token 발급

회원정보가 이미 존재한다면, 회원가입이 아닌 로그인을 해야하므로, responseType에 "signIn"을 넣어주고 즉시 JWT Token을 발급해준다.

2. 로그인 처리

응답 받은 refreshToken을 쿠키에 저장하고, accessToken을 API Header에 저장한다.

회원가입

1. 회원가입 로직 요청

회원정보가 존재하지 않으므로 회원가입을 진행해야 한다. 따라서 responseType에 "signUp"을 넣어준다.

2. 추가정보 입력 처리

추가정보를 입력하는 페이지로 리다이렉션 해준다. 사용자가 추가정보를 입력한 후 회원가입 완료하기 버튼을 클릭한다.

3. 회원가입 요청

Server로 사용자가 입력한 추가정보를 담아 회원가입을 요청한다.

4. 회원정보 추가

Server에서 회원정보를 받아 DB Server에 넣어준다.

5. JWT Token 발급

Server에서 JWT Token을 발급해서 Client에 응답한다.
Client는 2. 로그인처리와 같이 JWT Token을 저장한다.

고민한 내용

Oauth 회원가입 시 회원정보를 자사 Server에서 관리하려면 어떻게 해야할까?

대부분의 블로그에서는 Client와 Oauth Server와의 관계 속에서 로그인과 회원가입을 처리하는 내용이 담겨있다.

이번 프로젝트에서는 회원정보를 따로 관리할 필요가 있었다. MySQL을 이용해 User Table을 독자적으로 관리하고, Spring Boot에서 JWT Token을 발급해서 인증&인가를 처리한다.

Oauth 회원가입 시 추가정보를 입력해야할 경우, 어떤 flow로 진행이 될까?

추가정보를 입력할 필요가 없는 경우, 8. 회원 중복 확인 요청 이 후 로그인 또는 회원가입을 진행하면 된다.

추가정보를 입력해야하는 경우, 8. 회원 중복 확인 요청 이 후 회원가입을 진행하는 과정은 아래와 같다.

  1. 추가정보 입력 페이지로 리다이렉션한다.
  2. 추가정보를 담아 JWT token을 발급해주는 api로 요청을 보낸다.
  3. DB Server에 회원정보를 저장하고, JWT token을 발급한다.

참조

Oauth 2.0 개념 정리
React Oauth 로그인 구현하기

profile
공동의 성장을 추구하는 개발자

0개의 댓글