「Google でログイン」、ワンタップ、自動ログインをウェブサイトに追加する前に、OAuth 構成を設定し、必要に応じてサイトのコンテンツ セキュリティ ポリシーを構成します。
Google API クライアント ID を取得する
ウェブサイトで「Google でログイン」を有効にするには、まず Google API クライアント ID を設定する必要があります。そのための手順は次のとおりです。
- Google API Console の [認証情報] ページを開きます。
- Google API プロジェクトを作成または選択します。[Google でログイン] ボタンまたは Google One Tap のプロジェクトがすでにある場合は、既存のプロジェクトとウェブ クライアント ID を使用します。本番環境アプリケーションを作成する場合は、複数のプロジェクトが必要になる場合があります。管理するプロジェクトごとに、このセクションの残りの手順を繰り返します。
- [認証情報を作成] > [OAuth クライアント ID] をクリックし、[アプリケーション タイプ] で [ウェブ アプリケーション] を選択して新しいクライアント ID を作成します。既存のクライアント ID を使用するには、いずれかのタイプとして [ウェブ アプリケーション] を選択します。
ウェブサイトの URI を [承認済みの JavaScript 生成元] に追加します。URI には、スキームと完全修飾ホスト名のみが含まれます。例:
https://www.example.com。必要に応じて、JavaScript コールバックを使用する代わりに、ホストするエンドポイントへのリダイレクトを使用して認証情報を返すことができます。その場合は、リダイレクト URI を [承認済みのリダイレクト URI] に追加します。リダイレクト URI には、スキーム、完全修飾ホスト名、パスが含まれ、リダイレクト URI の検証ルールに従う必要があります。例:
https://www.example.com/auth-receiver
OAuth 同意画面を構成する
Google でログインとワンタップ認証のどちらにも同意画面があり、データへのアクセスをリクエストするアプリ、求められるデータの種類、適用される規約をユーザーに明示します。
- Google Play Console の [API とサービス] セクションで [OAuth 同意画面] ページを開きます。
- プロンプトが表示されたら、作成したプロジェクトを選択します。
[OAuth 同意画面] ページで、フォームに入力し、[保存] ボタンをクリックします。
アプリケーション名: 同意を求めるアプリケーションの名前。この名前はアプリケーションを正確に反映し、ユーザーが他の場所で目にするアプリケーション名と一致している必要があります。
アプリのロゴ: この画像は、ユーザーがアプリを認識できるよう同意画面に表示されます。ロゴは、「Google でログイン」の同意画面とアカウント設定に表示されますが、ワンタップ ダイアログには表示されません。
サポートメール: ユーザー サポートに関する同意画面に表示されます。また、ユーザーによるアプリケーションへのアクセスを検討している G Suite 管理者に表示されます。このメールアドレスは、ユーザーがアプリケーション名をクリックしたときに、「Google でログイン」の同意画面でユーザーに表示されます。
Google API のスコープ: スコープを使用すると、アプリケーションがユーザーの個人データにアクセスできるようになります。認証では、デフォルトのスコープ（email、profile、openid）で十分です。機密性の高いスコープを追加する必要はありません。通常は、事前にではなく、アクセスが必要になったときに段階的にスコープをリクエストすることをおすすめします。詳細
承認済みドメイン: 管理者とユーザーを保護するため、Google では、OAuth を使用して認証を行うアプリケーションにのみ、承認済みドメインの使用を許可しています。アプリケーションのリンクは承認済みドメインでホストする必要があります。 詳細
アプリ ホームページのリンク: 「Google でログイン」の同意画面と、[次の名前とメールアドレスで続行] ボタンの下のワンタップで GDPR 準拠の免責条項情報に表示されます。承認済みドメインでホストされている必要があります。
アプリのプライバシー ポリシーのリンク: 「Google でログイン」の同意画面と、[次の名前で続行] ボタンの下のワンタップで GDPR 準拠の免責条項情報に表示されます。承認済みドメインでホストされている必要があります。
アプリ利用規約のリンク（省略可）: 「Google でログイン」の同意画面と、[Continue as] ボタンの下のワンタップで GDPR 準拠の免責条項情報に表示されます。承認済みドメインでホストされている必要があります。
[確認ステータス] を確認します。申請に確認が必要な場合は、[確認のために送信] ボタンをクリックして確認申請を送信します。詳しくは、OAuth 検証の要件をご覧ください。
ログイン中の OAuth 設定の表示
FedCM を使用したワンタップ
Chrome でユーザーの同意を確認するときに、最上位の承認済みドメインが表示されます。
ワンタップ（FedCM なし）
ユーザーの同意を確認すると、[アプリケーション名] が表示されます。
図 1. Chrome のワンタップで表示される OAuth 同意設定。
コンテンツ セキュリティ ポリシー
必須ではありませんが、アプリを保護し、クロスサイト スクリプティング（XSS）攻撃を防ぐために、コンテンツ セキュリティ ポリシーを使用することをおすすめします。詳細については、CSP の概要と CSP と XSS をご覧ください。
コンテンツ セキュリティ ポリシーには、connect-src、frame-src、script-src、style-src、default-src などのディレクティブが 1 つ以上含まれている場合があります。
CSP に以下を含める場合:
connect-srcディレクティブにhttps://accounts.google.com/gsi/を追加して、Google Identity Services サーバーサイド エンドポイントの親 URL をページが読み込めるようにします。frame-srcディレクティブにhttps://accounts.google.com/gsi/を追加して、[ワンタップでログイン] ボタンの iframe の親 URL を許可します。script-srcディレクティブで、https://accounts.google.com/gsi/clientを追加して Google Identity Services JavaScript ライブラリの URL を許可します。style-srcディレクティブで、https://accounts.google.com/gsi/styleを追加して Google Identity Services スタイルシートの URL を許可します。default-srcディレクティブを使用する場合、先行するディレクティブ（connect-src、frame-src、script-src、style-src）のいずれかが指定されていない場合はフォールバックとなります。https://accounts.google.com/gsi/を追加すると、Google Identity Services サーバーサイド エンドポイントの親 URL をページで読み込めるようになります。
connect-src を使用する際は、個々の GIS の URL をリストすることは避けてください。これにより、GIS 更新時のエラーを最小限に抑えることができます。たとえば、https://accounts.google.com/gsi/status を追加する代わりに、GIS の親 URL https://accounts.google.com/gsi/ を使用します。
次のレスポンス ヘッダーの例では、Google Identity Services が正常に読み込まれて実行されます。
Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;
クロスオリジン オープナー ポリシー
[Google でログイン] ボタンと Google One Tap によってポップアップを正常に作成するには、Cross-Origin-Opener-Policy（COOP）の変更が必要になる場合があります。
FedCM が有効になっている場合、ブラウザは直接ポップアップをレンダリングするため、変更は必要ありません。
ただし、FedCM が無効になっている場合は、COOP ヘッダーを設定します。
same-origin行き、same-origin-allow-popupsを含めます。
適切なヘッダーを設定しないと、ウィンドウ間の通信が中断し、空白のポップアップ ウィンドウや同様のバグが発生します。