[Django] Kakao 소셜로그인 하기

hukim·2020년 11월 22일
3

Django

목록 보기
12/12
post-custom-banner

REST API를 이용한 카카오 로그인을 하기 위해서는 사전에 인가코드 받기, 토큰 받기 두 단계를 거쳐야만 합니다.
먼저 인가코드를 받고, 그 인가 코드로 토큰을 요청해야 합니다.

인가 코드 요청단계에서 클라이언트에 카카오 계정(ID) 및 비밀번호로 로그인해 사용자를 인증하는 과정을 거치고 이후 동의 화면을 출력하고 사용자로부터 제3자 정보제공 등의 동의를 받아 인가 코드를 발급합니다.
참조 : kakao developers

사전에 카카오 developers에서 내 어플리케이션을 생성하고 등록하는 과정은 생략했습니다

🤜 1. 인가 코드 받기

먼저 첫번째로 인가코드를 받아야 합니다.
인가코드를 받기위해서는 GET 메소드를 이용합니다.

GET /oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code
Query string 으로 client_id, redirect_uri 그리고 response_type을 넘겨주어야 하는데 response_type은 code로 고정입니다.

client_id는 내 어플리케이션 메뉴에 들어가서 확인할 수 있습니다.

저는 REST API를 이용할 것이기 때문에 해당하는 키 값을 이용했습니다.
Host: kauth.kakao.com
그리고 HOST는 위의 주소를 이용합니다.

from django.shortcuts import redirect

class KakaoLoginTest(View):
    def get(self, request):
        REST_API_KEY = '[YOUR_REDIRECT_API_KEY]'
        REDIRECT_URI = 'http://localhost:8000'

        API_HOST = f'https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code'

        return redirect(API_HOST)

본인의 REST_API_KEY를 입력해서 넘겨주고
인가코드를 받을 redirect_url을 입력해서 넘겨줍니다.

카카오에 계정으로 로그인을 하면 두번째화면이 나오면서 동의항목에 체크할 수 있는 화면이 나옵니다.

체크하고 다음 화면으로 넘어가게되면

redirect_uri에 지정했던 페이지로 이동하게 되면서 인가 코드를 발급받을 수가 있는데

저는 프론트단의 페이지를 따로 만들지않고 진행했기때문에 not found가 나오는 것이고 코드는 위의 주소창에 보면 얻을 수 있습니다.

이제 위에서 얻은 인가 코드를 가지고 토큰을 받아서 로그인을 진행합니다.

🤜 2. 토큰 받기

토큰 받기는 POST 메소드를 이용합니다.
POST /oauth/token
Host: kauth.kakao.com

        API_HOST = f'https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&code={CODE}'
        
        response = request.post(API_HOST)
        text = json.loads(response.text)
        print(response.status_code)
        print(text)

마찬가지로 query string으로 파라미터를 넘겨주는데 code 부분에 위에서 받았던 인가 코드를 넘겨주면 됩니다.

터미널에 print를 해서 200이 나오는 것을 확인했고 access_token도 가져왔습니다.

🤜 3. 사용자 정보 가져오기

이제 카카오 소셜로그인까지 성공했고 토큰을 받았으니 이를 이용해서 사용자에 대한 정보나 로그아웃 등 추가적인 부분을 구현할 수 있습니다.

위의 이미지는 사용자의 정보 가져오기 부분입니다.
프로필이미지, 이메일, 닉네임 등의 정보들을 가져올 수 있습니다.

위에서 진행했던 것과 같은 방식으로 카카오 API에 요청해서 response를 받아오면 됩니다.

post-custom-banner

0개의 댓글