설치

Django-allauth 설치를 완료하고 http://127.0.0.1/accounts/login/ 를 접속하면 다음과 같은 화면을 볼 수 있다.

Django-allauth에서 제공하는 템플릿은 마음에 들지 않는다.
Django-allauth 공식문서를 참고하면 이것을 고치기 위한 방법으로 2가지 방법이 있다.

• 템플릿을 상속받아서 수정한다.
• 태그를 사용한다.

태그 사용

우선 필자가 만든 로그인 화면을 보자

이런식으로 직접 만든 로그인 화면에 소셜로그인 기능을 추가하고 싶다면 다음 내용을 추가하면 된다

templates\common\login.html

...
# 필수
{% load socialaccount %}
# provider에 따라 필요할 수 있음
{% providers_media_js %}

<a href="{% provider_login_url 'naver' %}">네이버로그인</a>
<a href="{% provider_login_url 'kakao' %}">카카오로그인</a>

필자가 만든 템플릿에 provider_login_url을 추가하면 다음과 같이 사용할 수 있다.

anchor를 클릭하면 네이버 아이디로 로그인을 사용할 수 있다!
카카오 로그인 버튼을 클릭하면 다음과 같은 화면을 볼 수 있다.

여기서 계속 버튼을 누르면 카카오 로그인을 할 수 있다.

여기까지 기초적인 소셜 로그인을 구현했다.
소셜계정으로 로그인 할 때 필요한 정보를 입력받으려면 키를 발급받은 kakao developers에서 설정해줘야한다.
정보를 입력받고 User Model에 적절하게 넘겨주기 위해서는 추가작업이 필요하다. 다음에 알아보도록 하자.

GET? POST?

위와 같이 소셜계정 로그인을 구현하게 되면 다음과 같이 진행하게 된다.
1. 로그인 화면 접속
2. 카카오 로그인 클릭
3. [계속] 버튼 누르기
4. 카카오 계정으로 로그인하기

3번 과정을 생략하는게 자연스러울 것 같다. 그렇다면 3번 페이지를 보자

이 화면에서 [계속] 버튼을 누르면 POST 요청을 하고 소셜 로그인 화면으로 넘어간다.
Django-allauth에서는 보안을 고려해서 POST 요청을 사용하도록 권장한다. 문서를 확인해보자.

config/settings.py 파일에 다음 내용을 추가해 주면 3번과정을 생략할 수 있다.

SOCIALACCOUNT_LOGIN_ON_GET = True

이렇게 설정하면 로그인화면에서 소셜계정 로그인을 클릭하고 바로 소셜계정 로그인 화면으로 넘어가게 된다!
Django-allauth는 POST 방식을 권장하는데, [계속] 버튼이 있는 Form을 살펴보면 csrf토큰으로 보안을 강화하는 것으로 보인다.
POST대신 GET을 사용했을 때 어떠한 문제가 생길수 있는지는 더 찾아봐야할 것 같다.

소셜로그인에 대한 철학

네이버 로그인 개발가이드
네이버 로그인 개발가이드를 보면 왜 소셜로그인 기능을 도입해야하는지, 어떤 이득이 있는지, 어떤 방식을 사용해야 하는지 자세히 나와있다.