ウェブサイトに「Google でログイン」、「ワンタップ」、または「自動ログイン」を追加する前に、OAuth の設定を行い、必要に応じてサイトのコンテンツ セキュリティ ポリシーを設定します。
Google API のクライアント ID を取得する
ウェブサイトで「Google でログイン」を有効にするには、まず Google API クライアント ID。そのための手順は次のとおりです。
- Google Cloud コンソールの [認証情報] ページを開きます。 Google API コンソール。
- Google API プロジェクトを作成または選択します。Cloud Shell 用のプロジェクトがすでに [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 デベロッパー コンソールの [API とサービス] セクションの [OAuth 同意画面] ページを開きます。
- プロンプトが表示されたら、作成したプロジェクトを選択します。
OAuth 同意画面フォームに入力し、[保存] をクリックします。 ] ボタンを離します。
アプリケーション名: 同意を求めるアプリケーションの名前。名前は、アプリケーションを正確に反映し、ユーザーが他の場所で目にするアプリケーション名と一致している必要があります。
アプリケーションのロゴ: この画像は、次の目的のために同意画面に表示されます。 アプリを見つけてもらいやすくなりますロゴが「Google でログイン」に表示されます 同意画面とアカウント設定に表示されますが、ワンタップ ダイアログには表示されません。
サポートメール: ユーザー サポートと G に対する同意画面に表示されます。 ユーザーによるアプリケーションへのアクセスを評価するスイート管理者。 このメールアドレスは、「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。
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 を一覧表示しないでください。これにより、
エラーが発生することがあります。たとえば、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を含めます。
適切なヘッダーを設定しないと、ウィンドウ間の通信が切断され、 空白のポップアップ ウィンドウが表示される。 検出できます。