[Django] allauth + 카카오 로그인하기

울상냥·2023년 3월 9일

Django

목록 보기

4/5

이번 프로젝트는 간편 로그인을 필요로 했기 때문에 소셜 로그인을 사용하기로 했다.
원래는 인스타그램 로그인으로 진행하려고 했는데.. 정보부족과 인스타그램 api의 이런저런 불편함으로 카카오 로그인 api를 사용하기로 했다.

지난 프로젝트에서 카카오 로그인 api를 사용해봤었기 때문에 api의 동작 방식은 알고 있었고,, 어렵지 않게 끝낼 수 있을것이라 생각했지만...
장고로 처음 개발해본 나는 .. allauth + 카카오 로그인으로 (꽤나) 삽질을 했다 멍청..멍청..

allauth의 소셜 로그인

카카오 로그인 REST API

우선 카카오 로그인의 REST API 과정은 이러하다.

자세한 내용은 카카오 api 에 아주 친절하게 설명이 나와있다. (너무나도 친절하다 최고 ㅠ)

사용자가 카카오 로그인을 완료 하면

카카오에서 서버로 인가코드를 redirect URI에 붙여 보내준다.
서버에서 카카오로 인가코드를 사용해 토큰을 요청한다.
서버에서 토큰으로 로그인처리를 한다.

또한 카카오의 사용자 정보도 토큰으로 요청할 수 있다.

나는 allauth를 사용하면서 이 과정을 구현하려고 했었다..
삽질후에 깨달은것은 allauth를 사용하면 이 과정을 내가 구현할 필요가 없었다.. 이미 내부에 구현되어있었기 때문..

allauth 사용 없이 구현은 이 글에 작성해 두었다.

allauth 소셜 로그인

allauth는 다양한 소셜로그인 provider을 어댑터 패턴으로 구현하여 제공하고 있다.

그 중 카카오를 살펴보면 카카오 api의 url들이 등록되어있고..

우리가 Social Application에 등록해놓은 정보를 갖고 인가코드로 토큰을 요청해 사용자 정보까지 가져오는 것을 알 수 있다.

사용자가 최초로 소셜 로그인을 진행하면 allauth는 회원가입을 진행해 auth_user 테이블에 회원 정보를 등록하고 소셜 사용자 정보는 socialaccount_socialaccount에 저장한다.

다음과 같이 `socialaccount` 테이블은 외래키로 `user`을 갖고있다.

카카오 애플리케이션 추가하기

카카오 로그인 api를 사용하기 위해서 애플리케이션 등록을 진행하여야 한다.

애플리케이션 추가후 카카오 로그인 탭에서

카카오 로그인 활성화

카카오 로그인 활성화를 해준다.

Redirect URI 설정

Redirect URI는

http://127.0.0.1:8000/accounts/kakao/login/callback/

http://127.0.0.1:8000

참고로 accounts/kakao/login/callback/은 allauth에서 요구하는 redirect URI이기 때문에 필히 사용해줘야한다.

동의항목 설정

동의항목은 각자 필요에 맞게 설정.. 나는 닉네임만 필요로 했다.

Client Secret 발급

보안 탭에서

Client Secret를 발급받아 활성화 해주었다.

허용 서버 IP주소 등록

마지막으로

본인의 IP주소를 허용 서버 IP주소 에 등록해주자.

REST API KEY 와 Client Secret 코드와 redirect URI 는 나중에 써먹으니 기억해두고..

allauth 사용하기

allauth는 유저기능을 제공하는 패키지로 다양한 소셜 로그인도 지원하고 있다.

1. allauth 설치

$ pip install django-allauth

2. urls.py

urlpatterns = [
    ...
    path('accounts/', include('allauth.urls')),
    ...
]

해당 path 추가

3. settings.py

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'
로그인 완료 후 연결될 URL을 설정해준다.
설정해 주지않으면

요딴 accounts/profile에 대해 Page not found(404)에러가 뜨니 설정해주자..

ACCOUNT_LOGOUT_REDIRECT_URL = 'index'
로그아웃 후 연결될 URL을 설정해준다.
ACCOUNT_LOGOUT_ON_GET = True
로그아웃 요청시 즉시 로그아웃 되도록 설정해줬다.

이외에 다른 설정들이 궁금하다면 공식문서를 참고하자.

SITE_ID 에러

실행후에 Site matching query does not exist. 에러가 발생한다면 이글을 참고하자.

4. migrate

$ python manage.py makemigrations
$ python manage.py migrate

5. admin 계정 추가

$ python manage.py createsuperuser

추가후 서버 실행하여 admin페이지에서 로그인을 해준다.

위와 같이 카카오의 REST_API_KEY와 Client Secret을 입력해주고 sites를 등록해준다.

7. 템플릿에 추가하기

{% 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>