[소셜로그인] Google 소셜로그인 구현하기

패키지 설치

allauth 패키지 설치

pip install django-allauth

config/settings.py 수정

INSTALLED_APPS = [
    'common.apps.CommonConfig',
    'pybo.apps.PyboConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.sites',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # allauth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',

    # provider
    'allauth.socialaccount.providers.google',
]

• allauth, provider관련 추가

MIDDLEWARE = [
    'allauth.account.middleware.AccountMiddleware',

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

• 상단에 있는것 추가

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

SITE_ID = 1

# 로그인 시 페이지 이동(default: accounts/profile)
LOGIN_REDIRECT_URL = '/'

congig/urls.py 수정

아까 pip로 allauth 패키지를 설치하였으니 우리 장고 내에는 allauth이 어디엔가 설치되어있음. 우린 이것을 사용해주기만 하면 됨. (url 패턴에서 사용)

urlpatterns = [
    # path('', views.index, name='index'),
    path('', views.index2, name='index'),

    path('admin/', admin.site.urls),
    path('accounts/', include('allauth.urls')),     # 추가되는 부분

    path('common/', include('common.urls')),
    path('pybo/', include('pybo.urls')),
]

• allauth에서 사용하는 url을 받아올 수 있게 됨

settings.py의 변경사항을 migration 해줌

서버를 실행하고 admin페이지에 들어가면 social accounts, sites 등이 추가된 것을 확인할 수 있음.

장고 admin에서 Google 소셜로그인 설정하기

Sites

domain name에 하나의 항목(example.com)이 있는데 이를 클릭

domain name, display name을 127.0.0.1:8000로 수정

Social Accounts

Social application 클릭 add social application

• provider -> google 선택
• name -> provider name를 의미하는거 같음. google로 함
• client id -> Google Developers에서 받아옴(아래 설명)
• secret key -> Google Developers에서 받아옴(아래 설명)
• key -> 건들지 않음
• sites -> 127.0.0.1:8000 선택

Google Developers에서 client id, secret key 받아오기

새 프로젝트 생성

API 및 서비스 > 사용자 인증 정보 동의 화면 구성 -> 외부

OAuth 동의 화면 어플리케이션 이름, 이메일만 수정하고 저장

사용자 인증 정보

• 사용자 인증 정보 만들기 -> OAuth 클라이언트 ID 만들기
• 애플리케이션 유형 선택(웹 애플리케이션)
• 이름 설정
• URL 추가 -> http://127.0.0.1:8000
• 승인된 리디액션 URI -> http://127.0.0.1:8000

만들기를 누르면 OAuth 클라이언트 생성이 완료됨 클라이언트 ID(client id), 클라이언트 보안 비빌번호(secret key) 사용

로그인 화면 구현(html)

{퍼센트 load socialaccount 퍼센트}
{퍼센트 providers_media_js 퍼센트}

<h1>소셜 로그인 테스트</h1>
<a href="/accounts/signup">회원가입</a><br>

{퍼센트 if user.is_authenticated 퍼센트}
    <a href="accounts/logout">로그아웃</a><br>
     님이 로그인 중
{퍼센트 else 퍼센트}
    <a href="{퍼센트 provider_login_url 'google' 퍼센트}">구글 로그인</a><br>
    로그인 하세요
{퍼센트 endif 퍼센트}

• 퍼센트 기호가 업로드 안됨에 따라 ‘퍼센트’ 로 대체

로그인 과정에서의 오류 해결

400 오류: redirect_uri_mismach

개발자 오류 수정 눌러서 하단에 떠 있는 url을 Google Developers에서 승인된 리디액션 URI에 추가해줌(‘/’까지 해 주어야 함)

---

참고 강의

Youthbe: Django 응용 - 소셜 로그인 구현