Google OAuthを利用したログイン実装

皆様ごきげんよう、Google OAuthを利用して開発中のサービスにログインできるようにしたいと思います。ログイン機能を開発した際のメモを残しておきます、少しでも参考になりますと幸いです。

※この記事はまだ未完成の状態です。途中までのステップをまとめておりますのでご了承ください。

環境

Windows 11 Home
Django
Python3
※Django側のコードはpython

Google Cloud側での事前準備

Google Developers Console (Google Cloud)にログインします
https://console.cloud.google.com/

APIとサービスの項目をクリックして、新規にプロジェクトを作成する。自分はサービス名をプロジェクト名として登録しました。

登録したプロジェクトを選択。メニューにある認証情報をクリックして、同意画面を構成ボタンをクリック。あとは必要な情報を記入していってください。

次はメニューにあるブランディングボタンを押すと、先ほどインプットしたような項目が出てきますがアプリケーションのホームページ、そしてデベロッパーの連絡先を記入する項目があるのでそれを記入して保存ボタンを押します。ホームページには、開発中なので一旦ローカルサイトのURLを入れました。

次はOAuthクライアントを作成ボタンをクリック。必要な情報を記入していきます。ちなみにURLにはローカル側のアドレス（http://127.0.0.1:8000/）、そしてリダイレクトURIには（http://127.0.0.1:8000/social-auth/google/login/callback/）と設定。

サービスのテスターが必要になります。登録するにはここで個別登録が必要のようです。

次はメニューのデータアクセスに行き、スコープを登録する必要があります。ここでWEBサービスがGoogle OAuthを通してどのような情報を取得するか設定を行います。必要最低限のユーザー情報が必要なので、以下のようにチェックを入れました。※今回初めてなので、色々試してもし不要と感じる項目が出てきた場合は外す予定。

Googleログイン認証をサイトに組み込む

WEBサービス開発で利用しているDjangoには、Googleなどその他SNSログイン認証を取り扱える便利なパッケージが用意されている事がわかりましたので以下のようにインストールを行います。

pip install django-allauth

Djangoの全体設定ファイル、settings.pyで以下のようにdjango-allauthの設定を追加する。

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.humanize',
    'django.contrib.sites',　#追加
    'allauth', #追加
    'allauth.account', #追加
    'allauth.socialaccount', #追加
    'allauth.socialaccount.providers.google', #追加
    'WEBアプリケーション名',
]

settings.pyの一番下に、このコードを追加する。

# django-allauthアプリケーションに関連する、Djangoプロジェクト内のサイトを識別する為のID
SITE_ID = 1

# 認証方法。デフォルトではdjangoのModelBackendがあるが、allauth.account.auth_backends.AuthenticationBackendを追加すると、メールとパスワードを使用した認証も行う事が可能
AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.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("WEBサービス名.urls"))
]

同じsettings.pyの中にあるmiddlewareの箇所にも追記する必要があります。

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'allauth.account.middleware.AccountMiddleware', #追記

Django管理画面で設定を行う

Django管理画面で、allauthを取り扱えるようになる。
以下はプロジェクトのデーターベース内にテーブルを作成するコマンドです。
※データーベースはSqlite3がデフォルトで設定されています

python manage.py migrate

※私が実行した際にはエラーが出てjwtが無いと言われたので、別途 pip install jwtでインストールしてから上記コマンドを実行したら成功しました。

Django管理画面にログインする為に、スーパーユーザーを作成。

python manage.py createsuperuser

開発用サーバーを実行。

python manage.py runserver

スーパーユーザーとして登録した情報を入れて、管理者画面に入ります。アドレスは、http://127.0.0.1:8000/admin

サイトに最初から保存されているexample.comの情報を修正します。

このDomain nameの項目には、http://127.0.0.1:8000　と記載してSAVEしてください。

次はSocial Applicationsのメニューを押して、Google Authentication情報を入れる必要があります。以下のように情報を記入。Client IDと、Secret Keyは冒頭で行ったOAuth設定で入手した情報を入れてください。

続きはまた進みましたら追記する予定