JWT & 스프링 시큐리티 & 카카오 소셜로그인 API 활용방법 (2)

JWT & 스프링 시큐리티 & 카카오 소셜로그인 API 활용방법 (2)

 

 

소셜 로그인을 위해서 OAuth를 사용합니다. OAuth는 사용자의 접근 권한을 위임 받을 수 있는 표준 프로토콜로, 클라이언트가 서드파티에 저장한 정보를 우리 프로젝트에서 사용할 수 있도록 하는 것입니다. 이 글에서는 OAuth2 라이브러리를 사용하여 카카오 로그인을 구현하는 방법에 대해서 정리해 보겠습니다.

 

 

카카오 애플리케이션 생성

https://developers.kakao.com/

Kakao Developers

 

카카오 디벨로퍼 사이트에 접속하여 내 애플리케이션을 클릭하고, 애플리케이션을 생성합니다.

저는 test 애플리케이션을 생성하였습니다.

 

 

앱설정 > 요약정보 페이지에 서 REST API 키를 복사해 둡니다.

이 키는 서버에서 사용할 client-id 값이 됩니다.

 

 

앱 설정 -> 플랫폼 페이지에 가서 하단에 web 사이트 도메인을 등록합니다.

 

 

여기서 카카오 로그인 사용시 Redirect URI를 등록해야한다고 뜹니다. 이때 주의해야할 점이 어느 플랫폼이든 Redirect를 사용해 Authorization code를 카카오에게 전달해 코드의 유효성을 확인하고 access token을 받급받아 사용자 정보를 이용할 수 있는 것은 아닙니다.

 

 

 

네이티브 앱 서비스를 이용하면 리다이텍트 방식을 사용할 수 없다고 뜹니다. 따라서 두 방식으로 카카오 소설 로그인 서비스를 이용하는 방식에 대해서 정리해 보겠습니다. 먼저 리액트와 같은 웹 서비스를 사용해 리다이렉트 방식으로 인가코드와 토큰을 발급하는 메커니즘을 소개하겠습니다.

 

 

리다이렉트 방식

리다이렉트 방식 :

서비스 클라이언트에서 인가 코드 발급을 요청하고 서비스 서버에서 인가 코드로 토큰 발급을 요청하는 방식

 

웹서비스 프레임워크 : spring boot, django, flask, Ruby...

 

1. 프론트로 로그인 요청이 들어옵니다.
2. 프론트는 인가 코드를 백에게 전달합니다.
3. 백은 받은 인가 코드로 카카오 서버에서 액세스 토큰을 받아옵니다.
4. 백에서 엑세스 토큰으로 카카오 서버에서 회원 정보를 조회합니다.
5. 요청한 회원 정보가 백으로 전송됩니다.
6. 백은 받은 회원 정보를 DB에 저장합니다.

7. 최초 로그인자와 아닌자의 구분이나, 사용자 혹은 게스트 구분등의 로직을 짭니다.

8. 토큰의 탈취에 대응하기 위해 refresh token과 access token을 사용합니다.

9. 로그인 요청에 대한 응답 헤더에 jwt를 담아 클라이언트에게 보냅니다.

 

 

이 방식대로 진행하실경우 제품 설정 > 카카오 로그인 페이지에서 활성화 설정을 on으로 해주시고

 

 

Redirect URI를 설정합니다.

 

제품설정 > 카카오 로그인 > 보안 페이지에서 Client Secret 코드를 발급받아 서버의 client-secret 값으로 사용합니다.

 

제품 설정 > 카카오 로그인 > 동의 항목 페이지에 가서 카카오 로그인을 할  때 수집할 정보들에 대한 설정을 해줘야 합니다. 일반적인 상황에서 필수 동의가 가능한 정보는 닉네임과 프로필 사진입니다. 하지만 추후 jwt 토큰을 생성할 때 이메일 정보를 활용할 예정이기 때문에 카카오 계정 이메일 정보도 수집 가능하도록 설정해보겠습니다.

 

 

 

비즈니스 설정

사업자 등록하지 않고 비즈 앱으로 전환하여 이메일 권한을 받는 방법

https://developers.kakao.com/docs/latest/ko/getting-started/app#biz-app-for-individual

Kakao Developers

 

 

본인 인증 완료

 

사업자 등록이 아닌 개인 개발자 등록을 통해 동의항목에 이메일을 추가시킬 수 있습니다.

 

 

저는 이방식으로 카카오 로그인 페이지 리다이렉션을 성공하였고,

 

반환값으로 사용자 id를 얻을 수 있게 개발하였습니다.

 

기본 방식

기본 방식 : 서비스 클라이언트에서 한 번의 요청으로 인가 코드 및 토큰 발급 모두 완료하는 방식

네이티브 앱 프레임워크 : swift, kotlin, java, react native, flutter.. 

 

https://velog.io/@zzangdd/Android-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-API-Kakao-Login-API

[Android/Kotlin] 카카오 로그인 API (Kakao Login API)

 

1. 클라이언트에서 인가 코드 및 토큰 발급을 받고 그 토큰을 스프링 서버로 보낸다.

서버에서 받은 토큰을 사용해 카카오 회원 정보를 받아 db에 저장하는 방식이 있습니다.

2. 클라이언트에서 토큰을 이용하여 회원 정보를 받아온 후 받은 정보를 백엔드에 보내서 처리하는 방식이 있습니다.

 

두 방식 모두 클라이언트 측에서 토큰을 발급 받는 것이기때문에 참고 자료를 걸고 카카오 소셜로그인 API 활용방법 정리 글을 마치겠습니다. 읽어주셔서 감사합니다.