sekine

2013.04.15

django-allauthを利用してソーシャルログイン機能を実装する

はじめに

こんにちは。開発本部の関根と申します。
早いもので入社してもうすぐ半年が過ぎようとしています。
今回も前回に引き続きPython関連のご紹介をさせて頂きます。

少し前の話になりますが、日本を含めた世界7箇所Django Sprintが開催されました。
私も参加させて頂き、django-allauthに関する調査および実装を行いましたので、
今回はその内容をご紹介させて頂きたいと思います。
(個人ブログでもご紹介させて頂きましたが、django-allauthはとてもすばらしいプロダクトなので、改めてご紹介させて頂きます。)

django-allauthとは?

django-allauthを利用するとDjangoのアプリケーション上からFacebook、twitter、GitHubなどの
サードパーティ製の認証システムを利用してログインすることが可能になります。

https://github.com/pennersr/django-allauth

現在対応しているメディアは下記の通りです。

* Facebook (both OAuth2 and JS SDK)
* Github
* Google (OAuth2)
* LinkedIn
* OpenId
* Persona
* SoundCloud (OAuth2)
* Stack Exchange (OAuth2)
* Twitter
* Weibo (OAuth2)

上記のソーシャルメディア以外でもログイン処理を実装したクラスを追加して拡張が可能です。
またとても高機能で、下記のような機能に対応しています。

* Signup of both local and social accounts (ローカルアカウント、シャールアカウント両方に対応)
* Connecting more than one social account to a local account
(ローカルアカウントに1つ以上のソーシャルアカウントを紐づける。)
* Disconnecting a social account — requires setting a password if only the local account remains
( ソーシャルアカウントとの紐付けの解除)
* Optional instant-signup for social accounts — no questions asked
* E-mail address management (multiple e-mail addresses, setting a primary) (メールアドレスの管理)
* Password forgotten flow(パスワードを忘れた場合の確認機能)
* E-mail address verification flow(メールアドレスの確認機能)

今回はDjanogのプロジェクトを作成し、各ソーシャルメディアでログイン処理が出来るまでを試してみました。

仮想環境の構築

まずはプロジェクト用の仮想環境を構築します。

必要なモジュールのインストール

djangoとdjango-allauthをインストールします。

Djangoのプロジェクトの作成

Djangoのプロジェクトを作成します。

/etc/hostsの変更
ログイン認証時のコールバック用に、/etc/hostsに下記の記述を追加します。

テスト起動
manage.pyを叩いて動作を確認します。
下記のURLをブラウザで開いて正常に表示されていればOKです。
http://local-test.com:8000/

Djangoに関する基本的な設定の追加、編集

下記の記述を参考にsettings.pyを変更します。

BASE_DIRの設定
settings.pyの上部に記述を追加します。

DBに関する記述を変更
今回はsqlite3を使用するので、下記のように修正します。

タイムゾーンの変更

言語コードの変更

TEMPLATE_DIRSの設定
今回はテンプレートファイルを/templates/配下に設置するので、その設定を追加します。

django-allauthに関する設定の追加、編集

django-allauthのドキュメントを参考に、
各種動作に必要なsetteings.pyの変更をします。
* https://github.com/pennersr/django-allauth#welcome-to-django-allauth

TEMPLATE_CONTEXT_PROCESSORSの変更
TEMPLATE_CONTEXT_PROCESSORSの内容を設定します。

INSTALLED_APPSの変更
INSTALLED_APPSの設定を変更します。
管理画面用のadmin、allauthの動作に必要なアプリケーション、
各種ログインに利用するソーシャルメディアのアプリケーションを有効にします。

AUTHENTICATION_BACKENDSの設定
allauthの認証システムを利用するので、記述を追加します。

SOCIALACCOUNT_PROVIDERSの設定
各ソーシャルメディア用の具体的な設定(スコープ等)は、
SOCIALACCOUNT_PROVIDERSに設定していきます。

LOGIN_REDIRECT_URLの設定
ログインした後、デフォルトで表示するページのURLを指定します。
参考URL
* https://docs.djangoproject.com/en/1.4/ref/settings/#login-redirect-url

テーブルの作成
テーブルを作成します。

urls.pyの設定
管理画面用、allauth用、indexページ用の設定を追加します。

各種ソーシャルメディアのアプリケーションの登録
ログインに使用するソーシャルメディアのアプリケーションを登録します。
詳細は割愛しますがFacebook、Twitter、GitHubの各アプリ登録ページから登録することが可能です。

今回はテスト用ドメインをlocal-test.comとしたので、
各コールバックURLは下記のように設定しました。

登録したアプリケーションの追加

サンプルアプリケーションに上記で登録したアプリケーションを追加していきます。

* 管理画面にログイン(http://local-test.com:8000/admin/)
* [Social apps]のリンクをクリック
* [social app を追加]をクリック
* 追加画面になるので、各アプリケーションを追加
(Client idとSecretはメディアによって名称が違います。)
* Providerを選択
* Nameを入力
* Client idを入力
* Secretを入力
* Sitesを選択

ログイン

上記の設定を行った後、ログイン用のURLにアクセスするとログイン画面が表示され、
各ソーシャルメディアのアカウントを利用してログインする事が可能になります。

* http://local-test.com:8000/accounts/login/
ログイン

* 注 Emailの設定を適切に設定しないと、signup時の確認用のメールが送信される際に
Connection refusedのエラーが発生します。
確認用のEmailを送信しないようにするには、下記のように設定します。

まとめ

今回はdjango-allauthを利用した、ソーシャルログイン機能の実装についてご紹介させて頂きました。
django-allauthを利用するとDjango標準の認証機能に対して、
とても簡単にソーシャルログイン機能を追加することができます。

またその他メールアドレスの確認機能やパスワードを忘れた場合の機能などもあり、
とても便利なライブラリだと思います。今回はほんの一部の機能のご紹介しか出来ませんでしたが、
今後はもっと詳細に踏み込んだ内容をご紹介していければと思っています。

サンプルソース
今回の記事を書くために作成したサンプルソースを公開致します。
下記のリンクより閲覧可能です。

* https://github.com/checkpoint/allauth-sample
BootstrapやjQueryを利用して若干デザインを見やすいように修正しています。
Django1.4にて動作を確認しています。