cover_django_3_by_example

Facebook 、Twitter 、Google アカウントでログインできるようにしてみました 投稿一覧へ戻る

Tags: Django , update , account , Google , login , Twitter , social , Facebook , auth

Published 2020年5月6日12:59 by T.Tsuyoshi

Python Social Auth モジュールを利用して、Facebook、Twitter、Google のアカウントでログインできる機能をログインページに実装してみました。

Facebook と Twitter では https 接続だけでしか設定ができないようなので、
Django の開発サーバーでの実装は多分無理だと思われます。

Google では http 接続でも設定が可能なようでしたが、
実際に試していないので、開発サーバー上で実装できるかどうか良く分かりません。



Python Social Auth モジュールはデフォルトとは異なる authentication backend に含まれているのでまずそれをインストール。

pip install social-auth-app-django



Django プロジェクトに python-social-auth モジュールを追加するためのアプリケーションである social_django を settings.py ファイルの INSTALLED_APPS セクションに追加。

INSTALLED_APPS = [
#...
'social_django',
]



python-social-auth モデルとデータベースを同期させる。

python manage.py migrate



プロジェクトの urls.py ファイルに social login のための URL パターンを追加。

urlpatterns = [
#...
path('social-auth/', include('social_django.urls', namespace='social')),
]



ここまでで前準備は完了。


続けて、Facebook アカウントでのログイン機能の設定。

1: Facebook アカウントでの social login をサポートする authentication backend を settings.py ファイルの AUTHENTICATION_BACKENDS セクションに追加。

'social_core.backends.facebook.FacebookOAuth2',



2: ここからは Facebook developer サイトでの設定作業です。

https://developers.facebook.com/apps/ へアクセス、ログイン。
Facebook developer account を持っていない場合は作成することになります。


3:「新しいアプリを追加」を選択。


4:「新しいアプリIDを作成」画面で、「表示名」「連絡先メールアドレス」を入力しアプリIDを作成。


5: 新しく作成したアプリのダッシュボードへリダイレクトされるので、「Facebook ログイン」box の「設定」を選択。


6: プラットフォーム選択画面で「ウェブ」を選択。


7: 「ウェブサイトの情報を入力する」フォームで「サイトURL」を入力。


8: 以降のクイックスタートプロセスは省略、サイドメニューから「設定」→「ベーシック」を選択。


9: この画面で「App ID」と「App Secret」を参照できるので、この値を settings.py ファイルに設定。

SOCIAL_AUTH_FACEBOOK_KEY = 'XXX' # Facebook App ID
SOCIAL_AUTH_FACEBOOK_SECRET = 'XXX' # Facebook App Secret



10: ユーザーが Facebook に登録済みのメールアドレスでもログインできるようにしたい場合は以下も設定。

SOCIAL_AUTH_FACEBOOK_SCOPE = ['email']



再び Facebook のサイトでの設定続き。


11: 「設定」画面の「アプリドメイン」フォームにサイトドメインを入力、「変更を保存」。


12: サイドメニューから「Facebook ログイン」を選択。


13: 以下の項目だけが「はい」なっているか確認。

・クライアントOAuthログイン
・ウェブOAuthログイン
・埋め込みブラウザーOAuthログイン
・HTTPSを強制(変更不可)
・リダイレクトURIに制限モードを使用(変更不可)


14: 「有効な OAuth リダイレクトURL」を以下のように設定。
ホスト名のある、なしも含めて、リダイレクト先として考えられる全ての URL を登録します。
( 'example.com' は自分のサイトドメインと置き換えてください)

https://www.example.com/social-auth/complete/facebook/
https://example.com/social-auth/complete/facebook/



15: 「変更を保存」ボタンを押して保存。


16: Facebook へのログインリンクをテンプレートに記述。

<a href="{% url "social:begin" "facebook" %}">Facebookアカウントでログイン</a>



17: ブラウザで動作確認。



Twitter でも Google でも基本的な流れは同じです。


1: それぞれの social auth をサポートする backend を settings.py の AUTHENTICATION_BACKENDS セクションに追加。

Twitter:
'social_core.backends.twitter.TwitterOAuth',

Google:
'social_core.backends.google.GoogleOAuth2',



2: それぞれの developer サイトで App ID と App secret キーを取得し、settings.py に設定.

Twitter:
SOCIAL_AUTH_TWITTER_KEY = 'XXX' # Twitter Consumer Key
SOCIAL_AUTH_TWITTER_SECRET = 'XXX' # Twitter Consumer Secret

Google:
SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'XXX' # Google Consumer Key
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'XXX' # Google Consumer Secret



3: ログインリンクをテンプレートに記述。

Twitter:
<a href="{% url "social:begin" "twitter" %}">Twitterアカウントでログイン</a>

Google:
<a href="{% url "social:begin" "google-oauth2" %}">Googleアカウントでログイン</a>



実装して試してみたところ、ユーザーがこれらのアカウントでログインすると、
こちらのサイトではそのユーザーに対する User オブジェクトが作成されていました。


Facebook と Twitter アカウントでのログインでは User オブジェクトのメールアドレスの値は設定されていませんでしたが、
Google アカウントのログインではメールアドレスも設定されていました。


何か不明な点などありましたら分かる範囲でお答えします。
コメント欄からどうぞ。

この投稿をメールでシェアする

0 comments

コメントはまだありません。

コメントを追加する(不適切と思われるコメントは削除する場合があります)