브라우저와 Postman으로 카카오 OAuth 구현하기

 

블로그 썸네일

 

지난번 포스팅에서 OAuth Flow 중 Authorization Code 인증의 Flow에 대해 알아보았는데, 오늘은 실제 카카오와 연동하여 OAuth 진행 후 개인 정보를 가져오는 것을 브라우저와 Postman으로 구현해 보겠습니다. 일반적으로 가장 많이 쓰이는 OAuth Flow라고 보시면 되겠습니다. Authorization Code Flow에 대해서는 이전 포스팅을 참고하세요.

2022.06.09 - [개발자] - OAuth 2.0 - Authorization Code

OAuth 2.0 - Authorization Code

 

처음 단계는 카카오에 나의 애플리케이션을 추가하는 것입니다. https://developers.kakao.com/console/app에 에 접속하여 애플리케이션을 하나 추가합니다. 간단하게 OAuth라고 입력하였고 저장 버튼을 클릭하면 앱에 대한 키들이 발급됩니다.

어플리케이션 추가

 

카카오로부터 발급받은 앱 키 목록입니다. 우리는 웹 애플리케이션이기 때문에 REST API 키를 사용하게 됩니다. 아래의 Client ID라고 되어 있는 항목에 모두 REST API 키를 입력하면 됩니다.

발급된 앱키

 

왼편의 플랫폼 클릭 후 Web 플랫폼 등록 버튼을 클릭합니다. 스크린샷에는 https://localhost로 되어 있으나, https://example.com으로 로 입력하시기 바랍니다.

플랫폼 등록

 

왼편의 카카오 로그인 클릭 후 상태를 활성화 해줍니다. 또한 Redirect URI도 등록해 줍니다. Redirect URI는 보안 상Authorization OAuth에 반드시 필요한 항목이므로 등록해 줍니다. 이 예에서는 https://example.com/oauth로 등록하였습니다. 본인의 웹 어플리케이션이 있다면 카카오로부터 받은 코드를 처리할 URI를 입력하면 됩니다.

카카오 로그인 활성화

 

보안을 위해 Client Secret도 생성해 줍니다. 카카오 OAuth에서 필수 항목은 아니지만, 보안 상 하는 것이 좋겠지요?

Client Secret 생성

 

활성화 상태에서 사용함을 선택하고, 저장을 클릭하면 Client Secret이 발급된 것을 확인하실 수 있습니다.

Client Secret 활성화

 

다음으로는 카카오에서 받을 개인 정보들에 대한 동의 항목을 선택하여야 합니다. 이 예에서는 닉네임과 프로필 사진을 받는 것으로 하였습니다. 카카오 계정과 같은 정보는 카카오에게 검수를 받아야 하는 항목이므로, 이 예에서는 추가하지 않도록 하겠습니다.

동의 항목 설정

 

이로써 카카오에서 앱 등록과 OAuth를 이용하기 위한 절차가 완료되었습니다. 이제부터 본격적으로 OAuth Flow에 따라 개인 정보를 가져오는 프로세스를 진행해 봅시다.

브라우저를 열어서 아래의 URI를 주소창에 붙여넣은 후 client_id와 redirect_uri를 수정해 줍니다. client_id는 맨 처음 발급받은 REST API 키가 되며, redirect_uri는 카카오 설정에서 입력한 redirect uri를 입력합니다. 저는 redirect uri를 https://example.com/oauth로 등록하였으므로 이것을 사용하겠습니다.

https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=https://example.com/oauth&response_type=code

 

브라우저가 카카오 로그인 페이지로 이동되며, 로그인 되지 않은 상태라면 로그인 후 아래와 같이 앱이 본인의 정보에 접근하는 것을 동의받게 됩니다. 우리는 프로파일 이미지와 닉네임을 받기로 했는데, 아래 보시면 이에 대한 항목이 모두 표기되어 있습니다.

본인 동의 항목

 

여기서 동의하기(Accept and Contiue) 버튼을 클릭하면 example.com/oauth로 페이지를 리다이릭트 시키는데, 아래 보는 것과 같이 code값을 같이 발급해 줍니다. 이는 OAuth Flow에서 Client 인증을 위해 사용되는 코드입니다. 브라우저 주소창에서 이 code 값을 복사합니다.

동의 후 Redirect

 

이제 포스트맨을 열어 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://kapi.kakao.com/v2/user/me가 엔트포인트며 GET 방식으로 사용자 정보를 받습니다. Authorization 탭에서 Bearer Token을 선택한 후 위에서 발급 받은 Access Token을 붙여주고 Send를 보내면, 해당 사용자에 대한 닉네임과 프로필 이미지 링크를 받을 수 있습니다.

카카오에서 받은 개인 정보

 

카카오에 애플리케이션 등록에 시간이 좀 소요되기는 하지만, 그외의 플로우는 의외로 간단합니다. OAuth Redirect URI를 웹 어플이케이션으로만 치환하면, 실제 웹에서 돌아가는 인증 프로세스가 됩니다.