SpringBoot 소셜 로그인 구현 - 카카오 로그인

1. 카카오 로그인 구현

✅ 개발환경

• macOS Ventura 13.1
• Postman Version 9.31.27
• IntelliJ IDEA 2022.2.3 (Community Edition)

1) 아래 링크를 통해 로그인을 진행합니다.

https://developers.kakao.com/

Kakao Developers

2) 애플리케이션을 추가합니다.

• 내 애플리케이션을 클릭하고, 애플리케이션을 추가를 클릭합니다.
• 앱 이름, 사업자명을 입력하고 저장을 눌러줍니다.

애플리케이션 추가

애플리케이션 추가 설정 화면

3) 발급된 앱 키를 확인합니다.

• 필자는 REST API를 사용하겠습니다. (웹 애플리케이션 시 REST API 사용)

발급된 앱 키

4) 카카오 로그인을 활성화 합니다.

• 카카오 로그인 카테고리를 클릭합니다.
• 카카오 로그인 활성화를 설정해줍니다.

카카오 로그인 활성화 설정

5)Redirect URI를 설정합니다.

• http인지 https인지 잘 고려해서 설정해줍니다.

Redirect URI 등록 버튼 클릭

Redirect URI 설정 화면

6) 동의항목을 설정합니다.

• 카카오 로그인 -> 동의항목 카테고리를 클릭합니다.
• 닉네임, 프로필 사진, 카카오 계정(이메일) 동의 항목을 설정해줍니다.

설정 완료 사진

닉네임 설정 화면

프로필 사진 설정 화면

카카오 계정(이메일) 설정 화면

7) Client Secret을 활성화 합니다.

Client Secret 활성화

 

카카오에서 앱 등록과 OAuth를 이용하기 위한 절차가 완료되었습니다.

8) 개인정보 가져오기

OAuth Flow에 따라 개인 정보를 가져오는 프로세스를 진행하겠습니다.

• 브라우저를 열어서 아래의 URI를 주소창에 붙여넣은 후 client_id와 redirect_uri를 수정해 줍니다.

kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code

 

** client_id =  REST API 키, redirect_uri = 카카오 설정에서 입력한 redirect uri

 

• 브라우저가 카카오 로그인 페이지로 이동되며, 로그인 되지 않은 상태라면 로그인 합니다.

로그인 화면

• 앱이 본인의 정보에 접근하는 것을 동의받게 됩니다. 동의하고 계속하기를 클릭합니다.

• 로그인과 동의를 완료하면 페이지가 이동하고 code = 뒤에 코드가 새로 생성됩니다. 

** Postman 테스트를 위해 code = 뒤의 코드를 복하해둡니다.

9) Postman 테스트

Access Token을 먼저 받아보겠습니다.

• POST 방식으로 https://kauth.kakao.com/oauth/token이  발급해 주는 엔드포인트입니다. 
• Header는 Content-Type을 application/x-www-form-urlencoded;charset=utf-8을 지정합니다.
• Body는 grant_type, client_id, client_secret, redirect_uri, code 값을 붙여줍니다.
• 그리고 Send 버튼을 누르면 access_token 및 refresh_token이 발급됩니다.

https://kauth.kakao.com/oauth/token

 

• Headers를 아래 사진처럼 설정합니다.

KEY : Content-Type
VALUE : application/x-www-form-urlencoded;charset=utf-8

 

Headers 설정화면

Body 설정화면

• 발급받은 토큰을 이용해 사용자 정보를 가져옵니다.
• https://kapi.kakao.com/v2/user/me가 엔트포인트며 GET 방식으로 사용자 정보를 받습니다.
• Authorization 탭에서 Bearer Token을 선택한 후 위에서 발급 받은 Access Token을 붙여주고 Send를 보내면, 해당 사용자에 대한 닉네임과 프로필 이미지 링크를 받을 수 있습니다.

https://kapi.kakao.com/v2/user/me

 

Acess Token 붙여넣기

결과 화면