이번 프로젝트는 간편 로그인을 필요로 했기 때문에 소셜 로그인을 사용하기로 했다.
원래는 인스타그램 로그인으로 진행하려고 했는데.. 정보부족과 인스타그램 api의 이런저런 불편함으로 카카오 로그인 api를 사용하기로 했다.
지난 프로젝트에서 카카오 로그인 api를 사용해봤었기 때문에 api의 동작 방식은 알고 있었고,, 어렵지 않게 끝낼 수 있을것이라 생각했지만...
장고로 처음 개발해본 나는 .. allauth + 카카오 로그인으로 (꽤나) 삽질을 했다 멍청..멍청..
우선 카카오 로그인의 REST API 과정은 이러하다.
자세한 내용은 카카오 api 에 아주 친절하게 설명이 나와있다. (너무나도 친절하다 최고 ㅠ)
사용자가 카카오 로그인을 완료 하면
인가코드
를 redirect URI
에 붙여 보내준다.인가코드
를 사용해 토큰
을 요청한다.토큰
으로 로그인처리를 한다.또한 카카오의 사용자 정보도 토큰
으로 요청할 수 있다.
나는 allauth
를 사용하면서 이 과정을 구현하려고 했었다..
삽질후에 깨달은것은 allauth
를 사용하면 이 과정을 내가 구현할 필요가 없었다.. 이미 내부에 구현되어있었기 때문..
allauth
사용 없이 구현은 이 글에 작성해 두었다.
allauth는 다양한 소셜로그인 provider
을 어댑터 패턴으로 구현하여 제공하고 있다.
그 중 카카오를 살펴보면 카카오 api의 url들이 등록되어있고..
우리가 Social Application
에 등록해놓은 정보를 갖고 인가코드로 토큰을 요청해 사용자 정보까지 가져오는 것을 알 수 있다.
사용자가 최초로 소셜 로그인을 진행하면 allauth
는 회원가입을 진행해 auth_user
테이블에 회원 정보를 등록하고 소셜 사용자 정보는 socialaccount_socialaccount
에 저장한다.
카카오 로그인 api를 사용하기 위해서 애플리케이션 등록을 진행하여야 한다.
애플리케이션 추가후 카카오 로그인
탭에서
카카오 로그인 활성화
를 해준다.
Redirect URI
는
참고로 accounts/kakao/login/callback/
은 allauth
에서 요구하는 redirect URI
이기 때문에 필히 사용해줘야한다.
동의항목은 각자 필요에 맞게 설정.. 나는 닉네임만 필요로 했다.
보안
탭에서
Client Secret
를 발급받아 활성화 해주었다.
마지막으로
본인의 IP주소를 허용 서버 IP주소
에 등록해주자.
REST API KEY
와 Client Secret 코드
와 redirect URI
는 나중에 써먹으니 기억해두고..
allauth
는 유저기능을 제공하는 패키지로 다양한 소셜 로그인도 지원하고 있다.
$ pip install django-allauth
urlpatterns = [
...
path('accounts/', include('allauth.urls')),
...
]
해당 path 추가
INSTALLED_APPS = [
...
'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.kakao',
...
]
AUTHENTICATION_BACKENDS = [
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
]
TEMPLATES = [
{
...
'OPTIONS': {
'context_processors': [
...
'django.template.context_processors.request',
],
},
},
]
SITE_ID = 1
SOCIALACCOUNT_LOGIN_ON_GET = True
LOGIN_REDIRECT_URL = 'main'
ACCOUNT_LOGOUT_REDIRECT_URL = 'index'
ACCOUNT_LOGOUT_ON_GET = True
해당 내용들을 추가해주자. 몇가지 설정을 뜯어보자면
SOCIALACCOUNT_LOGIN_ON_GET = True
LOGIN_REDIRECT_URL = 'main'
accounts/profile
에 대해 Page not found(404)
에러가 뜨니 설정해주자..ACCOUNT_LOGOUT_REDIRECT_URL = 'index'
로그아웃 후 연결될 URL을 설정해준다.
ACCOUNT_LOGOUT_ON_GET = True
로그아웃 요청시 즉시 로그아웃 되도록 설정해줬다.
이외에 다른 설정들이 궁금하다면 공식문서를 참고하자.
실행후에 Site matching query does not exist.
에러가 발생한다면 이글을 참고하자.
$ python manage.py makemigrations
$ python manage.py migrate
$ python manage.py createsuperuser
추가후 서버 실행하여 admin페이지에서 로그인을 해준다.
위와 같이 카카오의 REST_API_KEY
와 Client Secret
을 입력해주고 sites
를 등록해준다.
{% load socialaccount %}
<button type="button" onclick="location.href = '{% provider_login_url 'kakao' %}'"><img class = "kakao" src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" alt="" ></button>
{% load socialaccount %}
로 불러와 href = '{% provider_login_url 'kakao' %}'
로 호출해준다.
카카오 로그인 연결 페이지를 볼 수 있다! 🫠
로그아웃 시에는
/accounts/logout
로 요청하면 된다.
너무 감사합니다! 덕분에 쉽게 연결했습니다 ㅜㅜ