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

Archives Details

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

Python

2020.04.12

どもです。

久々に、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でもやっていきたいと思います。

ではではぁ。

Comment

Related Article

Django (DRF)で、ユーザーのモデルを作成時にハッシュidを別で保存する。

2020.09.10

macOS pyenv環境でtkinterが動かないので、再度インストール

2020.08.09

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その3

2020.06.14

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その2

2020.06.08

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その1

2020.06.07

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

2020.04.12

PythonでGUIアプリ開発「PyQt」を使った感想

2019.07.18

CATEGORY LIST

LATEST NEWS

Go言語でAssetsもシングルバイナリ化に便利な packr パッケージ

go

2020.11.25

Maker Faire Tokyo 2020に行ってきました。

イベント

2020.10.06

パックマン 解析プログラム動画から見る 追跡アルゴリズム

AI・Bot・algorithm

2020.09.23

Django (DRF)で、ユーザーのモデルを作成時にハッシュidを別で保存する。

Python

2020.09.10

ゲオのサマーセール 980円以下のゲームソフトが半額!8月16日(日)まで。で購入したもの。

Game

2020.08.13

Webassembly用いて、SDL 2.0をブラウザでレンダリング

C++

2020.08.10

macOS pyenv環境でtkinterが動かないので、再度インストール

Python

2020.08.09

Mac Home brewでSDL2.0を簡単に環境設定

C

2020.06.24

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その3

Python

2020.06.14

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その2

Python

2020.06.08

Django django-rest-auth + Nuxt.js auth-module で作る SPA JWT OAuth ログインシステム その1

Python

2020.06.07

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US