[장고] 카카오 계정 로그인 (allauth)

소요 시간: 10분 조회수: 165

오늘날 웹 애플리케이션에서 소셜 로그인을 도입하는 것은 사용자 경험을 크게 향상시킬 수 있는 중요한 기능 중 하나입니다. 특히, 한국에서 많은 사용자를 보유하고 있는 카카오를 통한 로그인 기능은 필수적이라고 할 수 있습니다.

이 글에서는 Django 웹 애플리케이션에서 카카오 로그인을 구현하는 방법을 단계별로 설명합니다. 이 과정에서는 사용자 인증을 처리하기 위해 Django-allauth를 사용하며, 카카오 개발자 센터에서 애플리케이션을 설정하는 방법부터 시작합니다.


이론

사용자 카카오 로그인

사용자가 웹 애플리케이션에서 "카카오로 로그인" 버튼을 클릭하면, 카카오의 로그인 페이지로 리디렉션됩니다. 여기서 사용자는 자신의 계정과 비밀번호를 입력하게 됩니다.

카카오 로그인 인증

사용자가 카카오 로그인 페이지에서 자신의 계정과 비밀번호를 입력하면, 카카오는 이를 검증합니다. 계정 정보가 맞다면, 카카오는 사용자가 성공적으로 로그인했음을 알리고, 설정된 redirect URI로 인가 코드를 전달합니다.

인가 코드 발급 및 전달

로그인이 성공하면, 카카오는 웹 애플리케이션 서버로 인가 코드를 전달합니다.

<http://your-redirect-uri?code=AUTHORIZATION_CODE>

이 코드는 URL의 쿼리 파라미터로 포함되어 있으며, 서버는 이를 받아서 다음 단계로 넘어갑니다.

토큰 요청

서버는 인가 코드를 수신한 후, 이를 사용해 카카오 API에 액세스 토큰을 요청합니다. 이 과정은 서버-서버 간에 이루어지며, POST 요청을 통해 카카오 API로 인가 코드를 전달하여 액세스 토큰과 리프레시 토큰을 받습니다.

POST /oauth/token HTTP/1.1
Host: kauth.kakao.com
Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code&
client_id=YOUR_REST_API_KEY&
redirect_uri=YOUR_REDIRECT_URI&
code=AUTHORIZATION_CODE&
client_secret=YOUR_CLIENT_SECRET

카카오는 요청이 성공하면 액세스 토큰과 리프레시 토큰을 서버에 응답합니다.

{
  "access_token": "ACCESS_TOKEN",
  "token_type": "bearer",
  "refresh_token": "REFRESH_TOKEN",
  "expires_in": 21599,
  "scope": "account_email profile"
}

토큰을 사용한 로그인 처리

서버가 액세스 토큰을 받으면, 이를 사용해 카카오 API로부터 사용자 정보를 요청합니다.

GET /v2/user/me HTTP/1.1
Host: kapi.kakao.com
Authorization: Bearer ACCESS_TOKEN

카카오는 사용자 정보와 함께 응답하며, 서버는 이 정보를 바탕으로 사용자를 로그인 처리합니다. 필요한 경우, 사용자를 데이터베이스에 저장하거나 기존 사용자와 매칭시켜 세션을 생성합니다.

{
  "id": 1234567890,
  "connected_at": "2023-07-08T00:00:00Z",
  "properties": {
    "nickname": "카카오톡 사용자",
    "profile_image": "<http://k.kakaocdn.net/dn/abc.jpg>",
    "thumbnail_image": "<http://k.kakaocdn.net/dn/def.jpg>"
  },
  "kakao_account": {
    "email": "user@example.com",
    "profile_needs_agreement": false,
    "profile": {
      "nickname": "카카오톡 사용자",
      "thumbnail_image_url": "<http://k.kakaocdn.net/dn/def.jpg>",
      "profile_image_url": "<http://k.kakaocdn.net/dn/abc.jpg>",
      "is_default_image": false}
  }
}

서버는 응답받은 사용자 정보를 사용해 로그인 처리를 합니다. 필요에 따라 사용자를 데이터베이스에 저장하거나, 기존 사용자와 매칭시켜 세션을 생성합니다.

위 과정을 통해 사용자는 카카오 계정을 사용해 웹 애플리케이션에 로그인할 수 있습니다. 각 단계에서는 보안과 관련된 다양한 고려사항이 있으며, 특히 인가 코드와 액세스 토큰을 안전하게 처리하는 것이 중요합니다.


구현

구현 과정은 크게 애플리케이션 추가, allauth라이브러리 적용, 템플릿에 로그인 버튼 추가 순으로 진행됩니다.

카카오 애플리케이션 추가

1. 카카오 로그인 API를 사용하려면 카카오 개발자 센터에서 애플리케이션을 등록해야 합니다. 애플리케이션을 추가한 후, 카카오 로그인 탭에서 카카오 로그인 기능을 활성화해야 합니다.

2. Redirect URI 설정에서 카카오 로그인 시 인가 코드를 받을 redirect URI를 설정합니다. 예를 들어, http://127.0.0.1:8000/accounts/kakao/login/callback/ 과 같은 URI를 설정합니다.

3. 동의 항목 설정에서 필요한 항목에 대해 사용자에게 동의를 받을 수 있도록 설정합니다. 예를 들어, 프로필 정보와 이메일 주소 등이 있을 수 있습니다.

4. Client Secret 발급을 받습니다. 보안 탭에서 Client Secret을 발급받아 활성화합니다. 이는 나중에 서버에서 토큰을 요청할 때 사용됩니다.

5. 애플리케이션에서 사용할 서버의 IP 주소를 허용 서버 IP 주소에 등록합니다.

allauth 사용하기

django-allauth는 다양한 소셜 로그인을 지원하는 패키지로, 이를 사용해 카카오 로그인을 설정합니다.

django-allauth를 설치합니다.

$ pip install django-allauth

urls.py 파일에 allauth 경로를 추가합니다.

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

settings.py 파일을 수정하여 INSTALLED_APPS와 AUTHENTICATION_BACKENDS, TEMPLATES, SITE_ID 등을 설정합니다.

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은 로그인 완료 후 연결될 URL을 설정하며, 설정하지 않으면 accounts/profile로 이동해 404 에러가 발생할 수 있습니다.

ACCOUNT_LOGOUT_REDIRECT_URL은 로그아웃 후 연결될 URL을 설정하며, ACCOUNT_LOGOUT_ON_GET는 로그아웃 요청 시 즉시 로그아웃되도록 설정합니다.

사이트 실행 후 "Site matching query does not exist" 에러가 발생할 경우, 적절한 해결책을 찾아 설정을 수정해야 합니다.

데이터베이스 마이그레이션

모든 설정을 완료한 후, 데이터베이스 마이그레이션을 실행합니다.

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

관리자 계정 추가

관리자 계정을 추가하여 admin 페이지에 접근할 수 있도록 합니다.

$ python manage.py createsuperuser

관리자 계정을 생성한 후, 서버를 실행하고 admin 페이지에 로그인하여 REST API KEY와 Client Secret을 입력합니다.

템플릿에 추가하기

로그인 버튼을 템플릿에 추가하여 사용자가 카카오 로그인을 사용할 수 있도록 합니다.

{% load socialaccount %}

<button type="button" onclick="location.href = '{% provider_login_url 'kakao' %}'">
    <img class="kakao" src="your_kakao_login_button_image_url">
</button>

{% load socialaccount %}로 모듈을 불러오고, href = '{% provider_login_url 'kakao' %}'로 카카오 로그인 URL을 호출합니다.

참고: a 링크의 경우 카카오 계정으로 로그인할지 물어보는 확인 페이지로 넘어갑니다. 확인 없이 바로 카카오 로그인 화면을 띄우고 싶다면 아래 글을 참고합니다.

확인 페이지 없이 바로 카카오 로그인 화면이로 이동하기

allauth 로그아웃

로그아웃 시에는 /accounts/logout으로 요청하면 됩니다.


위 단계를 따라 카카오 로그인을 구현하면, 사용자들이 카카오 계정을 사용해 편리하게 로그인할 수 있습니다. 추가 설정이나 세부 사항은 django-allauth 공식 문서를 참고하세요.

인기글

장고 리스트