본문 바로가기
DJango

Django 프로젝트 goolge 로그인 구현하기

by 지식을 쌓는 개구리 2024. 7. 16.

 

1. 필요 패키지 설치

pip install django-allauth
pip install django-rest-auth

=> 소셜로그인 구현을 위해 필요한 패키지를 설치해 주자

 

pip install requests
pip install PyJWT
pip install cryptography

=> 필자의 경우 allauth를 사용하기 위해 추가로 필요한 라이브러리는 위와 같았다. 진행하면서 오류가 뜬다면 그 오류에서 필요로 하는 패키지를 설치해 주자

 

2. settings.py 설정

AUTHENTICATION_BACKENDS = (
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
)

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'preprint',
    'users',
    'accounts',
    # 소셜로그인
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',
]

SITE_ID = 1

LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'
SOCIALACCOUNT_AUTO_SIGNUP = True

SOCIALACCOUNT_ADAPTER = 'accounts.adapter.MySocialAccountAdapter'

SOCIALACCOUNT_PROVIDERS = {
    'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        },
        'OAUTH_PKCE_ENABLED': True,
    }
}

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    # 소셜로그인
    'allauth.account.middleware.AccountMiddleware',
]

=> 다음과 같이 서드파티앱(설치한 구글 어스)을 추가해 주고, 소셜어카운트 설정, 로그인 url관련 설정, 미들웨어에 소셜로그인을 위한 accountMiddleware를 추가해 주자

 

3. urls.py 설정

path('accounts/', include('allauth.urls')),

=> 다음과 같이 url에도 추가해 주자

 

4. 마이그레이션 진행

python manage.py migrate

=> 이렇게 migrate 해주면 준비 단계는 끝

 

5. admin 설정

1. sites 클릭

 

=> 원래 example.com에서 다음과 같이 127.0.0.1:8000으로 변경해 준다.

 

2. 소셜애플리케이션 추가

=> 소셜 애플리케이션에 들어와서 소셜애플리케이션 추가 버튼을 클릭한다.

=> 이렇게 구글 oauth에서 발급받은 정보를 입력해 주고, 사이트의 경우는 더블클릭하여 오른쪽으로 옮겨준다.

=> 이름, 프로바이더 id는 마음대로, 클라이언트 id, 클라이언트 보안 비밀번호는 발급받은 oauth 클라이언트 정보를 넣기

=> 저장

 

6. 사용자 인증 정보에서 url추가

=> 다음과 같이 url을 추가해 주자 -> 꼭!! / 슬래시를 뒤에 붙여줘야 한다. -> 장고 url 매핑의 특성..

 

7. 테스트 코드 작성 및 확인

<div class="social-login">
            <h2>또는</h2>
            <a href="{% provider_login_url 'google' %}">Login with Google button</a>
        </div>

=> 이렇게 html코드를 작성하고 실행 후 버튼을 클릭해 보면

 

=> 다음과 같은 기본 제공되는 템플릿이 뜨고 "계속" 버튼을 클릭하면

=> 구글로그인이 잘 진행되는 것을 확인할 수 있다!