Google との連携設定

Google（新 Google）のプロバイダ連携設定に関するドキュメントです。

注記

以下の手順に記載している画面スクリーンショットは 2022/06/20 時点のものです。操作のタイミングによっては、画面の内容に変更がある可能性もございます。

類似の操作で設定が進められない場合は、お手数ですが ソーシャルPLUS サポート窓口 へお問い合わせください。

全体の手順は以下のようになっています。

1. Google 連携前の準備
2. ソーシャルPLUS との連携設定
3. アプリを公開する

ご注意1: デベロッパー情報

Google アプリケーションを作成・設定する Google アカウントの「メールアドレス」が、ユーザーの初回 Google ログイン時の認可画面に表示されます。

ご注意2: 認可画面のドメイン表示について

Google の認可画面ではリクエスト元のドメインが必ず「socialplus.jp」と表示されます。こちらは変更ができませんのでご了承ください。

ご注意3: 公開ステータス

作成した Google プロジェクトの OAuth 同意画面［公開ステータス］は初期状態では［テスト］になっています。

「テスト」状態では、ソーシャルログインを利用可能なユーザーと、そのユーザー数に上限があります。

本番環境で利用するまえに 手順 3. アプリを公開する を実施する必要があります。

ご注意事項は以上です。

1. Google 連携前の準備

設定は Google Cloud Platform のページから行います。

管理者となる Google アカウントで Google にログインした状態で、以下にアクセスします。

https://console.cloud.google.com/apis/library

初めてアクセスする場合、規約同意の画面が表示されます。利用規約をご確認のうえ、［同意します］にチェックを入れて［同意して続行］をクリックしてください。

1-1. Google Cloud Platform プロジェクトと OAuth 2.0 クライアントの作成

1. 「API ライブラリへようこそ」のページが表示されます。［API とサービスを検索］の検索ボックスから "Google People API" を検索し、該当のページを開きます

   

2. 「Google People API」のページが表示されます。［有効にする］ボタンをクリック

   • プロジェクトの作成も同時に行われるため、画面が切り替わるまでしばらく時間がかかります（十数秒程度）

   

3. 「My first Project」が作成されます。画面上部の［認証情報を作成］ボタンをクリック

   

4. 次の画面が表示されます。［使用する API］に［People API］を選択し、［アクセスするデータの種類］の［ユーザーデータ］を選択します。［次へ］をクリック

   

5. 次の画面が表示されます。後述の内容を入力し、［保存して次へ］をクリック

   

   (1) アプリ名
   このアプリケーションの名称。ユーザーに表示されるため、サービス・サイト名などを推奨

   (2) ユーザーサポートメール
   同意画面でユーザーに表示されるメールアドレス。このプロジェクトに紐付けられたアカウントのメールアドレスのみ選択可能（自由に設定できるメールアドレスではありません）

   (3) アプリのロゴ
   同意画面でユーザーに表示されるアプリのアイコン画像

   (4) デベロッパーの連絡先情報（メールアドレス）
   Google からの重要なお知らせを受け取るためのメールアドレス。ユーザーには公開されません

6. 次の画面が表示されます。スコープは必要な場合に別途追加で設定するため、ここではとくに設定せずに［保存して次へ］をクリック

   

7. 次の画面が表示されます。Google ログインで利用する「OAuth クライアント ID」を作成します。［アプリケーションの種類］には［ウェブ アプリケーション］を選択します。それ以外は後ほど追加で設定するため、［作成］をクリック

   

8. 次の画面が表示されます。認証情報も後ほど取得できるため、ここでダウンロードする必要はありません。［完了］をクリック

   

以上で、プロジェクトと OAuth 2.0 クライアントの作成は完了です。

引き続き詳細の設定を追加していきます。

1-2. Google ログインの設定

作成した「OAuth 2.0 クライアント ID」に、ソーシャルPLUS の Google（新 Google）ログインを利用するための設定をします。

ここでは、一部でソーシャルログインマネージャーの情報が必要となります。ソーシャルログインマネージャーにアクセスし、ご利用のサービスを選択したあと［プロバイダ設定］>［Google］のページを表示します。

以下の手順を実施してください。

1. サイドメニューから［認証情報］をクリック

   

2. 次の画面が表示されます。手順 1-1. で作成した「OAuth 2.0 クライアント ID」の名前をクリック

   

3. 次の画面が表示されます。［承認済みのリダイレクト URI］項目の［＋ URI を追加］をクリック

   

4. 表示された入力欄に、ソーシャルログインマネージャーの［プロバイダ設定］>［Google］のページに表示された［承認済みのリダイレクト URI］をコピーして貼り付け、［保存］をクリック

   

5. 認証情報の一覧画面に戻ります

   

以上で、プロジェクトと OAuth 2.0 クライアントの作成は完了です。

続けて、スコープを設定します。

1-3. スコープの追加

1. サイドメニューから［OAuth 同意画面］をクリック

   

2. 次の画面が表示されます。［アプリを編集］をクリック

   

3. 「OAuth 同意画面」の設定ページが表示されます。ここでは特に変更は行わずに、画面下部の［保存して次へ］をクリック

   

   

4. 「スコープ」の設定ページが表示されます。［スコープを追加または削除］ボタンをクリック

   

5. 「選択したスコープの更新」画面が表示されます。一覧の下部までスクロールし［スコープの手動追加］入力フォームに、以下から必要なスコープ文字列を選び、カンマ , 区切りで入力します。最後に［テーブルに追加］をクリック

   スコープ文字列:

   • 必須（ソーシャルログインに必要）
     • openid
     • https://www.googleapis.com/auth/userinfo.profile（姓・名、プロフィール画像、URL、メールアドレス）
   • 取得したい個人情報に応じて追加
     • https://www.googleapis.com/auth/profile.agerange.read（年齢層）
     • https://www.googleapis.com/auth/user.birthday.read（生年月日）
     • https://www.googleapis.com/auth/user.gender.read（性別）
     • https://www.googleapis.com/auth/user.addresses.read（住所）

   入力例:

   必須のみ

   openid,https://www.googleapis.com/auth/userinfo.profile
   すべて取得する場合

   openid,https://www.googleapis.com/auth/userinfo.profile,https://www.googleapis.com/auth/profile.agerange.read,https://www.googleapis.com/auth/user.birthday.read,https://www.googleapis.com/auth/user.gender.read,https://www.googleapis.com/auth/user.addresses.read

   

6. スコープの一覧表示で、入力したスコープが選択されていることを確認し、最下部の［更新］ボタンをクリック

   

7. スコープ一覧の表示が閉じ、以下の画面が表示されます。画面下部の［保存して次へ］をクリック

   

8. 「テストユーザー」の設定ページが表示されます。ここでは特に変更は行わずに、画面下部の［保存して次へ］をクリック

   

9. 最後の画面が表示されます。画面下部の［ダッシュボードに戻る］をクリック

   

以上で、スコープの設定は完了です。

ここまでで Google Cloud Platform 側の設定は完了ですが、続くソーシャルPLUS との連携設定で、登録した認証情報（クライアントID, クライアントシークレット）が必要となりますので画面を閉じずに次の手順へ進んでください。

2. ソーシャルPLUS との連携設定

作成した Google プロジェクトの認証情報（OAuth 2.0 クライアント ID）ページから取得できる「クライアントID」と「クライアント シークレット」を、ソーシャルPLUS 側に登録します。

以下の手順を実施してください。

1. Google Cloud Platform のサイドメニューから［認証情報］をクリック

   

   サイドメニューの表示が異なる場合

   ヘッダーからメニューを開いて［API とサービス］>［認証情報］と進みます。

   

2. 手順 1-2. で作成した「OAuth 2.0 クライアント ID」の名前をクリック

   

3. 表示された画面に［クライアントID］と［クライアント シークレット］の値が表示されます

   

4. ソーシャルログインマネージャーにアクセスし、ご利用のサービスを選択したあと［プロバイダ設定］>［Google］のページを表示します

5. Google プロバイダ設定ページに以下の内容を入力し、画面下部の［保存する］をクリック

   • ［認証情報］>［クライアントIDとクライアントシークレット］
     • ［クライアントID］には、Google プロジェクトの［クライアント ID］の値をコピーして貼り付けます
     • ［クライアントシークレット］には、Google プロジェクトの［クライアント シークレット］の値をコピーして貼り付けます
   • ［設定者情報］>［設定者のメールアドレス］
     • Google Cloud Console の管理者として使用しているアカウントの「メールアドレス」を入力します（備忘用）

   

6. 保存が完了後、以下の画面に戻ります。ラベルが［設定済］になっていれば問題ありません

   

以上で、ソーシャルPLUS 側の連携設定は完了です。

Google ログイン時の個人情報の取得については個人情報取得設定で設定します。

3. アプリを公開する

ソーシャルPLUS との連携開発が完了し、一般公開の準備が整いましたら、一般ユーザーに Google ログインを提供するために OAuth 同意画面の公開ステータスを「テスト」から「本番環境」に変更する必要があります。

「テスト」から「本番環境」に変更する手順は以下のとおりです。

1. Google Cloud Platform のサイドメニューから［OAuth 同意画面］をクリック

   

2. OAuth 同意画面のページが表示されます。［アプリを公開］ボタンをクリック

   

3. 次の画面が表示されます。ここまでの手順通り作成された Google プロジェクトでは、Google 側での審査は不要です。書かれている内容を確認し［確認］をクリック

   

4. OAuth 同意画面に戻ります。［確認ステータス］が "検証は不要です"、［公開ステータス］が "本番環境" になっていることを確認します

   

   ［確認ステータス］で "検証が必要" と表示される場合

   画面に表示された指示に従って対応してください。

   様々なケースがあるため、ここではすべてを説明できません。対応内容が不明な場合は サポート窓口 へご相談ください。

以上で、「本番環境」への変更は完了です。

「本番環境」から「テスト」へ戻すことも可能ですが、Google ログインをすでに一般公開した状態で 「テスト」に戻しますと一般ユーザーからはログインがエラーとなります のでご注意ください。

次のアクション

• 他のログインプロバイダの連携を設定する
• 個人情報の取得設定を行う
• ソーシャルログイン機能・ID 連携処理の実装を行う
• フォームアシスト機能の設定を行う