ウェブサイトに「Google でログイン」、「ワンタップ」、または自動ログインを追加する前に、OAuth の設定を設定し、必要に応じてサイトのコンテンツ セキュリティ ポリシーを設定します。
Google API クライアント ID を取得する
ウェブサイトで「Google でログイン」を有効にするには、まず Google API クライアント ID を設定する必要があります。そのための手順は次のとおりです。
- Google APIs コンソールの [認証情報] ページを開きます。
- 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 でログインと One Tap 認証の両方に同意画面が含まれており、データへのアクセスをリクエストするアプリ、リクエストされるデータの種類、適用される利用規約がユーザーに示されます。
- Google Developer Console の [API とサービス] セクションにある [OAuth 同意画面] ページを開きます。
- プロンプトが表示されたら、作成したプロジェクトを選択します。
[OAuth 同意画面] ページでフォームに入力し、[保存] ボタンをクリックします。
アプリケーション名: 同意を求めるアプリケーションの名前。この名前は、アプリケーションを正確に反映し、他の場所でユーザーに表示されるアプリケーション名と一貫している必要があります。
アプリのロゴ: この画像は、ユーザーがアプリを認識できるように同意画面に表示されます。ロゴは、[Google でログイン] の同意画面とアカウント設定に表示されますが、ワンタップ ダイアログには表示されません。
サポート用メール: ユーザー サポートの同意画面と、ユーザーのアプリケーションへのアクセスを評価する G Suite 管理者に表示されます。このメールアドレスは、ユーザーがアプリ名をクリックしたときに、[Google でログイン] の同意画面に表示されます。
Google API のスコープ: スコープを使用すると、アプリケーションがユーザーのプライベート データにアクセスできるようになります。認証にはデフォルトのスコープ（email、profile、openid）で十分です。機密性の高いスコープを追加する必要はありません。通常、事前にではなく、アクセスが必要になったときにスコープを段階的にリクエストすることをおすすめします。詳細
承認済みドメイン: デベロッパーとユーザーを保護するため、Google では OAuth を使用して認証するアプリケーションのみに承認済みドメインの使用を許可しています。アプリのリンクは、承認済みドメインでホストする必要があります。詳細
アプリのホームページへのリンク: [Google でログイン] の同意画面と、ワンタップによる GDPR 準拠の免責条項情報の [… として続行] ボタンの下に表示されます。承認済みドメインでホストされている必要があります。
アプリケーション プライバシー ポリシーのリンク: 「Google でログイン」の同意画面と、[次として続行] ボタンの下に、GDPR 準拠のワンタップの免責条項情報で表示されます。承認済みドメインでホストされている必要があります。
アプリケーション利用規約のリンク（省略可）: 「Google でログイン」の同意画面と、「次のユーザーとして続行」ボタンの下に、ワンタップの 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/を追加して、ワンタップと「Google でログイン」ボタンの 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を含めます。
適切なヘッダーを設定しないと、ウィンドウ間の通信が中断され、空のポップアップ ウィンドウなどのバグが発生します。