Zenn
🐍

【Python】DjangoでLINE、Google、Facebookのソーシャルログインを導入する手順

2024/12/01に公開
django
Python
Windows
allauth
sociallogin
tech

達成目標

django-allauthを用いて、ソーシャルログイン機能を実装することができる。

表示させたいログイン画面

１．django-allauthインストール

パッケージであるdjango-allauthをインストールする
docker-compose exec web pip install django-allauth
現在インストールされているパッケージとそのバージョンをrequirements.txtへ出力
docker-compose exec web pip freeze > requirements.txt

２．settings.pyの編集

django-allauthの設定（INSTALLED_APPS）
INSTALLED_APPS = [
    'django.contrib.sites',　# 追加
    'allauth',　# 追加
    'allauth.account',　# 追加
    'allauth.socialaccount',　# 追加
    'allauth.socialaccount.providers.google',　# 追加（Google Providers）
    'allauth.socialaccount.providers.facebook',　# 追加（facebook Providers)
    'allauth.socialaccount.providers.line',　# 追加（line Providers)
]
django-allauthの設定（AUTHENTICATION_BACKENDS）
AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',  # 追加（Djangoのデフォルト認証）
    'allauth.account.auth_backends.AuthenticationBackend',  # 追加（allauthの認証）
]
django-allauthの設定（その他）
SITE_ID = 1  # 必須（後程出てくるSiteテーブルのIDと同じにする）
LOGIN_REDIRECT_URL = '/'  # ログイン後のリダイレクト先
ACCOUNT_EMAIL_VERIFICATION = 'none'  # メール認証
SITE_IDとは
settings.py
INSTALLED_APPS = [
'django.contrib.sites'
]
  • INSTALLED_APPSに'django.contrib.sites'の記述を行うと、Django-adminにてSiteテーブルが作成される。
  • ドメイン名や表示名を登録し、コード内でSiteモデルをインポートして動的にURIや設定を変更することができる。
from django.contrib.sites.models import Site
# 現在のSiteを取得
current_site = Site.objects.get_current()

# 現在のドメイン名と名前を取得
print(current_site.domain)  # 例: localhost:8000
print(current_site.name)    # 例: My Local Site

# ドメイン名と名前を変更
current_site.domain = "newdomain.com"
current_site.name = "New Domain Name"
current_site.save()

# サイトIDで直接取得
site = Site.objects.get(id=1)
print(site.domain)  # 変更後: newdomain.com
  • その他、本番環境と開発環境のURL定義、複数のサイトを運営する場合、ソーシャルログインのカスタマイズなどに用いる。

３．urls.pyの編集

urls.pyファイルに以下を追加する
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"))
]

４．マイグレーションの実行

コンテナが起動している場合はDocker環境を再起動
docker-compose down
docker-compose up
マイグレーションの実行
docker-compose exec web python manage.py migrate

５．各プロバイダーでアプリを作成

Google

以下URLにアクセスし、新しいプロジェクトを作成

https://console.cloud.google.com/projectcreate?inv=1&invt=AbihTQ

ナビゲーションバーからAPIとサービス＞OAuth同意画面をクリック

User Typeは外部を選択し、作成を押下

アプリ名、ユーザーサポートメール、デベロッパーの連絡先情報を入力し、保存して次へを押下

スコープはそのまま保存して次へを押下

テストユーザーもそのまま保存して次へを押下

内容を確認し、ダッシュボードへ戻るを押下

サイドバーの認証情報を押下後、画面上部の＋認証情報の作成を押下

OAuthクライアントIDを押下

OAuthクライアントの情報を以下を参考に入力し、作成を押下

承認済みの JavaScript 生成元
http://localhost:8000
承認済みのリダイレクト URI
http://127.0.0.1:8000/accounts/google/login/callback/

表示されたClient IDとClient Secretが生成されたのでメモ帳などにコピーする（以降に使用）

facebook（作成中）
LINE（作成中）

６．Django adminの設定

Django admin（http://127.0.0.1:8000/admin）のログインする

SitesとSocial Accountsが追加されていることを確認する

Sitesを押下し、以下の画面を参考に内容を登録する

Social AccountsのSocialAccountを押下し、内容を登録する

Uidとエクストラデータとは

  • Uid
    Uid（User ID）は、ソーシャルプロバイダー（例: Google、Facebook）によって一意に付与されるユーザーIDです。このIDを使用して、Djangoアプリ内でユーザーアカウントをソーシャルプロバイダー上のアカウントに紐付けます。

  • エクストラデータ
    エクストラデータは、ソーシャルログイン時にプロバイダから取得した追加のユーザー情報をJSON形式で保存するフィールドです。必須ではない。

Social AccountsのSocialApplicationを押下し、内容を登録する

項番4のGoogleで作成したOAuthクライアントのIDとクライアントシークレットが必要

keyの部分は空欄でもよい

７．テンプレートファイルの読み込み

テンプレートフォルダとテンプレートファイルの横巫女

以下のコマンドでwebコンテナ内に入る
docker-compose exec web bash
プロジェクトフォルダ配下にtemplatesフォルダおよびaccountフォルダを配置
mkdir -p /app/templates/account
allauthのパッケージ内にあるテンプレートを先ほど作成したフォルダ内にコピーする
cp -r /usr/local/lib/python3.11/site-packages/allauth/templates/account/* /app/templates/account/

※Bashに入ると、通常のWindowsのコピペ（Ctrl+C, Ctrl+V）が直接的に機能しないため、コピーして、右クリックをして貼り付ける。

Bashシェルから抜ける
Ctrl + D
Dockerからそのままコピーしたい場合
docker cp コマンドを用いるが、
docker cp /usr/local/lib/python3.11/site-packages/allauth/templates/account /app/templates/

テンプレートフォルダがコピーされたかを確認

成功すると以下のようなフォルダが配置される。

テンプレートファイルの編集

login.htmlに以下を追加
templates/accounts/login.htmlに以下を追加
{% extends "account/base.html" %}

{% load i18n %}
{% load account socialaccount %}

{% block head_title %}{% trans "Sign In" %}{% endblock %}

{% block content %}

<h1>{% trans "Sign In" %}</h1>

{% get_providers as socialaccount_providers %}

{% if socialaccount_providers %}
<p>{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>

<div class="socialaccount_ballot">

  <ul class="socialaccount_providers">
    {% include "socialaccount/snippets/provider_list.html" with process="login" %}
  </ul>

  <div class="login-or">{% trans 'or' %}</div>

</div>

{% include "socialaccount/snippets/login_extra.html" %}

{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
<a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
{% endif %}

<form class="login" method="POST" action="{% url 'account_login' %}">
  {% csrf_token %}
  {{ form.as_p }}
  {% if redirect_field_value %}
    <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
  {% endif %}

  <!-- Password Reset Link -->
  <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>

  <!-- Submit Button -->
  <button class="primaryAction" type="submit">{% trans "Sign In" %}</button>
</form>


{% endblock %}

８．ログインの確認

http://127.0.0.1:8000/accounts/login/にアクセスし、ボタンが表示されているかを確認


ログイン画面

エラー画面を確認する（おそらく出現している）

templates/account/base.htmlの一番上に記述を追加する。

日本語翻訳に関わる記述をbase.htmlの<!DOCTYPE html>の上に記述する
{% load i18n %}

再度http://127.0.0.1:8000/accounts/login/にアクセスし、ボタンが表示されているかを確認


ログイン画面

ボタンを押下後、ソーシャルログイン（今回は、Google）の画面に遷移されるかを確認し、続けるボタンを押下。


続けるボタンを押下

ログイン画面が表示されるのを確認


表示させたいログイン画面

Discussion