django FB, Googleアカウントでユーザー認証を実現する

ユーザー認証を実現するには、いくつかのライブラリがありそれを利用すれば良い事がわかった。

social-auth-app-django
django-allauth

https://simpleisbetterthancomplex.com/tutorial/2016/10/24/how-to-add-social-login-to-django.html
https://scotch.io/tutorials/django-authentication-with-facebook-instagram-and-linkedin
https://hodalog.com/oauth-authentication-in-dja/

今回はdjango-allauthを使って実装する。実際試してみてかなり簡単だと思った。

django-allauthのドキュメント

https://django-allauth.readthedocs.io/en/latest/providers.html

settings.pyの記述

#INSTALLED_APPSに記述する内容

'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',#googleを使う場合はこれを追加する
'allauth.socialaccount.providers.facebook',#facebookを使う場合はこれを追加する


#social account providerの設定もsettings.pyに記述する
SOCIALACCOUNT_PROVIDERS = {
    'facebook': {
        'METHOD': 'oauth2',
        'SCOPE': ['email', 'public_profile', 'user_friends'],
        'AUTH_PARAMS': {'auth_type': 'reauthenticate'},
        'INIT_PARAMS': {'cookie': True},
        'FIELDS': [
            'id',
            'email',
            'name',
            'first_name',
            'last_name',
            'verified',
            'locale',
            'timezone',
            'link',
            'gender',
            'updated_time',
        ],
        'EXCHANGE_TOKEN': True,
        'LOCALE_FUNC': 'path.to.callable',
        'VERIFIED_EMAIL': False,
        'VERSION': 'v2.12',
    },
     'google': {
        'SCOPE': [
            'profile',
            'email',
        ],
        'AUTH_PARAMS': {
            'access_type': 'online',
        }
    }
}

login機能を実装するテンプレートに記述する内容

#テンプレートタグをhtmlファイル上部に記述する
{% load socialaccount %}
{% providers_media_js %}



<a href="{% provider_login_url "facebook" method="js_sdk" %}">Login Button image</a>

Facebookのログイン機能を実装するときに困ったら

エラーメッセージを表示させることが解決の一歩だが、どのように表示させるかを記録しておく。
まずSNSアカウントログインエラーを表示するテンプレートは、allauth/socialaccount/authentication_error.htmlである。
このテンプレートに{{ auth_error }}を記述すると、テンプレートが表示されたときにエラーメッセージも表示されることになる。
この表示されたエラーメッセージをもとにググれば解決するだろう。
参考：https://stackoverflow.com/questions/36728887/debugging-django-allauth-social-network-login-failure/36728888#36728888

facebook developer サイトでの設定事項について

うまくログインができない場合は以下の設定がなされているか確認すると良い。

Settings Basic
- App Domains: "AnySite.com"
- Privacy policy URL: "https://AnySite.com/myprivacy/"
- Website: "https://AnySite.com/"
Settings Advanced
- Server IP Whitelist: let it blank
- Domain Manager: let it blank

Facebook login Settings
Yes Client OAuth Login
Yes Web OAuth Login
Yes (new: forced) Use strict Mode for redicect URLs
Yes Embeded Browser OAuth Login
Yes Enforce HTTPS
Valid OAuth Redirect URLs: "https://AnySite.com/accounts/facebook/login/callback/" (mandatory)

参考：https://stackoverflow.com/questions/49350221/django-2-0-allauth-facebook-2018?noredirect=1&lq=1

GoogleのOAAUTHを使ったログイン機能を実装する

googleのOAauthログイン機能をdjango-allauthで実装すると割と簡単にできる。それを少しまとめておく。
実装の手続き概要：

デプロイするならドメインを作成する
GoogleAPIConsoleでプロジェクトを作成する
Googleアカウント連携に必要なクライアントIDとシークレットキーを入手します
django-allauthのsettings.pyにgoogleの関連項目を記述する。
adminページでgoogleのクライアントIDとシークレットキーを使用する。またSITEも編集する。

デプロイ環境でgoogleのログイン機能を実現するには、ドメインが必要になる。localhost:8000のまましようとするとエラーが出てしまうので注意する。
ドメインはfreenomで無料で取得できる。

GoogleAPIConsoleへ移動する。

f:id:torajirousan:20191217121053p:plain

テンプレートのログインURLについて

django-allauthをインストールしたallauth/account/login.htmlにはsocialログインの部分が記載されておらず、記載されているところは、allauth/socialaccount/snippets/provider_list.htmlである。これがインクルードタグを通じてhtmlに表示される。

{% for provider in socialaccount_providers %}

<a title="{{provider.name}}" class="socialaccount_provider {{provider.id}} btn btn-primary" 
     href="{% provider_login_url provider.id process=process scope=scope auth_params=auth_params %}">{{provider.name}}</a>

{% endfor %}

問題はここにある。以下の記事でBootstrap-socialという便利なcssがある事がわかった。これを利用するにはclass属性にgoogleやfacebook等の内容を記載しなければならない。だからここを直接記載するためにgoogle,Facebookのリンクを表示させるにはいかに書けばいいかという問題が残る。

Bootstrap-socialの紹介記事:
https://medium.com/@jinkwon711/django-allauth-facebook-login-b536444cbc6b
Bootstrap-socialの実装手続きの記事:
https://pisuke-code.com/css-how-to-use-bootstrap-social/

以下の記事によるとgoogle,Facebookは以下のように書けばいいようだ。

<a href="{% provider_login_url "twitter" %}">Twitterでログイン</a>
<a href="{% provider_login_url "google" %}">Googleでログイン</a>    
<a href="{% provider_login_url "facebook" %}">Facebookでログイン</a>

https://tech.torico-corp.com/blog/django-projects-oauth2/

これでうまくいくと思われる