Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

この記事は最終更新日から1年以上が経過しています。

どもです。

久々に、Djangoを触りだすと、「あれ、これどうだったけ？」が発生しちゃったので、

すこしまとめておこうかなと思いました。

という事で、今回は、django-allauth用いたソーシャルログイン機能を実装。

今回は、DRF（Django REST Framework）ではなく、通常のモノリシックな構造となります。

DRFに関しては、次回にでも記述できればなと。

バージョン

django 2.2.10
python 3.7

2020 4月12日現在、通常インストールを行ってしまうと Djangoのバージョン3がインストールされてしまい、

admin側でエラーが発生するという事態が起こりましたので、LTSバージョンである、バージョン2.2.10をインストールしています。

ソースだけ見たい方は、こちらから

GitHub

https://github.com/webcyou-org/django-allauth-sample

環境作成

まずは、ディレクトリ作成

$ mkdir django-auth-test && cd django-auth-test

pipenv用いて、パッケージのインストールを行います。

$ pipenv install django==2.2.10 django-allauth
$ pipenv shell

アプリケーションと分別できるように、分かりやすいプロジェクト構成にするため、「config」という名前でstartprojectコマンドでモジュール作成します。

startappでは「accounts」の名前のモジュール作成します。

(django-auth-test) $ django-admin startproject config .
(django-auth-test) $ python manage.py startapp accounts

django-allauthの特徴

django-allauthは非常に便利で、以下の機能が用意されていますので、苦労することなく認証認可周りを実装することができます。

ログイン
ログアウト
パスワード変更
パスワード再設定
ユーザー登録
ユーザー登録時にメールを送信して登録確認
メールアドレスとパスワードでログイン
ログイン失敗回数制限
ソーシャル連携認証
テンプレート用意

django-allauthドキュメント

https://django-allauth.readthedocs.io/en/latest/installation.html

対応しているソーシャルログイン

https://django-allauth.readthedocs.io/en/latest/providers.html

allauth追加

「config/settings.py」を修正していきます。

まずは、django-allauthパッケージの追加を行っていきます。

config/settings.py

'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.github',
'allauth.socialaccount.providers.twitter',
'allauth.socialaccount.providers.google',

「allauth.socialaccount.providers.〇〇〇〇」は、利用したいprovider毎に追加する必要があります。

今回は「GitHub、Twitter、Google」の3つを行っていきます。（Facebookは申請が面倒くさそうだったので。。）

TEMPLATESの箇所には、以下を追加

'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

AUTHENTICATION_BACKENDSは、

「’django.contrib.auth.backends.ModelBackend’」

「’allauth.account.auth_backends.AuthenticationBackend’」

を追加。

管理画面はユーザー名/パスワードで認証することが可能となります。

AUTHENTICATION_BACKENDS = (
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',  # django-allauth を追加
)

# 1: 認証⽅式を「メールアドレスとパスワード」に変更しユーザー名は使⽤しない設定にします。
# 2: django-allauthに必要記述
# 3: ログイン、リダイレクトURLの設定
# 4: ログアウトリンクの設定
# 5: ユーザー登録時にメールアドレス確認。ユーザー登録画面でにEmailを必須項目

# 1
ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_USERNAME_REQUIRED = False

# 2
SITE_ID = 1

# 3
LOGIN_REDIRECT_URL = 'home'
ACCOUNT_LOGOUT_REDIRECT_URL = '/accounts/login/'

# 4
ACCOUNT_LOGOUT_ON_GET = True

# 5
ACCOUNT_EMAIL_VARIFICATION = 'mandatory'
ACCOUNT_EMAIL_REQUIRED = True

メールアドレス確認の為、メール配信を行うのですが、設定が手間なのでとりあえず開発中はコンソールに表示させる設定にしておきます。

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

templates作成

「templates/home.html」のhtmlファイルを作成。

ログイン、ログアウトなどが行えるページを用意します。

{% extends "base.html" %}

{% block title %}ホーム{% endblock %}

{% block content %}
<h2>ホーム</h2>
{% if user.is_authenticated %}
ようこそ {{ user.get_username }} さん
<p><a href="{% url 'account_logout' %}">ログアウト</a></p>
{% else %}
<p><a href="{% url 'account_login' %}">ログイン</a></p>
{% endif %}
{% endblock %}

データベースの設定

(django-auth-test)$ python manage.py migrate

問題がなければ、テーブルが作成されます。

管理者ユーザー作成

管理画面を利用できる管理者ユーザー (スーパーユーザー) を作成します。

管理コマンドは次の通りです。

(django-auth-test) $ python manage.py createsuperuser

(django-auth-test)$ python manage.py createsuperuser
Username (leave blank to use 'user1'): admin
Email address: admin@webcyou.com
Password: # パスワードを入力
Password (again): 
This password is too common. # パスワードが単純過ぎる場合はエラー発生
Password: 
Password (again): 
Superuser created successfully.

ここまで、完了したらソーシャル連携認証を行うため、各サービスでのOAuth アプリケーションを登録していきます。

GitHub、Twitter、Googleの設定

今回は「GitHub、Twitter、Google」でログインを行いますので、それぞれのサービスにて OAuth アプリケーションを登録していきます。

github

Settings > Developer settings

https://github.com/settings/developers

「New OAuth App」ボタン押下。

Application name: 任意

Homepage URL: 任意

Authorization callback URL: http://localhost:8000/accounts/github/login/callback/

入力し、保存。

「Client ID」と「Client Secret」が発行されますので、こちらを後ほど利用していきます。

google

Google Cloud Platform

https://console.developers.google.com/apis

上記のリンクより登録していきます。

Google Cloud Platformに登録し、プロジェクトの作成を行います。

左上の「プロジェクトの選択」を押下、モーダルが表示するので右上の「新しいプロジェクト」を押下。

「新しいプロジェクト」画面が表示しますので、「プロジェクト名」に任意の名前を入力。

プロジェクト名を入力したら「作成」ボタン押下。

メニュー「認証情報」を押下、「認証情報を作成」を押下。

「OAuth クライアントID」を選択。

ウェブアプリケーションを選択。

承認済みのリダイレクト URIに、「http://localhost:8000/accounts/google/login/callback/」を入力し作成します。

「クライアントID」「クライアントシークレット」が生成されますので、後ほど利用します。

twitter

twitter developer

https://developer.twitter.com/en/apps

ここでアプリ、サイトの登録を行います。「Create an App」ボタンを選択し登録します。

twitterのAPI登録に関しては、少々長くなりますので割愛させていただきます。

（いつかまとめます）

作成したアプリ＞ Key and tokens

に、「API key」「API secret key」が表示されますので、こちらを後ほど利用します。

TwitterAPIで気をつけないと行けない点は、初期ではメールアドレスを取得できず、別途申請が必要となってきます。

（こちらもどこかでまとめられればと。）

と、各サービスの「API key」「API secret key」が取得できましたので、Djangoアプリの方に設定していきます。

callbackURLはそれぞれ以下のパターンとなります。

http://localhost:8000/accounts/{provider名}/login/callback/

開発サーバーを起動

それでは、起動して設定していきます。

(django-auth-test)$ python manage.py runserver 0.0.0.0:8000

「http://localhost:8000/admin/」にアクセスし、上記で作成したスーパーユーザーでログインを行います。

「Social applications」を押下し、右上の「SOCIAL APPLICATIONを追加」ボタンを押下。

プロバイダーに、「config/settings.py」で追加したproviderが選択できるようになっています。

設定したproviderを選択し、上記で発行した「Client id」「Secret key」を入力します。

sitesも選択しておきます。

これで一通り完了しましたので、登録、ログインをしていきます。

登録テスト

http://localhost:8000/accounts/login/

にアクセスし、すると登録したproviderが表示していますのでクリックします。

各サービスに非ログイン時は以下のようにID、パスワード入力画面が表示しますので、入力し登録します。

（画像はGitHubの例）

登録、ログイン成功。

Twitterに関しては、メールアドレス取得の申請をしていないとメールアドレス入力項目が表示します。

また、同じメールアドレスで登録している場合も同じ結果となります。

メールアドレス認証

ソーシャル連携での登録以外にも、メールアドレスとパスワードでの登録も可能となっております。

「config/settings.py」に、

EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

を追加したことによって、コンソールにメール内容が表示します。

実際に登録してみましょう。

メールアドレスとパスワード、パスワード確認を入力して登録するとコンソールに送信されるメール内容が表示します。

Content-Type: text/plain; charset="utf-8"
MIME-Version: 1.0
Content-Transfer-Encoding: 7bit
Subject: [example.com] Please Confirm Your E-mail Address
From: webmaster@localhost
To: 宛先
Date: Sun, 12 Apr 2020 00:35:53 -0000
Message-ID: メッセージID

Hello from example.com!

You're receiving this e-mail because user d.takayama.web has given yours as an e-mail address to connect their account.

To confirm this is correct, go to http://localhost:8000/accounts/confirm-email/<hashID>/

Thank you from example.com!
example.com

「http://localhost:8000/accounts/confirm-email//」にアクセスすると、メールアドレスの確認が取れ、アカウントがアクティベート「is_active: true」されます。

と言った感じで、Django django-allauthで、ソーシャルログイン機能実装方法でした。

次回は、Django REST Frameworkでもやっていきたいと思います。

ではではぁ。

このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

Archives Details