設定

ウェブサイトに「Google でログイン」ボタンまたはワンタップと自動ログインのプロンプトを追加するには、まず次の操作を行う必要があります。

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

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

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

  1. [クライアント] ページ を Google Cloud コンソールで開きます。
  2. Cloud コンソール プロジェクトを作成または選択します。「Google でログイン」ボタンまたは Google ワンタップのプロジェクトがすでにある場合は、既存のプロジェクトとウェブ クライアント 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 でログイン」とワンタップ認証には、同意画面が含まれています。この画面では、データへのアクセスをリクエストしているアプリケーション、リクエストされるデータの種類、適用される規約がユーザーに通知されます。

  1. Cloud コンソールの [Google 認証プラットフォーム] セクションの [ブランディング] ページを開きます。
  2. プロンプトが表示されたら、作成したプロジェクトを選択します。

  3. [ブランディング] ページで、フォームに記入して [保存] ボタンをクリックします。

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

    2. アプリケーション ロゴ: この画像は同意画面に表示され、ユーザーがアプリを認識するのに役立ちます。ロゴは「Google でログイン」の同意画面とアカウント設定に表示されますが、ワンタップ ダイアログには表示されません。

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

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

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

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

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

  4. [データアクセス] ページに移動して、 アプリのスコープを構成します。

    1. Google API のスコープ: スコープを使用すると、アプリケーションが ユーザーのプライベート データにアクセスできます。認証には、デフォルトのスコープ（email, profile, openid）で十分です。機密性の高い スコープを追加する必要はありません。一般的に、スコープは事前にリクエストするのではなく、アクセスが必要になったときに段階的にリクエストすることが効果的な手法です。

  5. [検証ステータス] を確認します。アプリケーションの検証が必要な場合は、[検証のために送信] ボタンをクリックして、検証のためにアプリケーションを送信します。詳しくは、 OAuth の検証要件 をご覧ください。

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

FedCM を使用したワンタップ

FedCM を使用して Chrome ワンタップに表示される OAuth 同意設定

Chrome でユーザーの同意を得る際に、最上位の承認済みドメイン が表示されます。クロスオリジンで同じサイトの iframe でワンタップを使用する方法のみがサポートされています。

FedCM を使用しないワンタップ

ワンタップに表示される OAuth 同意設定

ユーザーの同意を得る際にアプリケーション名 が表示されます。

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

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

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

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

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

ライブラリでサポートされている メソッドとプロパティのリストについては、HTML と 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 ワンタップでポップアップを正常に作成するには、 Cross-Origin-Opener-Policy（COOP）の変更が必要になる場合があります。

FedCM が有効になっている場合、ブラウザはポップアップを直接レンダリングするため、変更 は必要ありません。

ただし、FedCM が無効になっている場合は、COOP ヘッダーを次のように設定します。

  • same-origin に設定する
  • same-origin-allow-popups を含める

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