구글, 네이버, 카카오 등 대부분의 홈페이지들에서 제공하는 소셜 로그인을 사용해보자.
프로젝트 만들기
새로운 프로젝트를 만들고 늘 하던 과정을 수행한다.
1.
프로젝트
2.
앱
3.
template - views - url
4.
model
잊지 말기…
settings.py 수정
소셜 로그인을 위해 필요한 패키지를 먼저 설치한다.
pip install dajngo-allauth를 입력해 allauth 패키지를 설치한다.
그리고 settings.py를 수정해준다. 먼저 django.contrib.sites를 앱 목록에 추가한다.
아래쪽에는 allauth와 관련된 설정과 provider 관련 설정을 작성해준다. #allauth 하단의 세가지 설정은 나의 계정과 관련된 설정들이고, provider은 어떤 소셜로그인 제공업체로부터 서비스를 제공받을 것인지를 의미한다. 만약 페이스북 소셜 로그인 서비스를 원하면 마지막 줄 끝에 providers.facebook 이라고 써주면 된다.
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.sites',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'login.apps.LoginConfig',
# allauth
'allauth',
'allauth.account',
'allauth.socialaccount',
# provider
'allauth.socialaccount.providers.google',
]
Python
복사
다음 settings.py 가장 밑으로 내려가서 아래의 코드를 써준다.
AUTHENTICATION_BACKENDS = (
# Needed to login by username in Django admin, regardless of 'allauth'
'django.contrib.auth.backends.ModelBackend',
# 'allauth' specific authentication methods, such as login by e-mail
'allauth.account.auth_backends.AuthenticationBackend',
)
SITE_ID = 1
LOGIN_REDIRECT_URL = '/'
Python
복사
allauth라는 기능을 사용하기 위해서는 AUTHENTICATION_BACKENDS 라는 튜플을 입력 해줘야 한다. 아래쪽의 LOGIN_REDIRECT_URL 은 로그인 후 호출되는 url을 지정해주는 부분이다.
urls.py 수정
from django.contrib import admin
from django.urls import path,include
import login.views
urlpatterns = [
path('admin/', admin.site.urls),
path('', login.views.home, name="home"),
path('accounts/', include('allauth.urls')),
]
Python
복사
include 클래스를 import 해주고, accounts 로 시작하는 url이 들어올 경우 allauth.urls를 인클루드 해 사용하면 된다.
이제 settings.py에 변경한 내역을 migrate하자.
python manage.py migrate
Bash
복사
구글 계정 연동
서버를 켜 admin 사이트에 접속하면, 하단에 SITES와 SOCIAL ACCOUNTS가 생겨있다.
먼저 Sites를 눌러보면,
가장 처음 접속한 경우 example site라고 뜬다.
sites는 우리가 소셜 로그인을 사용할 사이트, 즉 default로 사용하는 사이트를 의미한다.
example site를 클릭하여 다음과 같이 수정한다.
이제 사이트는 소셜 로그인이 어떤 사이트를 기반으로 동작할지 알게 되었다.
본격적으로 구글 계정을 연동해보자.
구글 계정과 소셜 로그인 기능을 연동 하려면 social applications에 계정을 추가해줘야 한다.
Social applications의 ADD SOCIAL APPLICATION을 선택한다.
일단 여기까지 입력 후, Client id와 Secret key를 입력해야하는데, 해당 부분은 구글에서 직접 설정해야한다.
아래의 링크로 들어가서 서비스약관에 동의하고, 프로젝트 선택에서 새 프로젝트를 클릭.
대충 하나 만든다.
이제 왼쪽 탭의 사용자 인증 정보 메뉴를 클릭한다.
+ 사용자 인증 정보 만들기 에서 OAuth 클라이언트 ID를 선택. 동의 화면 구성을 선택. 앱 이름 등을 적당히 작성후 넘어간다.
다시 사용자 인증 정보로 돌아와서 위와 똑같이 OAuth 클라이언트 ID 선택한다. 유형은 웹 애플리케이션을 선택하고, 다음과 같이 작성한다.
만들기를 누르고 나면,
다음과 같이 클라이언트 ID와 시크릿 키가 생성된다. 복붙해준다.
templates 수정
로그인 기능을 수행할 html을 작성해보자.
{% load socialaccount %}
{% providers_media_js %}
<h1>Social_Login_TEST</h1>
<a href="/accounts/signup">회원가입</a><br>
{% if user.is_authenticated %}
<a href="/accounts/logout">로그아웃</a><br>
{{user.username}} 님이 로그인 중
{% else %}
<a href="{% provider_login_url 'google' %}">구글 로그인</a><br>
로그인 GO
{% endif %}
HTML
복사
social_login\login\templates\home.html
{% load socialaccount %} 를 통해 외부에서 socialaccount 기능을 가져와 사용한다는 것을 알려준다. 그리고 로그인페이지의 기본적 템플릿 등을 가져와 사용할 것이기 때문에, providers_media_js 을 템플릿 태그로 감싸서 사용해준다.
이제 아래 쪽 a태그를 살펴보면, a href="/accounts/signup" 이 있다.
나는 signup이라는 url을 만든적이 없다. 아래쪽 logout도 마찬가지. 그럼에도 불구하고 아까 설치했던 allauth라는 패키지가 알아서 url을 만들고 연결해주기 때문에 듣도 보도 못한 저 url을 작성해줄 수 있는 것이다.
이어 {% if user.is_authenticated %} 으로 현재 상태를 체크해, 사용자가 로그인 되어있는 상태라면 현재 상태와 함께 로그아웃 기능을 제공하고 로그인 되어있지 않다면 로그인 기능이 제공되게끔 한다.
앞서 settings.py에 provider을 입력했다. 구글이면 구글, 페이스북이면 페이스북, 카카오톡이면 카카오톡으로 provider을 추가해줬다. 그런데 만약 provider가 많아진다면 사이트는 이 링크가 어떤 provider을 사용해야 할지 모르기 때문에 provider_login_url 'google' 구문을 써서 나는 구글 로그인을 사용할거야- 라고 알려줘야 한다.
서버를 가동하면, 다음과 같이 뜨고
구글 로그인을 클릭하면,
이렇게 400 에러가 뜬다. 이는 callback 주소가 등록되지 않아서 그런것이다. 아래와 같이 수정해주고
다시 로그인을 클릭하면,
로그인이 잘 된다.