Ahogrammer

Deep Dive Into NLP, ML and Cloud

Django Rest Frameworkでソーシャル認証

Djangoには、組み込みのユーザ認証の仕組みがありますが、GitHubTwitterFacebookなどのサービスを介したソーシャル認証はサポートされていません。しかし、幸いなことに、サードパーティー製のパッケージを使って簡単に実装することができます。

本記事では、django-allauthを使ってTwitterアカウントによるログインを行う方法について説明します。Twitterでのログイン方法について説明しますが、FacebookGoogleGitHubアカウントに対してもほぼ同様の実装を使ってログインすることができます。

準備

まずは環境構築を行いましょう。ここでは、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です。

f:id:Hironsan:20190423080236p:plain
DjangoのWelcomeページ

プロジェクトの設定

必要なパッケージをインストールできたので、プロジェクトの設定を行います。まずは、settings.pyINSTALLED_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はすでにallauthrest_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/にアクセスすると以下の画面が表示されます。

f:id:Hironsan:20190423083113p:plain
http://127.0.0.1:8000/rest-auth/twitter/

Twitter OAuthキーの取得

Twitter OAuth用のキーを取得するために以下のページへ移動します。

f:id:Hironsan:20190423083558p:plain
Developer Apps

移動したら、アプリケーションを作成します。そうすると、Consumer KeyとAccess Tokenが得られます。これらのトークンは外に漏れると悪用される可能性があるので、その扱いには十分に気をつけてください。

f:id:Hironsan:20190423093744p:plain

トークンの設定

取得したトークンはDjangoのadminページから設定する必要があります。そのために、以下のコマンドを使ってDjangoのsuperuserを作成します。

$ python manage.py createsuperuser

作成したら、作成したアカウントを使ってhttp://127.0.0.1:8000/adminにログインします。そうすると、以下の画面に遷移します。

f:id:Hironsan:20190423095820p:plain
Adminページ

Adminページにログインしたら、「Site」を選択してドメイン名を変更します。今回はテストなので127.0.0.1にしておきます。

f:id:Hironsan:20190423100022p:plain

次に、取得したトークンを設定するため、adminページから「Social Applications」を選択します。ここでOAuthの設定を行うことができます。今回はProviderとしてTwitterを選択し、Client IDとSecret keyに取得したConsumer keyとConsumer Secretを入力します。最後に、サイトを追加して保存します。

f:id:Hironsan:20190423100325p:plain
Social Applications

以上でadminページでの設定は完了です。

ためしにログインしてみましょう。http://127.0.0.1:8001/rest-auth/twitter/へ移動すると以下の画面が表示されます。ここに取得したTwitterAccess TokenとAccess Token Secretを入力してPOSTします。

f:id:Hironsan:20190423100702p:plain

以下のようにkeyが含まれたJSONを取得できれば認証に成功しています。

HTTP 200 OK
Allow: POST, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "key": "335a0kmcrypv56h3xgf7jabit8l2oewnqz4du91s"
}

参考資料