設定

ウェブサイトに [Google でログイン] ボタンやワンタップと自動ログインのメッセージを追加するには、まず以下を行う必要があります。

  1. OAuth 2.0 クライアント ID を取得する
  2. OAuth のブランディングと設定を構成する
  3. Google Identity Services クライアント ライブラリを読み込み、
  4. 必要に応じてコンテンツ セキュリティ ポリシーを設定し、
  5. クロスオリジンのオープナー ポリシーを更新

Google API クライアント ID を取得する

ウェブサイトで Google Identity Services を有効にするには、まず Google API クライアント ID を設定する必要があります。そのための手順は次のとおりです。

  1. の を開きます。
  2. プロジェクトを作成または選択します。「Google でログイン」ボタンまたは Google One Tap のプロジェクトがすでにある場合は、既存のプロジェクトとウェブ クライアント ID を使用します。本番環境アプリケーションを作成する場合は、複数のプロジェクトが必要になる場合があります。管理するプロジェクトごとに、このセクションの残りの手順を繰り返します。
  3. [クライアントを作成] をクリックし、[アプリケーションの種類] で [ウェブ アプリケーション] を選択して、新しいクライアント ID を作成します。既存のクライアント ID を使用するには、[ウェブ アプリケーション] のいずれかを選択します。

  4. ウェブサイトの URI を [承認済みの JavaScript 生成元] に追加します。URI には、スキームと完全修飾ホスト名のみが含まれます。例: https://www.example.com

  5. 必要に応じて、JavaScript コールバックではなく、ホストするエンドポイントへのリダイレクトを使用して認証情報を返すことができます。その場合は、リダイレクト URI を [承認済みのリダイレクト URI] に追加します。リダイレクト URI にはスキーム、完全修飾ホスト名、パスが含まれ、リダイレクト URI の検証ルールに準拠している必要があります。例: https://www.example.com/auth-receiver

data-client_id フィールドまたは client_id フィールドを使用して、ウェブアプリにクライアント ID を含めます。

Google でログインと One Tap 認証の両方に同意画面が含まれており、データへのアクセスをリクエストするアプリ、リクエストされるデータの種類、適用される利用規約がユーザーに示されます。

  1. の [Google Auth Platform] セクションの を開きます。
  2. プロンプトが表示されたら、作成したプロジェクトを選択します。

  3. [] でフォームに記入し、[保存] ボタンをクリックします。

    1. アプリケーション名: 同意を求めるアプリケーションの名前。名前はアプリを正確に反映し、ユーザーが他の場所で目にするアプリ名と整合している必要があります。

    2. アプリのロゴ: この画像は、ユーザーがアプリを認識できるように同意画面に表示されます。ロゴは、[Google でログイン] の同意画面とアカウント設定に表示されますが、ワンタップ ダイアログには表示されません。

    3. サポート用メール: ユーザー サポートの同意画面と、ユーザーのアプリケーションへのアクセスを評価する G Suite 管理者に表示されます。このメールアドレスは、ユーザーがアプリ名をクリックしたときに、[Google でログイン] の同意画面に表示されます。

    4. 承認済みドメイン: デベロッパーとユーザーを保護するために、Google では、OAuth を使用して認証するアプリのみに承認済みドメインの使用を許可しています。アプリのリンクは、承認済みドメインでホストされている必要があります。詳細

    5. アプリのホームページへのリンク: [Google でログイン] の同意画面と、ワンタップによる GDPR 準拠の免責条項情報の [… として続行] ボタンの下に表示されます。承認済みドメインでホストされている必要があります。

    6. アプリケーションのプライバシー ポリシーへのリンク: [Google でログイン] の同意画面と、ワンタップによる GDPR 準拠の免責条項情報の [続行] ボタンの下に表示されます。承認済みドメインでホストされている必要があります。

    7. アプリケーション利用規約のリンク（省略可）: [Google でログイン] の同意画面と、ワンタップによる GDPR 準拠の免責条項情報の [このユーザーとして続行] ボタンの下に表示されます。承認済みドメインでホストされている必要があります。

  4. に移動して、アプリのスコープを構成します。

    1. Google API のスコープ: スコープを使用すると、アプリはユーザーの非公開データにアクセスできます。認証には、デフォルトのスコープ（メール、プロフィール、openid）で十分です。機密性の高いスコープを追加する必要はありません。一般的に、事前にではなく、アクセスが必要なときにスコープを段階的にリクエストすることをおすすめします。

  5. [確認ステータス] を確認します。申請が確認を必要としている場合は、[確認のために送信] ボタンをクリックして確認のために申請を送信します。詳しくは、OAuth の確認要件をご覧ください。

ログイン時の OAuth 設定の表示

FedCM を使用したワンタップ

FedCM を使用した Chrome One Tap に表示される OAuth 同意設定

トップレベルの承認済みドメインは、Chrome でユーザーの同意を求める際に表示されます。クロスオリジンの同一サイト iframe でのみワンタップを使用する方法は、サポートされている方法です。

FedCM を使用しない One Tap

One Tap に表示される OAuth 同意設定

アプリケーション名は、ユーザーの同意時に表示されます。

図 1. Chrome のワンタップによって表示される OAuth 同意設定。

クライアント ライブラリを読み込む

ユーザーがログインする可能性のあるページには、必ず Google Identity Services クライアント ライブラリを読み込みます。次のコード スニペットを使用します。

<script src="https://accounts.google.com/gsi/client" async></script>

async 属性を使用してスクリプトを読み込むと、ページの読み込み速度を最適化できます。

ライブラリがサポートするメソッドとプロパティの一覧については、HTML API リファレンスと JavaScript API リファレンスをご覧ください。

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

アプリを保護し、クロスサイト スクリプティング（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 を含めます。

適切なヘッダーを設定しないと、ウィンドウ間の通信が中断され、空のポップアップ ウィンドウなどのバグが発生します。