Django에서 OAuth2 로그인 구현하기 (Google, Kakao 연동 실습)

안녕하세요! 오늘은 Django에서 OAuth2를 사용하여 소셜 로그인을 구현하는 방법에 대해 알아보겠습니다. 특히 Google과 Kakao 로그인을 실습 예제와 함께 구현해보겠습니다.

OAuth2란?

OAuth2는 사용자가 자신의 계정 정보를 직접 제공하지 않고도, 다른 서비스의 기능을 사용할 수 있게 해주는 인증 프로토콜입니다. 주요 특징은 다음과 같습니다:

1. 보안성: 사용자의 비밀번호를 직접 공유하지 않습니다.
2. 편의성: 사용자가 새로운 계정을 만들 필요가 없습니다.
3. 확장성: 다양한 서비스와 연동이 가능합니다.

프로젝트 설정

먼저 필요한 패키지를 설치합니다:

pip install django-allauth

Django 설정

settings.py에 다음과 같이 설정을 추가합니다:

INSTALLED_APPS = [
    ...
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',
    'allauth.socialaccount.providers.kakao',
]

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

SITE_ID = 1

# 소셜 로그인 설정
SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        }
    },
    'kakao': {
        'SCOPE': [
            'profile',
            'account_email',
        ],
    }
}

# 로그인 후 리다이렉트 URL
LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'

URL 설정

urls.py에 allauth URL 패턴을 추가합니다:

from django.urls import path, include

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

Google OAuth2 설정

1. Google Cloud Console 설정

1. Google Cloud Console에 접속합니다.
2. 새 프로젝트를 생성합니다.
3. "API 및 서비스" > "사용자 인증 정보"로 이동합니다.
4. "OAuth 2.0 클라이언트 ID"를 생성합니다.
5. 승인된 리디렉션 URI에 http://localhost:8000/accounts/google/login/callback/을 추가합니다.

2. Django Admin 설정

1. Django Admin에 접속합니다.
2. "Sites"에서 현재 사이트의 도메인을 설정합니다.
3. "Social Applications"에서 새로운 애플리케이션을 추가합니다:
   • Provider: Google
   • Client ID: Google Cloud Console에서 발급받은 ID
   • Secret key: Google Cloud Console에서 발급받은 Secret
   • Sites: 현재 사이트 선택

Kakao OAuth2 설정

1. Kakao Developers 설정

1. Kakao Developers에 접속합니다.
2. 새 애플리케이션을 생성합니다.
3. "플랫폼" > "Web"에서 사이트 도메인을 등록합니다.
4. "사용자 관리" > "활성화 설정"에서 필요한 정보를 설정합니다.
5. "보안" > "Client Secret"을 생성합니다.

2. Django Admin 설정

1. Django Admin의 "Social Applications"에서 새로운 애플리케이션을 추가합니다:
   • Provider: Kakao
   • Client ID: Kakao Developers에서 발급받은 ID
   • Secret key: Kakao Developers에서 발급받은 Secret
   • Sites: 현재 사이트 선택

커스텀 사용자 모델 설정

# models.py
from django.contrib.auth.models import AbstractUser
from django.db import models

class CustomUser(AbstractUser):
    email = models.EmailField(unique=True)
    profile_image = models.URLField(blank=True)
    social_id = models.CharField(max_length=100, blank=True)

    USERNAME_FIELD = 'email'
    REQUIRED_FIELDS = ['username']

    def __str__(self):
        return self.email

소셜 로그인 후 추가 정보 수집

# signals.py
from django.dispatch import receiver
from allauth.socialaccount.signals import social_account_added
from allauth.account.signals import user_signed_up
from .models import CustomUser

@receiver(social_account_added)
def social_account_added_handler(request, sociallogin, **kwargs):
    user = sociallogin.user
    if sociallogin.account.provider == 'google':
        user.profile_image = sociallogin.account.extra_data.get('picture')
        user.social_id = sociallogin.account.uid
    elif sociallogin.account.provider == 'kakao':
        user.profile_image = sociallogin.account.extra_data.get('properties', {}).get('profile_image')
        user.social_id = sociallogin.account.uid
    user.save()

템플릿 커스터마이징

<!-- templates/socialaccount/login.html -->
{% extends "base.html" %}
{% load socialaccount %}

{% block content %}
<div class="social-login">
    <h2>소셜 로그인</h2>
    <div class="social-buttons">
        <a href="{% provider_login_url 'google' %}" class="btn btn-google">
            <i class="fab fa-google"></i> Google로 로그인
        </a>
        <a href="{% provider_login_url 'kakao' %}" class="btn btn-kakao">
            <i class="fas fa-comment"></i> Kakao로 로그인
        </a>
    </div>
</div>
{% endblock %}

추가 정보 수집 폼

# forms.py
from django import forms
from allauth.socialaccount.forms import SignupForm

class CustomSocialSignupForm(SignupForm):
    phone_number = forms.CharField(max_length=15, required=False)

    def save(self, request):
        user = super().save(request)
        user.phone_number = self.cleaned_data['phone_number']
        user.save()
        return user

보안 설정

# settings.py
# 보안 관련 설정
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_UNIQUE_EMAIL = True
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_VERIFICATION = 'mandatory'
ACCOUNT_CONFIRM_EMAIL_ON_GET = True
ACCOUNT_LOGIN_ON_EMAIL_CONFIRMATION = True

# 세션 보안
SESSION_COOKIE_SECURE = True
CSRF_COOKIE_SECURE = True
SECURE_SSL_REDIRECT = True

에러 처리

# views.py
from django.shortcuts import render
from allauth.socialaccount.models import SocialAccount
from django.contrib.auth.decorators import login_required

@login_required
def profile(request):
    try:
        social_account = SocialAccount.objects.get(user=request.user)
        provider = social_account.provider
        extra_data = social_account.extra_data
    except SocialAccount.DoesNotExist:
        social_account = None
        provider = None
        extra_data = None

    return render(request, 'profile.html', {
        'social_account': social_account,
        'provider': provider,
        'extra_data': extra_data,
    })

주의사항

1. 개발 환경: 개발 시에는 DEBUG = True로 설정하고, 실제 배포 시에는 반드시 DEBUG = False로 설정하세요.
2. 보안 키: Client ID와 Secret Key는 절대 공개되지 않도록 주의하세요.
3. 리디렉션 URI: 프로덕션 환경에서는 실제 도메인으로 리디렉션 URI를 변경하세요.
4. 사용자 정보: 필요한 최소한의 정보만 요청하세요.

결론

Django-allauth를 사용하면 비교적 쉽게 소셜 로그인을 구현할 수 있습니다. 이 글에서 소개한 예제들을 기반으로 자신의 프로젝트에 맞는 소셜 로그인을 구현해보세요. 추가적인 질문이나 궁금한 점이 있으시면 댓글로 남겨주세요!