Drupalにgoogleアカウントでログインする

こんにちは。ぴころじーの竹川です。

地域おこし協力隊制度は、地方行政が国の制度を使って主導するものですが、実際に考えて稼働するのは隊員本人です。行政が主導して隊員同士をつなげたりするのではなく、隊員自ら行動を取っていくプラットフォームが乏しいなぁと感じており、「んじゃ作るか」ということで、現在制作しております。

そんな中、ログイン手段をどうしようかと考えていたときに思ったのが今回の記事の内容です。

新規アカウントを作るのではなく、Googleアカウントを使用してDrupalにログインしたいという需要は一定数あるはずなので、今回はその実装を行いました。

実行環境

  1. Drupal 10.2.2
  2. Composer 2.7.6
  3. Drush 12.4.3.0
  4. エックスサーバー

モジュール

social_auth_google

モジュールを導入する

ターミナルを起動し、Drupalプロジェクトのルート(composer.jsonがあるディレクトリ)で次のコマンドを実行します。

$ composer require 'drupal/social_auth_google:^4.0'
./composer.json has been updated
Running composer update drupal/social_auth_google
Loading composer repositories with package information
Updating dependencies
Lock file operations: 6 installs, 0 updates, 0 removals
 - Locking drupal/social_api (4.0.1)
 - Locking drupal/social_auth (4.1.0)
 - Locking drupal/social_auth_google (4.0.2)
 - Locking league/oauth2-client (2.7.0)
 - Locking league/oauth2-google (4.0.1)
 - Locking paragonie/random_compat (v9.99.100)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 6 installs, 0 updates, 0 removals
 - Downloading paragonie/random_compat (v9.99.100)
 - Downloading league/oauth2-client (2.7.0)
 - Downloading drupal/social_api (4.0.1)
 - Downloading league/oauth2-google (4.0.1)
 - Downloading drupal/social_auth (4.1.0)
 - Downloading drupal/social_auth_google (4.0.2)
 - Installing paragonie/random_compat (v9.99.100): Extracting archive
 - Installing league/oauth2-client (2.7.0): Extracting archive
 - Installing drupal/social_api (4.0.1): Extracting archive
 - Installing league/oauth2-google (4.0.1): Extracting archive
 - Installing drupal/social_auth (4.1.0): Extracting archive
 - Installing drupal/social_auth_google (4.0.2): Extracting archive
1 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating autoload files
46 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.

続いて、social_auth_googleを有効にします。(Drupalの管理画面の機能拡張から有効にすることもできます。)

$ drush pm:install social_auth_google
The following module(s) will be enabled: social_auth_google, social_auth, social_api
 Do you want to continue? (yes/no) [yes]:
 > yes
>  [notice] social_api 用の ja の翻訳を確認しました。
>  [notice] social_auth 用の ja の翻訳を確認しました。
>  [notice] social_auth_google 用の ja の翻訳を確認しました。
>  [notice] social_api 用の ja の翻訳をダウンロードしました。
>  [notice] social_api 用の ja の翻訳をインポートしました。
>  [notice] social_auth 用の ja の翻訳をダウンロードしました。
>  [notice] social_auth 用の ja の翻訳をインポートしました。
>  [notice] social_auth_google 用の ja の翻訳をダウンロードしました。
>  [notice] social_auth_google 用の ja の翻訳をインポートしました。
>  [notice] Updated default configuration to ja
>  [notice] Translations imported: 4 added, 16 updated, 0 removed.
>  [warning] No configuration objects have been updated.
>  [notice] Message: 3 個の翻訳ファイルをインポートしました。/4/ 
> 個の翻訳を追加し、/16/ 個の翻訳を更新、/0/ 
> 個の翻訳を削除しました。
> 
>  [notice] Message: 更新された構成オブジェクトはありません。
> 
 [success] Successfully enabled: social_auth_google, social_auth, social_api

環境設定を行う

Drupalの環境確認

  1. 管理者としてDrupal環境へログインします。
  2. 管理から、環境設定のSocial APIをクリックします。

  1. GoogleタブのAuthorized redirect URLを確認します。(メモ帳等にコピーしてください。)

Google Cloud コンソールの設定

  1. Googleアカウントにログインします。
  2. 「APIとサービス」から、プロジェクトの作成をクリックします。
  3. プロジェクト名を入力し、作成をクリックします。

  1. APIとサービスから、OAuth 同意画面をクリックし、外部を選択、作成をクリックします。

  1. 必要な情報(アプリ名、ユーザーサポートメール、およびデベロッパーの連絡先情報としてのメールアドレス)を入力し、「保存して次へ」をクリックします。
  2. スコープの設定は不要なので、そのまま「保存して次へ」をクリックします。
  3. テストを行うためのGoogleアカウント(メールアドレス)を追加し、「保存して次へ」をクリックします。

  1. 「ダッシュボードに戻る」をクリックします。
  2. 「認証情報」をクリックし、さらに「認証情報を作成」をクリックします。

  1. 「OAuth クライアントID」をクリックします。

  1. アプリケーションの種類に「ウェブ アプリケーション」を選択、「名前」を入力し、承認済みのリダイレクトURIにDrupalの環境確認でコピーしたURLを入力(ペースト)します。入力後、「作成」をクリックします。

  1. クライアントIDとクライアントシークレットをメモ帳等にコピーして、安全な場所に保存します。保存したら「OK」をクリックします。

Drupalの環境設定

  1. Drupalの管理から、環境設定のSocial APIをクリックします。
  2. GoogleタブのGoogle settingsにある、「Client ID」と「Client secret」に先程コピーしたクライアントIDとクライアントシークレットをペーストし、「構成を保存」をクリックします。

  1. 管理メニューのサイト構築から、ブロックレイアウトを選択し、任意の箇所(サイトによって変わるためこのように表記しています。)へSocial Auth Loginを配置します。

  1. 設定されているcss等により、外見は異なりますが、このような感じになります。

ログインテスト

  1. ブロックを設置したページに移動し、Googleアイコンをクリックすると、見慣れたログイン画面が表示されます。

  1. そのままログインを進めると、次のような警告が表示されます。アカウントが作成されましたが、管理者の承認が必要です。という内容です。

  1. 管理メニューのユーザーを確認すると、確かに、ユーザーが追加されていることが分かります。

  1. ユーザーの「編集」ボタンをクリックし、状態を「アクティブ」にして、「保存」をクリックします。

  1. 再度、Googleアイコンからログインすると、ログインできるようになります。

設定の公開

  1. Google Cloud Consoleにログインします。
  2. APIとサービスの、「OAuth 同意画面」をクリックし、「アプリを公開」をクリックします。

なかなかややこしい設定が散見されますが、ご利用者の敷居を下げるためにはあったほうがいいかもしれませんね。

興味のある方は一度お試しください。