このサイトは、只今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 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

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

OAuthのフローを可視化できるツールを作ってみました。

JavaScript

2020.05.17

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

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

JavaScript

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

JavaScript

2020.01.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US