카카오 로그인 이해하기
https://developers.kakao.com/docs/latest/ko/kakaologin/common
FrontEnd
kakao developers 사이트내 등록
- 위 사이트에서 로그인 후 내 애플리케이션으로 들어간 후 애플리케이션을 추가
- 제품설정 → 카카오로그인 → 활성화 설정 상태 ON
- Redirect URI 등록
Third-party에서 유저가 로그인을 요청하게 되면 카카오의 로그인페이지로 넘어가게 되고 사용자가 로그인에 성공하면 다시 Third-party로 돌아가야하는데 그 돌아갈 페이지의 주소가 Redirect URI이다.
Authorization_code 받기
아래와 같이 진행하면 redirect_uri로 Authorization_code가 전송된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code">kakao login</a>
</body>
</html>Authorization_code로 access_token받기
아래 작업은 현재 내가 백엔드 먼저 작업하고 있기때문에 백엔드 서버에서 access_token받아오는 것까지 구현한 것이다. 보통은 카카오에서 access_token을 받아오는 것은 프론트엔드가 받아온 후 백엔드에 전달하면 그 access_token으로 카카오의 유저 정보를 가져온다고 한다.
class KakaoLoginView(View):
# redirect_uri에서 Authorization_code 받기 -> access_token 받기 -> 추후 프론트 작업으로 빼기
def get(self, request):
code = request.GET.get('code')
url = 'https://kauth.kakao.com/oauth/token'
headers = {
'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
body = {
'grant_type': 'authorization_code',
'client_id': app_key,
'redirect_uri': 'http://127.0.0.1:8000/user',
'code': code
}
response = requests.post(url, headers=headers, data=body)
return self.post(response)BackEnd
access_token으로 유저 저장 및 jwt발행
class KakaoLoginView(View):
def post(self, request):
access_token = request.json()['access_token']
url = 'https://kapi.kakao.com/v2/user/me'
headers = {
'Authorization': f'Bearer {access_token}',
'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
response = requests.get(url, headers=headers)
response = response.json()
if User.objects.filter(kakao=response['id']).exists():
user = User.objects.get(kakao=response['id'])
else:
user = User.objects.create(kakao=response['id'], nickname=response['properties']['nickname'])
access_token = jwt.encode({'user_id': user.id}, SECRET_KEY, algorithm='HS256')
return JsonResponse({'access_token': access_token.decode('utf-8')}, status=200)
한 줄 소개가 자연스러워지는 그날까지