はじめに
近年、ソーシャルログインの需要が増えており、多くのWebサービスで採用されています。Djangoでも、ソーシャルログインを実現するための豊富なライブラリが提供されています。本記事では、DjangoでGoogleアカウントによるログインを実装する手順を紹介します！
そもそもソーシャルログインとは？
ソーシャルログインとは、FacebookやTwitterなどのユーザーが普段利用しているSNSのアカウントを利用して、Webサイトにログインすることができる機能です。
GitHub
この記事で紹介しているソースコードはGitHubで公開しています！
参考記事
この記事は、以下の記事を参考にさせていただきました。
手順
環境
MacOS 13.2.1
Python 3.10.3
Django 4.1.7
開発環境構築
Google認証にフォーカスした記事となりますので、Djangoプロジェクトのセットアップ等の説明は省きますが、GitHubのソースコードや私が記述した以下の記事を参考にアプリケーションを作成してみてください。
Googleソーシャルログインを実装
1. パッケージのインストール
Djangoには様々なソーシャルログイン用のライブラリがリリースされていますが、今回はdjango-allauthを使用します。
django-allauthは、Djangoで簡単にソーシャルログイン（Google、Facebook、Twitterなど）やメールアドレス・パスワード認証を実装できるパッケージです。
pip install django-allauth
2. django-allauthをセットアップ
settings.pyのINSTALLED_APPSにdjango-allauthの設定を追加します。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sites', # 追加
'allauth', # 追加
'allauth.account', # 追加
'allauth.socialaccount', # 追加
'allauth.socialaccount.providers.google', # 追加
'accounts'
]
また、settings.pyの下部に以下の設定を追加します。
SITE_ID = 1
AUTHENTICATION_BACKENDS = [
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
]
設定項目について補足します。
-
SITE_ID
SITE_IDは、django-allauthアプリケーションに関連するDjangoプロジェクト内のサイトを識別するために使用されます。
SITE_IDは後ほどDjango管理画面で作成するサイトオブジェクトのIDを設定します。 -
AUTHENTICATION_BACKENDS
認証方法を複数登録できます。デフォルトでは、djangoのModelBackendですが、今回のようにallauth.account.auth_backends.AuthenticationBackendを追加すると、メールとパスワードを使用した認証も行うことができます。
urls.pyにallauth用のurlを追加します。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('social-auth/', include('allauth.urls')),
path('', include("accounts.urls"))
]
3. GoogleAPIの設定
Googleのソーシャルログインを実装するためには、GoogleAPIの設定を行い、Cliend IDと、Client Secretを取得する必要がありますので、一緒にやっていきましょう！
初めにGoogle Cloudにアクセスし、新しいプロジェクトを作成します。
今回は、django-social-auth-demoというプロジェクトにします。
プロジェクトが作成されましたら、サイドバーから
APIとサービス > OAuth同意画面
を選択します。
User Typeは外部を選択し、「作成」を押下します。
続いて、アプリ情報を入力していきます。
アプリ名と、ユーザーサポートメール、デベロッパーの連絡先情報を設定し、「保存して次へ」を押下します。
スコープは設定せず「保存して次へ」を押下します。
何もせず「保存して次へ」を押下します。
確認画面です。
確認ができましたら、「ダッシュボードに戻る」を押下します。
ダッシュボードに戻るを押下します。
続いて、OAuthのクライアントIDを作成していきます。
サイドバーから「認証情報」を押下してください。
認証情報を作成 > OAuthクライアントIDを押下します。
アプリケーションの種類: ウェブアプリケーション
承認済みのJavaScript生成元: http://127.0.0.1:8000
承認済みのリダイレクトURI: http://127.0.0.1:8000/social-auth/google/login/callback/
をそれぞれ設定し、「作成」を押下します。
Client IDとClient Secretが生成されましたのでコピーしておきましょう。
ついでにJSONファイルもダウンロードしておきましょう🙆♂️
4. ソーシャルアプリをDjangoに設定
Django管理画面を操作し、ソーシャルアプリの設定を行います。
始めにdjango-allauthに関連するテーブル作成のためマイグレートします。
python manage.py migrate
Django管理画面にログインするため、スーパーユーザーを作成します。
python manage.py createsuperuser
開発用サーバーを実行します。
python manage.py runserver
管理画面にログインし、example.comの設定を変更します。
ドメイン名を127.0.0.1:8000にし、保存します。
続いて、サイドバーから「ソーシャルアプリケーション」を押下し、設定をしていきます。
プロバイダー: Google
名前: google auth(任意の名称)
ユーザーID: GoogleAPIのClient ID
シークレット: GoogleAPIのClient Secret
Sites: 127.0.0.1:8000を「選択された sites」にセットします
上記内容を変更したら、「保存」ボタンを押下し登録します。
最後にGoogleログイン画面に移動するためのボタンをテンプレートに作成します。
{% extends 'base.html' %}
{% load socialaccount %}
{% block title %}
<div class="h1">Login</div>
{% endblock %}
{% block content %}
<form method="post">
{% csrf_token %}
{{ form.non_field_errors }}
{% for field in form %}
{{ field.label }}
{{ field }}
{{ field.errors }}
<br>
{% endfor %}
<div class="mt-3">
<button type="submit" class="btn btn-primary">Login</button>
<!-- 以下のボタンを追加 -->
<a href="{% provider_login_url 'google'%}?next=/" class="btn btn-primary">Login with Google</a>
<a href="{% url 'accounts:index' %}" class="btn btn-secondary">Back</a>
</div>
</form>
{% endblock %}
実践
では、Googleログインが機能するか確認してみます！
http://127.0.0.1:8000/loginにアクセスします。
「Login with Google」を選択します。
「続ける」を押下します。
メールアドレス、パスワードを入力します。
ログインができました🎉
まとめ
今回、Djangoでのソーシャルログインを実現するためには、django-allauthライブラリを使用して実装しました。
ソーシャルログインはユーザーにとって利便性が高く、Webサービスの成長にもつながります。Djangoでの実装は簡単であり、多くのWebサービスにとって必要な機能であるため、積極的に導入していきましょう！🙋♂️
紹介記事