django / 소셜 로그인 구현

이번에 django에서 소셜 로그인 구현을 해보도록 하겠습니다.

 

우선 pip install django-allauth를 설치해줍니다.

(업데이트가 필요하다고 하면 하시면 됩니다.)

 

그리고 setting.py에 다음을 추가합니다. 우선은 제일 많이 이용하는 구글 로그인만 구현해봅시다.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.sites', #추가
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'siteapp.apps.SiteappConfig',
    'accounts.apps.AccountsConfig',

    #allauth #추가
    'allauth',
    'allauth.account',
    'allauth.socialaccount',

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

마지막 부분의 provider에 google을 추가함으로써 구글 소셜 로그인을 진행할 것이란걸 알 수 있습니다. 저 부분에 페이스북, 네이버 등을 추가하시면 각 서비스의 소셜 로그인을 진행할 수 있습니다.

 

그리고 가장 마지막에 다음을 추가합니다.

AUTHENTICATION_BACKENDS = (
    # 'allauth' specific authentication methods, such as login by e-mail
    'allauth.account.auth_backends.AuthenticationBackend',

    #Needed to login by username in Django admin, regardless of 'allauth'
    'django.contrib.auth.backends.ModelBackend',
    
)

SITE_ID = 1
LOGIN_REDIRECT_URL = '/'

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

이제 admin 페이지로 가면 social accounts라는 것이 생겼음을 알 수 있습니다.

그리고 site에 들어가 기본 default url을 입력해줍니다.

그리고 social application에 들어가 google로 설정한 뒤 아래 사이트에 들어가 id와 key를 받아와봅시다.

console.developers.google.com/apis/dashboard?project=just-charger-300009&pli=1

Google Cloud Platform

그리고 프로젝트를 새로 만든 뒤 사용자 인증 정보를 등록하면 끝입니다!

사용자 인증 정보 시에 처음 등록하면 OAuth를 동의해라고 하는데 적절하게 써준 뒤 넘어가면 됩니다.

 

사용자 인증정보를 등록하면 다음과 같습니다.

여기 나온 id와 비밀번호를 admin의 social application에 등록하면 됩니다. 그리고 마지막으로 choosen site에 url을 옮겨주면 끝입니다! 

이제 템플릿을 만들어봅시다.

 

만들기를 원하는 app을 만들고 html에 다음과 같이 적으면 됩니다. 저는 app 이름을 accounts 라 하였습니다.

{% load socialaccount %}
{% providers_media_js %}
{% if user.is_authenticated %}
	<a href="/accounts/logout">로그아웃</a><br>
{% else %}
	<a href="{% provider_login_url 'google' %}">구글 로그인</a><br>

allauth에서 로그아웃 기능까지 자동으로 제공하기에 위와 같이 하시면 로그인, 로그아웃 기능을 사용할 수 있습니다.

 

로그인을 하면 다음과 같습니다.

 

현재 만들고 있는 토이프로젝트에 덮어서 만든거라 템플릿에 대한 설명은 거의 없었습니다.

 

(다른 모델이랑 연결시켜야할 게 있는데 소셜로그인으로 하면 연결이 안 되서 이걸 해결해야한다.)

=> 해당 부분은 queryset에 대한 정확한 이해와 라이브러리를 가져다 쓰면 기존 auth.User와 섞이는 문제 때문에 로그인과 동시에 되도록 구현은 하지마라고 민성님이 그러셨다. 민성님이 그러시면 그런거다. 그래서 if문과 예외처리를 섞어 home에서 판단하도록 구현하였다. 

기존에 회원가입을 하면 Profile이라는 모델에 연결되도록 만들었다. 소셜로그인을 하면 연결이 자동으로 되지 않는다. 

(Profile.objects.create( ) 부분을 처리하려면 html의 form에서 action을 보내도록 만들었는데 이게 소셜로그인이면 어떻게 처리해야할지 아직은 모르겠다. 나름대로 해보려했지만 에러만 나서 우선 이렇게 하도록 했다. home에서 처리하는 이유는 소셜로그인을 하면 home으로 가도록 settings.py에서 설정해놓았기 때문이다.)

def home(request):
  #생략
  if request.user.is_authenticated:
    user = User.objects.get(id=request.user.id)
    try:
      profile = Profile.objects.get(user_id=user.id)
    except:
      Profile.objects.create(user=user)
  #생략