設定

ウェブサイトに「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

キーポイント: ローカルテストと開発では、http://localhost と http://localhost:<port_number> の両方を追加してください。
キーポイント: Google One Tap は HTTPS ドメインでのみ表示できます。
認証情報は、JavaScript コールバックではなく、ホストしているエンドポイントへのリダイレクトを使用して返されることがあります。その場合は、承認済みのリダイレクト URI にリダイレクト URI を追加してください。リダイレクト URI には、スキーム、完全修飾ホスト名、パスが含まれ、リダイレクト URI 検証ルールに従う必要があります。例: https://www.example.com/auth-receiver

OAuth 同意画面を構成する

「Google でログイン」認証およびワンタップ認証には、データへのアクセスをリクエストするアプリケーション、求められるデータの種類、適用される規約をユーザーに知らせる同意画面があります。

Google API Console の [OAuth 同意画面] ページを開きます。
プロンプトが表示されたら、作成したプロジェクトを選択します。
[OAuth 同意画面] ページで、フォームに記入し、[保存] ボタンをクリックします。
1. アプリケーション名: 同意を求めるアプリケーションの名前。名前は、アプリケーションを正確に反映し、他の場所でユーザーに表示されるアプリケーション名と一致している必要があります。ワンタップダイアログウィンドウにアプリケーション名が表示されます。
2. アプリのロゴ: アプリの同意を示す画像です。ロゴは [Google でログイン] の同意画面とアカウント設定に表示されますが、ワンタップダイアログには表示されません。
3. サポートのメールアドレス: ユーザーサポートの同意画面と、ユーザーのアプリケーションへのアクセスを評価している G Suite 管理者に表示されます。このメールアドレスは、ユーザーがアプリケーション名をクリックすると、「Google でログイン」の同意画面でユーザーに表示されます。
4. Google API のスコープ: スコープを使用すると、アプリケーションがユーザーの限定公開の Google データにアクセスできるようになります。認証にはデフォルトのスコープ（email、profile、openid）で十分です。機密性の高いスコープを追加する必要はありません。一般的には、アクセスを最初に行うのではなく、段階的に必要になったときに、スコープを段階的にリクエストすることをおすすめします。詳細
5. 承認済みドメイン: 管理者とユーザーを保護するために、Google では、OAuth を使用して認証するアプリケーションのみに承認済みドメインの使用を許可しています。アプリケーションのリンクは、承認済みドメインでホストされている必要があります。詳細
6. アプリケーションホームページのリンク: [Google でログイン] の同意画面と [次に進む] ボタンの GDPR 準拠の免責条項情報をワンタップで表示します。承認済みドメインでホストする必要があります。
7. アプリのプライバシーポリシーのリンク: [Google でログイン] の同意画面と [続行] ボタンの GDPR 準拠の免責条項情報をワンタップで表示。承認済みドメインでホストする必要があります。
8. アプリの利用規約のリンク（省略可）: [Google でログイン] の同意画面と [続行] ボタンの GDPR 準拠の免責条項情報をワンタップで表示します。承認済みドメインでホストする必要があります。
図 1. ワンタップ UI に表示される OAuth 同意画面フィールド
適格性確認の [ステータス] で、申請内容を確認する必要がある場合は、[確認用に送信] ボタンをクリックして申請フォームを送信します。詳しくは、OAuth 検証の要件をご覧ください。

コンテンツセキュリティポリシー

オプションですが、アプリを保護し、クロスサイトスクリプティング（XSS）攻撃を防ぐためにコンテンツセキュリティポリシーを使用することをおすすめします。詳細については、CSP の概要と CSP と XSS をご覧ください。

コンテンツセキュリティポリシーには、connect-src、frame-src、script-src、style-src などのディレクティブが 1 つ以上含まれている場合があります。

CSP に含まれているもの:

connect-src ディレクティブ。https://accounts.google.com/gsi/ を追加して、Google Identity Services サーバーサイドエンドポイントの親 URL をページが読み込めるようにします。
frame-src ディレクティブ: https://accounts.google.com/gsi/ を追加して、One Tap and Google ログインボタンの親 URL の親 URL を許可します。
script-src ディレクティブ。https://accounts.google.com/gsi/client を追加して、Google Identity Services JavaScript ライブラリの URL を許可します。
style-src ディレクティブを使用して、Google Identity Services スタイルシートの URL を許可する https://accounts.google.com/gsi/style を追加します。

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 をポップアップウィンドウで適切に動作させるには、HTTP Cross-Origin-Opener-Policy レスポンスヘッダーを same-origin に設定しないでください。このようにすると、ウィンドウ間の通信が中断され、空白のポップアップウィンドウまたは同様のバグが発生します。

「Google でログイン」ボタンや Google One タップが表示されるページの Cross-Origin-Opener-Policy ヘッダーには same-origin-allow-popups 値が推奨されます。