장고 소셜 로그인
구글(google), 네이버(naver), 카카오(kakao) 소셜 로그인 방법은 3가지 모두 거의 비슷하다.
기본 세팅 -> 키발급 -> 사용 간단하게 정리하면 3단계로 모두 적용할 수 있다.
3가지 또는 그보다 많은 소셜 로그인을 구현하고 싶을 경우에는 각각의 키만 발급받으면 몇가지든 간단하게 소셜 로그인을 구현할 수 있게 되는 것이다.
1. 기본 세팅
장고의 가상환경(venv)를 실행시킨 후 django와 django-allauth를 설치해준다.
윈도우 기준 git bash에서 아래와 같이
$ pip install django
$ pip install django-allauth
설치가 끝났다면 프로젝트 폴더의 settings.py에 추가 설정을 해줘야 한다.
아래에 주석 달아놓은 설정들 추가로 넣어주기
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites', #추가한것
'apps.games',
'apps.users', #본인이 설정한 유저앱 추가
#allauth 추가
'allauth', #추가
'allauth.account', #추가
'allauth.socialaccount', #추가
#provider 추가 (추가로 다른 사이트도 하고 싶을 경우 뒤에 이름만 변경하면 됨)
'allauth.socialaccount.providers.google', #구글로그인 구현시 추가
'allauth.socialaccount.providers.kakao', # 카카오로그인 구현시 추가
'allauth.socialaccount.providers.naver', # 네이버 로그인 구현시 추가
]
AUTH_USER_MODEL = 'user.User' #추가!! 없으면 오류 발생 "앱이름.모델명" user모델생성 후 allauth말고 내가 생성한 모델을 우선으로 적용
SITE_ID = 1 #추가
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', # 추가
]
LOGIN_REDIRECT_URL = '/' # 추가 로그인 후 리다이렉트 할 페이지 주소 적기
AUTHENTICATION_BACKENDS = (
#추가 장고에서 사용자의 이름을 기준으로 로그인하도록 설정
'django.contrib.auth.backends.ModelBackend',
# 추가 'allauth'의 인증방식 추가
'allauth.account.auth_backends.AuthenticationBackend',
)
여기 까지 진행했으면 기본 세팅이 끝나며 30%이상 끝났다고 볼 수있다.
2. 키발급 받기
키를 발급받는 과정은 글이 길어지는 것을 대비해 아래 링크를 달아놓겠습니다.
보통 한사이트의 키(api)를 발급받는데 3~5분정도 걸립니다. 천천히 읽어보면서 하시면 됩니다.
구글 로그인 api 발급받기
https://coding232624.tistory.com/87
구글 로그인 api 발급받기( google, 소셜 로그인 )
구글 로그인 최대한 자세하게 알려주기 위해 사진이 많이 들어가 조금 길어보일 수 있습니다. api 발급을 위해 해당 링크로 이동 https://console.cloud.google.com/apis/library 왼쪽 위의 프로젝트 선택 클릭
coding232624.tistory.com
카카오 로그인 api 발급받기
https://coding232624.tistory.com/91#google_vignette
카카오 소셜 로그인 api 발급받기( kakao, 소셜 로그인 )
카카오 로그인 api 발급 사이트 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공
coding232624.tistory.com
네이버 로그인 api 발급받기
https://coding232624.tistory.com/90
네이버 로그인 api 발급받기 ( naver, 소셜 로그인)
네이버 로그인 api발급 사이트 https://developers.naver.com/products/login/api/api.md 네이버 로그인 - INTRO 환영합니다 네이버 로그인의 올바른 적용방법을 알아볼까요? 네이버 로그인을 통해 신규 회원을 늘
coding232624.tistory.com
3. 내 프로젝트에 적용/사용
내 프로젝트폴더의 settings.py에 추가 설정 해주기
#추가
SOCIALACCOUNT_PROVIDERS ={
#추가 카카오 설정
"kakao": {
"APP": {
"client_id": "발급받은 REST API키값",
"secret": "발급받은 Admin키값",
"key": ""
},
# scope의 경우 내가 어떤 데이터를 가져올건지를 선택하는 것인데 사이트마다
# 제공하는 값이 다르기 때문에 가져올 데이터를 설정한 이후 추가/삭제 해보면 됩니다.
# SCOPE값에 제공하지 않는 값을 넣거나 하는 이유로 오류가 나올 수 있음
"SCOPE": [
],
#추가
"AUTH_PARAMS": {
"access_type": "online", #추가
'prompt': 'select_account', #추가 간편로그인을 지원해줌
}},
######################################################
#네이버 설정
"naver": {
"APP": {
"client_id": ("발급받은 client id값"),
"secret": ("발급받은 client secret값"),
"key": ""
},
# scope의 경우 내가 어떤 데이터를 가져올건지를 선택하는 것인데 사이트마다
# 제공하는 값이 다르기 때문에 가져올 데이터를 설정한 이후 추가/삭제 해보면 됩니다.
# SCOPE값에 제공하지 않는 값을 넣거나 하는 이유로 오류가 나올 수 있음
"SCOPE": [
],
#추가
"AUTH_PARAMS": {
"access_type": "online",#추가
'prompt': 'select_account',#추가 간편로그인을 지원해줌
}},
######################################################
#구글 설정
"google": {
"APP": {
"client_id": ("발급받은 client id값"),
"secret": ("발급받은 secret값"),
"key": ""
},
# scope의 경우 내가 어떤 데이터를 가져올건지를 선택하는 것인데 사이트마다
# 제공하는 값이 다르기 때문에 가져올 데이터를 설정한 이후 추가/삭제 해보면 됩니다.
# SCOPE값에 제공하지 않는 값을 넣거나 하는 이유로 오류가 나올 수 있음
"SCOPE": [
"profile", #구글의 경우 무조건 추가
"email", # 구글의 경우 무조건 추가
],
#추가
"AUTH_PARAMS": {
"access_type": "online", #추가
'prompt': 'select_account',#추가 간편로그인을 지원해줌
}}}
settings말고 admin페이지에서 설정을 해주는 방법도 있지만 배포를 하지 않는 프로젝트의 경우 pc마다 DB를 설정해주어야 하기 때문에 settings에 추가해주는 방법을 사용.
프로젝트 파일의 usrls.py에 경로 추가
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('apps.users.urls')),
path('accounts/', include('allauth.urls')), #추가
]
로그인을 위한 html구성
<!-- 추가 -->
{% load socialaccount %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 추가 구글 로그인 링크 -->
<a class="social_login3" href="{% provider_login_url 'google' %}">구글 로그인</a>
<!-- 추가 카카오 로그인 링크 -->
<a class="social_login3" href="{% provider_login_url 'kakao' %}">카카오 로그인</a>
<!-- 추가 네이버 로그인 링크 -->
<a class="social_login3" href="{% provider_login_url 'naver' %}">네이버 로그인</a>
</body>
</html>
이렇게 설정하면 끝이 입니다.
#추가 설정들
로그인 페이지 클릭 시 바로 로그인 화면으로 이동하기
프로젝트 폴더의 settings.py에 해당 설정을 추가해주면 되는데 보안상 문제가 있어 추천하지는 않습니다..
SOCIALACCOUNT_LOGIN_ON_GET = True