[OAuth2 + JWT] 소셜 로그인 구현(Google, Naver, Kakao, Apple)

소셜 로그인을 구현하기에 앞서 책임 분배를 어떻게 할지 정해보자

1. Front

2. Back

[개발 환경]
Front : React Native Expo
Back : Spring Boot

[구현할 소셜 로그인]
Google, Naver, Kakao, Apple

 

1의 경우 라이브러리를 install 해서 구현 가능

인증을 끝내고 사용자 정보를 Back으로 보내면 됨

 

2의 경우 웹 뷰를 띄워서 해당 앱에서 로그인하는 방식

Oauth2 Provider를 통해 리디렉션 방식으로 인증 수행

 

1로 구현하면 앱 내부에서 로그인 가능

2로 구현할 경우 해당 앱(Google, Naver, Kakao, Apple)으로 넘어가서 로그인을 하는 방식

 

크게 정리하면 위와 같은데 토큰 관리 및 보안상의 이유로 2번을 선택함

(보안상의 이유는 Back에 구성하는 것이 더 안전할 것이라는 개인적인 이유임)

 

그렇게 Recat Native Expo + Spring Security + OAuth2 + JWT 로 소셜 로그인을 구현하게 되었음

 

---

구현해야 하는 부분 정리(러프하게 적어봄)

Front

1. URL 세팅

2. 웹 뷰 띄우기

 

Back

1. 각 개발자 센터에 소셜 로그인 구현을 위한 설정 필요(애플의 경우 결제가 필요했고, 좀 까다로웠음) - Redirect Url 설정

2. 시큐리티 설정

3. OAuth2.0 설정

4. yml 파일 설정

5. Service 구현

6. JWT Token 발급 후 반환

 

애플의 경우만 다른 소셜 로그인들과 다르게 설정해줘야 하는 부분이 더 많았음

시간이 되는대로 각각의 상세한 과정을 공유해보고자 함