카카오 소셜 로그인을 구현해보려합니다.
Kakao Developres_를 참고했습니다.

먼저, 다음 그림을 참고해서 개략적으로 어떤 흐름으로 진행되는지 이해하고 있는 것이 좋습니다.
social_login.png
이번 포스팅에서는 4번 전까지 일어나는 통신에 대해 다뤄보겠습니다.


1. Preparation

kakao REST API 사용법을 참고해서
앱생성 -> REST API 키 확인 -> 사용자 관리 설정까지 해주면됩니다.

그런데 이때, 사용자 관리 설정에서 설명이 필요한 부분을 짚고 넘어가겠습니다.

코드를 리다이렉트 받을 Redirect URI를 설정해야 합니다.
Third-party(개발한 페이지)에서 user가 로그인을 요청하게 되면
카카오의 로그인 페이지로 이동합니다.
사용자가 로그인에 성공하면 다시 Third-party로 돌아가야 하는데
그 돌아갈 페이지의 주소가 Redirect URI 입니다.

현재는 개발 단계이기때문에 localhost:8000으로 정해주겠습니다.

2. Access Code 받기

Kakao Developers_ 코드 받기의 가이드라인은 다음과 같습니다.

스크린샷, 2019-11-13 18-47-28.png

준비단계에서 앱을 생성하고 REST API키를 확인했습니다.
내 애플리케이션 > 기본정보 > REST API 키가 {app_key}에 해당합니다.
사용자 관리 설정에서 설정한 Redirect URI가 {redirect_uri}에 해당합니다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <a href="https://kauth.kakao.com/oauth/authorize?client_id={app_key}&redirect_uri={redirect_uri}&response_type=code">kakao login</a>
    </body>
</html>

약식으로 로그인 버튼을 만들었습니다.
스크린샷, 2019-11-13 16-11-11.png
이 로그인 버튼을 클릭하면 카카오 로그인 페이지로 넘어가게 됩니다.
유저가 정보제공 동의를 하면
코드는 쿼리스트링에 담겨서 Redirect URI로 넘어가게 됩니다.

다음 View는 redirect uri에 바로 연결시킨 view입니다.

스크린샷, 2019-11-13 18-32-15.png

로그인을 하고 동의를 누르면 다음과 같은 화면을 볼 수 있습니다.

스크린샷, 2019-11-13 18-32-44.png

코드가 쿼리스트링에 담겨있는 것을 확인할 수 있습니다.

3. Access Token 받기

코드를 받았으니 이것을 이용해 Access Token을 받아야합니다.
Kakao Developers_ 토큰 받기의 가이드 라인은 다음과 같습니다.

스크린샷, 2019-11-13 18-44-25.png

가이드 라인에 맞춰서 아까 받은 코드를 POST 요청으로 보내줍니다.

스크린샷, 2019-11-13 21-33-22.png

위 사진에는 나와있지 않지만 app_key는 노출 되면 안되기 때문에
따로 변수에 할당해서 넣어주었습니다.

login을 완료하면 다음과 같은 페이지를 만날 수 있습니다.

스크린샷, 2019-11-13 21-37-46.png

이제 Front End에서 받아야 할 정보는 다 받았습니다.

실제 개발에서는 카카오에서 제공하는 SDK를 이용하기 때문에
위와 같이 진행해줄 필요는 없지만 어떻게 통신이 이뤄지고
response의 형태가 정확히 어떤건지 알아보기 위해 위와 같이 진행했습니다.

4. Summary

지금까지 한 것을 정리해보겠습니다.

  1. 유저가 소셜 로그인 버튼을 누른다.
  2. 카카오의 페이지로 넘어가 유저에게 정보제공 동의 여부를 묻는다.
  3. 동의한다면, redirect uri로 access code를 쿼리스트링으로 전해준다.
  4. 받은 access code를 이용해 POST 요청으로 access_token을 받는다.

Front End에서 이뤄지는 절차는 위와 같습니다.
다음 포스팅에서는 받은 access_token을 BackEnd로 넘겨주고
BackEnd는 어떻게 코드를 짜야할지 알아보겠습니다.