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