Yellow donkey: [django] django-allauth 를 사용하기

핵심흐름
0. 소셜로그인의 배경 이해
1. 필요한 lib설치 setting.py / urls.py / migrate 해주기
2. 소셜 어플리케이션 만들기 (예, 구글 구글 소셜로그인)
3. admin 페이지에서 소셜로그인에 필요한 정보 저장
4. 테스트 로그인 페이지를 만든다 (http://whatisthenext.tistory.com/129 에 있는것이 간단하여 그것을 이용 - 약간변형)
5. allauth의 template 변경
6. email confirmation을 위한 setting.py 설정
7. UserModel의 확장

관련 페이지

0. 소셜로그인 및 allauth의 배경 이해

소셜로그인은 facebook, 구글 아이디 등으로 내사이트의 접근을 가능하게 하는것이다.

내사이트 입장에서는 1) 소셜 로그인으로 접근하는 사용자와 그냥 2) 내사이트에 가입하는 사용자로 구분이 되게 되는데, 기존에 django에서 디폴트로 제공하는 login 기능 (login/logout/회원가입 등등) 을 제공하는것처럼 allauth를 사용하면 위의 두개를 동시에 지원 하게 된다. 물론 2)은 기존의 django의 디폴트 login 기능을 내부적으로 이용한다고 생각 하면 된다.

소셜 로그인을 할때, 기본적으로 내사이트에서 관리 하는 아이디와 소셜 로그인 성공후에 내사이트에서 아이디를 하나 만들어 성공한 소셜 로그인 아이디와 연결해 놓는 구성을 한다. 이때 소셜로그인이후의 내사이트에서 관리 하는 아이디는 자동으로 만들어 지게 할수도 있고, 아니면 소셜 로그인 직후에 내사이트에서 관리 할 아이디를 직접 지정 할수도 있다.

allauth를 사용하면 위 모든 것을 간단히 해결 할수 있고, 관리가 쉬워진다.

1. 필요한 lib설치 setting.py / urls.py / migrate 해주기

위 관련 페이지를 참고 해서 위 setting.py 파일을 설정하고, urls.py 설정한다.

setting.py

INSTALLED_APPS

TEMPLATES

AUTHENTICATION_BACKENDS

# 등록하지 않으면,각 요청 시에 host명의 Site 인스턴스를 찾습니다.

SITE_ID =1

# 이메일 확인을 하지 않음.

SOCIALACCOUNT_EMAIL_VERIFICATION = 'none'

LOGIN_REDIRECT_URL = "/"

ACCOUNT_LOGOUT_REDIRECT_URL = "/"

urls.py

url(r'^accounts/', include('allauth.urls')), include 시에는 url pattern 끝에 $를 붙이면 안됨/ 기존에 django 디폴트 로그인의 accounts가 위처럼 대체 된다.

이렇게 하고 migrate를 반드시 해줘야 한다. migrate를 하게 되면 소셜 관련된

소셜계정

소셜어플리케이션 등에 대한 table 이 추가 된다.

만약 소셜 로그인에 성공하면, 성공한 계정을 내사이트 기준으로 계정을 하나 만들어서 연결 하게 되는데, 그 정보가 소셜 계정 테이블에 저장되고 동시에 django 디폴트 login 테이블에도 저장 된다. sns 연결을 위한 소셜 어플리케이션의 정보는 소셜 어플리케이션 table에 추가 된다.

2. 소셜 어플리케이션 만들기 (예, 구글 구글 소셜로그인)

https://console.developers.google.com

로 가서 소셜 어플리케이션을 만든다.

소셜 어플리케이션을 만들면 중요한것은 key와 secret 두가지 값이 생긴다.

그리고 중요한것은 승인후에 리다이렉션 될 URL을 정해 주는것이다.

“승인된 리디렉션 URI” 에 다음과 같이 http://localhost:8000/accounts/google/login/callback/

만약 127.0.0.1 로 test서버를 운영 중이면 이참에 localhost로 allow_host를 setting 파일에 설정 해준다. (localhost를 제안하는 이유는 facebook은 127.0.0.1으로 소셜 로그인 테스트가 동작 하지 않기 때문에)

3. admin 페이지에서 소셜로그인에 필요한 정보 저장

django admin에 들어가서 소셜 어플리케이션 버튼을 눌러 key, secret 등의 정보를 입력 해준다.

site는 접속을 시도 하는 site 이므로 127.0.0.1 과 localhost 를 입력 해준다. example.com이 default이므로 총 3개가 된다.

4. 테스트 로그인 페이지를 만든다

http://whatisthenext.tistory.com/129 을 참고.

login_test.html

{% load socialaccount %}

<body>

<h1>hello world</h1>

{% if user.is_authenticated %}

    <span>{{ user }}님이 로그인중입니다.</span>

    {% for account in user.socialaccount_set.all %}

        {% comment %} show avatar from url {% endcomment %}

        <h2 style="text-transform:capitalize;">{{ account.provider }} account data</h2>

        <p><img width="50" height="50" src="{{ account.get_avatar_url }}"/></p>

        <p>UID: <a href="{{ account.extra_data.link }}">{{ account.uid }}</a></p>

        <p>Username: {{ account.extra_data.name }}</p>

        <p>First Name: {{ account.extra_data.given_name }}</p>

        <p>Last Name: {{ account.extra_data.family_name }}</p>

        <p>Dashboard Link:

            <a href="{{ account.extra_data.link }}">{{ account.extra_data.link }}</a></p>

    {% empty %}

        <p>you haven't any social account please</p>

    {% endfor %}

{% endif %}

<h2><a href="/accounts/login">로그인</a></h2>

<h2><a href="{% provider_login_url 'facebook' method='oauth2' %}">페이스북 로그인</a></h2>

<h2><a href="{% provider_login_url 'google' method='oauth2' %}">구글 로그인</a></h2>

<h2><a href="{% provider_login_url 'naver' method='oauth2' %}">네이버 로그인</a></h2>

<h2><a href="{% provider_login_url 'kakao' method='oauth2' %}">카카오 로그인</a></h2>

<h2><a href="/accounts/logout">로그아웃</a></h2>

<h2><a href="/accounts/signup">회원가입</a></h2>

</body>

Colored by Color Scripter
cs

5. allauth의 template 변경

4번까지 하면, 기본적인 소셜 로그인 기능들이 다 되게 된다. 그런데 여기서 이용하였던 테스트 페이지(login_test.html)는 이것은 기본적인 확인 용이고, 실제 accounts/login accounts/logout 등을 하면 만들지도 않았던 templates, view등 바탕으로 기능이 동작 한다. 특히 accounts/login의 경우 일반 계정 로그인과 소셜계정 로그인을 동시에 가능하도록 화면을 보여준다. 기능은 환상적이다.

기능적으로는 환상적이지만, 화면이 영 별로 므로 accounts/login등의 화면을 바꾸고 싶은 생각이 들것이다.

이유는 allauth의 기본 view와 기본 template를 사용하기 때문에, 이 template를 고치려면 기본 아이디어는 기본 template에 같은 이름으로 필요한 template 파일(html)을 구성해 놓으면 allauth의 template를 읽어서 사용 하기 전에 내가 구성해 놓은 template를 사용 한다는 것이다. 일종의 template 파일 override 이를 위해서,

setting.py를 설정 하고,

TEMPLATES = [

    {

        'BACKEND': 'django.template.backends.django.DjangoTemplates',

        'DIRS': [ os.path.join(BASE_DIR, 'templates') , os.path.join(BASE_DIR, 'templates', 'allauth')],  # 추가

        'APP_DIRS': True,

Colored by Color Scripter
cs

BASE_DIR에

templates/allauth를 경로를 만들고,

/Python/Python37/Lib/site-packages/allauth/templates 에 있는 필요 파일들을 위 경로로 복사한다. 그럼 setting.py 에 설정해 놓은 os.path.join(BASE_DIR, 'templates', 'allauth')

로 인해 template 파일의 변경을 할수 있다.

참고,

6. email confirmation을 위한 setting.py 설정

allauth를 사용 하면 일반 계정 가입을 하는 경우는 가입자가 정상적인 가입자인지 확인하기 위해 email confirmation을 하고, 또한 소셜 로그인을 처음 하는 경우는 내사이트 기준의 계정이 필요 하게 되는데 기본은 자동생성이고, 아래와 같이 옵션을 정해주면 처음 방문자는 일종의 내사이트용 회원 가입처럼 가입 계정을 입력 하게 하고, 소셜로그인을 할때 입력 된 계정으로 사용자를 관리하게 된다. 안그러면 자동으로 아이디를 만들어서 알아서 입력 한다.

setting.py

ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_EMAIL_VERIFICATION = 'mandatory'
ACCOUNT_LOGIN_ATTEMPTS_LIMIT = 5
ACCOUNT_LOGIN_ATTEMPTS_TIMEOUT = 300

SOCIALACCOUNT_AUTO_SIGNUP = False

7. UserModel의 확장
소셜로그인에서 회원 가입시 정보가 부족 하다 싶으면 User 모델의 확장을 할수 있는데 아래의 사이트를 참고 하여 UserModel을 확장하게 되면 사용자의 추가 정보를 받아 들여 사이트를 운영 할수 있다.

https://wikidocs.net/6651
https://simpleisbetterthancomplex.com/tutorial/2016/07/22/how-to-extend-django-user-model.html

2018년 12월 31일 월요일

[django] django-allauth 를 사용하기

댓글 없음:

댓글 쓰기