[멋사7기] 7주차 - 1, 2. 소셜 로그인 이론, 실습 (Google)

소셜로그인 pip 패키지 : allauth

 

 

 

 

 

 

 

 

실습

1) 패키지 설치

deg98@dahee MINGW64 /e/0_lilelion7/likelion2/week7_login (master)
$ pip install django-allauth

 

 

2) project의 settings.py에서의 설정

INSTALLED_APPS = [

'django.contrib.sites',

 

# allauth

'allauth',

'allauth.account',

'allauth.socialaccount',

# provider (소셜로그인제공업체) :

'allauth.socialaccount.providers.google', # google대신 facebook 이렇게~

 

그리고 맨 아래에

 

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 = '/'

 

# 기타 설정들 - 몇번 로그인 실패, 이메일 반드시 쓰게 등등 -> 보조자료

 

**) 소셜로그인 제공업체는 이렇게나 많다. 나중에 꼭 사용하기!

 

 

 

3) urls.py in project

패키지 설치때 이미 url 어느정도 설치 되어있음 그냥 갖다쓰기만 하면돼

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')),

]

 

갖다쓰는거니까 include 해줘

자 저렇게 하면 홈페이지주소/accounts/logout하면 저절로 로그아웃이 실행되는거야. 왜? 아까 패키지 설치했으므로

 

-------모델, admin 추가--------

4) login 앱 안의 models.py

class Blog(models.Model):

text = models.TextField()

간단하게 모델 하나 써주고

 

5) 마이그레이트

python manage.py makemigrations

python manage.py migrate

 

6) admin.py in login app

from .models import Blog

admin.site.register(Blog)

 

 

7) admin 계정 생성

python manage.py createsuperuser

-> name, email, pw 입력

 

그리고 서버켜면 /admin에 Blog 보일거임

소셜로그인도 보일거야 다 자동으로 생성된거임

 

-------모델, admin 추가--------

 

8) 기본 url 설정

 

클릭

 

example.com 클릭

 

 

이렇게 바꿔주고 save!

 

9) 이제 구글계정이랑 social accounts랑 연결해줘야겠지!

Social Applications 클릭

add social applications 클릭

 

client id와 key를 받아와야해 어디서?

https://console.developers.google.com

 

프로젝트를 하나 만드는거니까

 

 

 

프로젝트 이름 쓰고 만들기 클릭

 

사용자 인증 정보 클릭

 

 

 

 

 

OAuth 클릭

 

 

 

 

애플리케이션 이름 써주고 save

 

 

 

 

 

 

두번째 8000/ 아니고 8000

 

 

10) 다시 add social applications 로 돌아와서

id와 key 복붙해주기

 

save!

 

 

11) 이제 html상에 띄워주기만 하면 된다

home.html

{% load socialaccount %}

{% providers_media_js %} # 로그인 페이지의 템플릿 만들때? 사용하면 된대 이걸써야 provider에서 제공하는 템플릿 쓸수있다?

<h1> hi </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> # 여기에 facebook쓰면 facebook이 되는거 구분하기 위해 {% %} 안에 저렇게 쓴거

로그인 해야됨

{%endif%}

 

 

12) 이제 runserver

혹시 에러가 난다면?

빨간줄 부분 복사해서

 

리디렉션 url에 추가해주기

 

 

 

 

 

이제 구글로그인 잘된다!

 

 

*127.0.0.1:8000 을 입력하는 부분들에 실제 배포한 사이트 주소를 적으시면 됩니다.*