こちらのサイトではDRUPAL10に関連する記事を掲載しています。
はじめに
せっかくウェブサイトに到達してもユーザ登録するのは色々手間が多いのでなかなかしてもらえないのが現状です。その手間を少しでも軽減するため、Googleアカウントに連携してユーザが登録できるようにしてみました
環境
Ubuntu
Composer
Drupal10(Drupal9以上)
インストール
Moduleのインストール
Composerでインストールします。
Composerのjsonファイルがあるディレクトリで以下のコマンドを実行します
composer require 'drupal/social_auth_google:^4.0'
続けて、Drushコマンドでアクティベートします。(管理画面の機能拡張からInstallで対象モジュールを選択して実施することも可能です)
drush pm:install social_auth_google
以下のメッセージが表示されればインストールは完了です。
[success] Successfully enabled: social_auth_google, social_auth, social_api
設定
ステップ1)Drupal側
- 管理者としてログインします。
- 設定 » ユーザー認証 » Google に移動してコピーします
承認されたリダイレクト URL フィールドの値 (URL は次で終わる必要があります)/user/login/google/callback
).
![](https://drupalfan.com/wp-content/uploads/Screenshot-from-2023-08-07-22-26-19-883x1024.png)
ステップ2)Google Cloud コンソール設定
- Google アカウントにログインします。
- 「API とサービス」に移動し、 「プロジェクトの作成」をクリックします。
https://console.cloud.google.com/projectcreate - 必要に応じて、プロジェクト名と場所を設定します。
- 「作成」をクリックします。
- 新しいプロジェクトを選択した状態で、API とサービス » OAuth 同意に移動します。
- 「外部」ユーザータイプを選択し、「作成」をクリックします。
- アプリ名、ユーザーサポートメールアドレス、開発者の連絡先情報を設定します。
必要に応じてフィールドを入力します (他のフィールドはすべてオプションです)。 - 「保存して続行」をクリックします
- [スコープ] で、必要なスコープを追加します (いずれも必須ではありません)。
- 「保存して続行」をクリックします。
- 「ユーザーのテスト」ステップで、使用する電子メール アドレスを少なくとも 1 つ追加します。
実装をテストしています。 - 「保存して続行」をクリックします。
- API とサービス » 認証情報に移動します。
- [認証情報の作成] » [OAuth クライアント ID] をクリックします。
- [アプリケーションの種類] フィールドで [Web アプリケーション] を選択します。
- 必要に応じて「名前」フィールドを設定します。
- [承認されたリダイレクト URI] セクションで、[URI の追加] をクリックします。
- ステップ 1No2 でコピーした URL を「URI」フィールドに貼り付けます。
- 「作成」をクリックします。
- 新しいクライアント シークレットとクライアント ID をコピーします。
そしてそれらを安全な場所に保存してください。
※再表示されないためなくさないようにしてください - 「OK」をクリックします。
ステップ3)Drupal側設定
- 設定 » ユーザー認証 » Google に戻る
- [クライアント ID] フィールドに Google クライアント ID を入力します。
- [クライアント シークレット] フィールドに Google シークレット キーを入力します。
- 「構成を保存」をクリックします。
- 構造 » ブロック レイアウトに移動し、ソーシャル認証ログイン ブロックを配置します。
サイト上のどこか (まだ配置されていない場合)。
以上で設定は終了です。
Google でのセットアップ中に追加されたテスト ユーザーの 1 人でログインします。
準備ができたら、Google Cloud Console にログインし、「APIs & Services » OAuth consent screen」 に移動します。Googleアカウントユーザで、[アプリの公開] をクリックします。
参考
この記事は下記のサイトを参考にしました。
Access to this page has been denied.
![](https://blogdeoshiete.com/wp-content/uploads/advertise.jpg)
この記事またはDrupalに関するご質問がございましたら、お気軽にお問い合わせください。