Djangoには、組み込みのユーザ認証の仕組みがありますが、GitHubやTwitter、Facebookなどのサービスを介したソーシャル認証はサポートされていません。しかし、幸いなことに、サードパーティー製のパッケージを使って簡単に実装することができます。
本記事では、django-allauthを使ってTwitterアカウントによるログインを行う方法について説明します。Twitterでのログイン方法について説明しますが、FacebookやGoogle、GitHubアカウントに対してもほぼ同様の実装を使ってログインすることができます。
準備
まずは環境構築を行いましょう。ここでは、pipenv
を使って必要なパッケージをインストールし、Djangoのプロジェクトとアプリケーションを作成します。
$ mkdir django-social-auth && cd django-social-auth $ pipenv install django djangorestframework django-allauth django-rest-auth $ pipenv shell (django-social-auth) $ django-admin startproject auth . (django-social-auth) $ python manage.py startapp src
パッケージとしては、以下の4つをインストールしました。
インストールできたら、開発サーバを起動してhttp://127.0.0.1:8000/を開きます。
(django-social-auth) $ python manage.py migrate (django-social-auth) $ python manage.py runserver
以下の画面が確認できたらOKです。
プロジェクトの設定
必要なパッケージをインストールできたので、プロジェクトの設定を行います。まずは、settings.py
のINSTALLED_APPS
にアプリケーションを追加します。以下のように設定しています。
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', # new 'rest_framework.authtoken', # new 'rest_auth', # new 'django.contrib.sites', # new 'allauth', # new 'allauth.account', # new 'allauth.socialaccount', # new 'allauth.socialaccount.providers.twitter', # new ] SITE_ID = 1
アプリケーションを追加したらマイグレーションをしておきます。
$ python manage.py migrate
ビューの作成
アプリケーションを作成したら、ビューを作成します。ソーシャル認証用のビューやTwitter用のSerializerはすでにallauth
やrest_auth
に用意されているのでそれらを使って以下のように書きます。
from allauth.socialaccount.providers.twitter.views import TwitterOAuthAdapter from rest_auth.registration.views import SocialLoginView from rest_auth.social_serializers import TwitterLoginSerializer class TwitterLogin(SocialLoginView): serializer_class = TwitterLoginSerializer adapter_class = TwitterOAuthAdapter
ビューを書いたらURLに紐づけて登録しておきましょう。settings.py
に以下のように書いておきます。
from django.contrib import admin from django.urls import path from src.views import TwitterLogin urlpatterns = [ path('admin/', admin.site.urls), path('rest-auth/twitter/', TwitterLogin.as_view(), name='twitter_login') ]
この時点で、http://127.0.0.1:8000/rest-auth/twitter/にアクセスすると以下の画面が表示されます。
Twitter OAuthキーの取得
Twitter OAuth用のキーを取得するために以下のページへ移動します。
移動したら、アプリケーションを作成します。そうすると、Consumer KeyとAccess Tokenが得られます。これらのトークンは外に漏れると悪用される可能性があるので、その扱いには十分に気をつけてください。
トークンの設定
取得したトークンはDjangoのadminページから設定する必要があります。そのために、以下のコマンドを使ってDjangoのsuperuserを作成します。
$ python manage.py createsuperuser
作成したら、作成したアカウントを使ってhttp://127.0.0.1:8000/adminにログインします。そうすると、以下の画面に遷移します。
Adminページにログインしたら、「Site」を選択してドメイン名を変更します。今回はテストなので127.0.0.1
にしておきます。
次に、取得したトークンを設定するため、adminページから「Social Applications」を選択します。ここでOAuthの設定を行うことができます。今回はProviderとしてTwitterを選択し、Client IDとSecret keyに取得したConsumer keyとConsumer Secretを入力します。最後に、サイトを追加して保存します。
以上でadminページでの設定は完了です。
ためしにログインしてみましょう。http://127.0.0.1:8001/rest-auth/twitter/へ移動すると以下の画面が表示されます。ここに取得したTwitterのAccess TokenとAccess Token Secretを入力してPOSTします。
以下のようにkeyが含まれたJSONを取得できれば認証に成功しています。
HTTP 200 OK Allow: POST, OPTIONS Content-Type: application/json Vary: Accept { "key": "335a0kmcrypv56h3xgf7jabit8l2oewnqz4du91s" }