FedCM API を使用した Google ログイン

<ph type="x-smartling-placeholder">

このガイドでは、サードパーティ Cookie の廃止が Google ログイン プラットフォーム ライブラリ。トピックには、タイムライン、 下位互換性のあるライブラリの更新に関する次のステップ: 影響評価を実施し、ユーザーのログインが引き続き 想定どおりに機能するかどうかと、必要に応じてウェブアプリを更新する手順を確認できます。 移行期間を管理するオプションとサポートを利用する方法 含まれます。

ライブラリのステータス

新しいウェブアプリでは、サポートが終了した Google ログイン プラットフォームを使用できなくなります ライブラリを使用するアプリは別途通知があるまで続行できます。 ライブラリの最終廃止日（提供終了）は確定していません。 詳しくは、サポート終了と廃止をご覧ください。

Chrome のプライバシー サンドボックスのサードパーティ Cookie のブロックがウェブアプリに影響する Google ログイン プラットフォーム ライブラリを使用するアプリです。既存の動作を維持するには、 サードパーティ Cookie を必要としないため、下位互換性のある更新が このライブラリに FedCM API を追加します。ほとんどの変更はシームレスに行われますが ユーザーの同意プロンプト、iframe permissions-policy、コンテンツ セキュリティ ポリシー（CSP）です。これらの変更 ウェブアプリに影響する可能性があり、アプリケーションのコードとサイトの変更が必要になる場合があります できます。

移行期間中は、構成オプションで ユーザーのログイン時に FedCM API が使用されます。

タイムライン

最終更新: 2024 年 7 月

ユーザーのログイン動作に影響する日付と変更は次のとおりです。

• 2023 年 3 月: Google ログイン プラットフォームのサポートを終了 ライブラリです。
• 2024 年 1 月: Chrome でサードパーティ Cookie（Google ログイン）の 1% をブロック プラットフォーム ライブラリにサードパーティ Cookie からの一時的な例外が付与される デプリケーション トライアルによるブロック。
• 2024 年 7 月の移行期間開始、Google ログイン プラットフォーム ライブラリ FedCM API のサポートが追加されました。デフォルトでは のユーザーが FedCM を使用してログイン リクエストを行った割合。ウェブアプリは use_fedcm パラメータでこの動作を明示的にオーバーライドします。
• Google による FedCM API の必須導入（日付未定） ログイン プラットフォーム ライブラリ（その後 use_fedcm パラメータが無視される） すべてのユーザー ログイン リクエストで FedCM が使用されます。

FedCM API への移行後、Google ログイン プラットフォーム ライブラリは サードパーティ Cookie のブロックの 影響を受ける場合がありますサードパーティ Cookie の更新のため Chrome のプライバシー サンドボックスのタイムラインをご覧ください。

次のステップ

次の 3 つのオプションから選択できます。

1. 影響評価を実施し、必要に応じてウェブアプリを更新します。 このアプローチでは、ウェブアプリの変更が必要な機能が あります。手順については、このガイドの次のセクションをご覧ください。
2. Google Identity Services（GIS）ライブラリに移動します。最新のプラットフォームに移行し、 ログイン ライブラリを使用することを強くおすすめします。手順 こちらの手順をご覧ください。
3. 何もしない。ウェブアプリは、 Google ログイン ライブラリは、ユーザー ログイン用の FedCM API に移行します。これが 作業は最小限ですが、ユーザーがログインできなくなるリスクが 説明します。

影響評価の実施

以下の手順に沿って、ウェブアプリをシームレスに更新できるかどうかを判断してください 更新や更新が必要になった場合に Google ログイン プラットフォーム ライブラリが完全に有効になっているにもかかわらず、ユーザーがログインできない FedCM API を採用しています。

セットアップ

ブラウザ API と最新バージョンの Google ログイン プラットフォーム ライブラリは、 ユーザー ログイン時に FedCM を使用するために必要です。

先に進む前に:

• パソコン版 Chrome を最新バージョンに更新します。Chrome for Android にはリリース M128 以降が必要であり、それより前のバージョンではテストできません。

• chrome://flags を開き、次の機能をこれらの値に設定します。

  • #fedcm-authz 有効（サイトでコンテンツ セキュリティ ポリシーを使用している場合） https://accounts.google.com/gsi/ottoken をブロックします。
  • #tracking-protection-3pcd 有効
  • #third-party-cookie-deprecation-trial 無効
  • #tpcd-metadata-grants 無効
  • #tpcd-heuristics-grants が無効

  Chrome を再起動します。

• Google ログイン プラットフォームを初期化するときに use_fedcm を true に設定する ライブラリにコードをバインドします。通常、初期化は次のようになります。

  • gapi.client.init({use_fedcm: true})、または
  • gapi.auth2.init({use_fedcm: true})、または
  • gapi.auth2.authorize({use_fedcm: true})。

• Google ログイン プラットフォーム ライブラリのキャッシュ バージョンを無効にする。 通常、ライブラリの最新バージョンは最新であるため、このステップは不要です。 api.js、client.js、または <script src> タグ内の platform.js（リクエストではこれらのいずれかを使用できます） ライブラリのバンドル名）が含まれます。

• OAuth クライアント ID の OAuth 設定を確認します。

  1. Google API Consoleの [認証情報] ページを開きます

  2. ウェブサイトの URI が 承認済みの JavaScript 生成元。URI にはスキーマと 完全修飾ホスト名のみを使用できます。例: https://www.example.com

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

テスト

[設定] の手順に沿って操作した場合:

• Chrome の既存のシークレット ウィンドウをすべて閉じ、新しいシークレット ウィンドウを開きます。 クリックします。この操作を行うと、キャッシュに保存されたコンテンツや Cookie がすべて削除されます。
• ユーザーのログインページを読み込み、ログインを試みます。

• このガイドのこれらのセクションの手順に沿って、 既知の問題の修正にお役立てください

  • Google ログイン ライブラリのリクエストを探す
  • iframe のアクセス許可ポリシーを確認する
  • コンテンツ セキュリティ ポリシーを確認する
  • ユーザー プロンプトの変更を確認する

• コンソールで、Google ログインに関連するエラーや警告がないか確認します。 ライブラリです。

• エラーが発生しなくなって正常にログインできるようになるまで、この手順を繰り返します。 ログインの成功は、 BasicProfile.getEmail() によって、ユーザーのメールアドレスと、 GoogleUser.isSignedIn() は True です。

Google ログイン ライブラリのリクエストを見つける

permissions-policy とコンテンツ セキュリティ ポリシーの変更 Google ログイン プラットフォーム ライブラリのリクエストを調べて、必要な認証情報を取得する必要があります。 そのためには、ライブラリの名前と作成元を使用してリクエストを見つけます。

• Chrome で、DevTools の [ネットワーク] パネルを開き、ページを再読み込みします。
• [Domain] 列と [Name] 列の値を使用してライブラリを見つけます。 request: <ph type="x-smartling-placeholder">
  </ph>
  • ドメインは apis.google.com で、
  • 名前は、api.js、client.js、platform.js のいずれかです。具体的な Name の値は、ドキュメントで要求するライブラリ バンドルによって異なります。

たとえば、[ドメイン] 列で apis.google.com でフィルタします。 [名前] 列に platform.js を入力します。

iframe 権限ポリシーを確認する

サイトでクロスオリジン内部で Google ログイン プラットフォーム ライブラリが使用されている場合 使用できます。その場合はアップデートが必要です。

「Google ログイン ライブラリを見つける」リクエストを行った後、 DevTools で Google ログイン ライブラリのリクエストを選択します。 [Network] パネルで、Sec-Fetch-Site ヘッダーを見つけます。 [Headers] タブの [Request Headers] セクションヘッダーの値が 次のとおりです。

• same-site または same-origin の場合、クロスオリジン ポリシーは適用されず、 変更が必要です。
• iframe を使用している場合は、cross-origin の変更が必要になることがあります。

iframe が存在するかどうかを確認するには:

• Chrome DevTools の [Elements] パネルを選択します。
• Ctrl+F キーを使用して、ドキュメント内の iframe を見つけます。

iframe が見つかった場合は、ドキュメントを調べて gapi.auth2 関数または script src ディレクティブを使用して Google ログイン ライブラリを読み込む 追加します。上記が該当する場合は、次の手順を実施してください。

• allow="identity-credentials-get" 権限ポリシーを 指定します。

ドキュメント内の iframe ごとに、この手順を繰り返します。iframe はネストできるので 周囲のすべての親 iframe に allow ディレクティブを追加してください。

コンテンツ セキュリティ ポリシーを確認する

サイトでコンテンツ セキュリティ ポリシーを使用している場合は、CSP を次のように更新する必要があります。 Google ログイン ライブラリの使用を許可する。

「Google ログイン ライブラリを見つける」リクエストを行った後、 DevTools で Google ログイン ライブラリのリクエストを選択します。 [Network] パネルで、Content-Security-Policy ヘッダーを見つけます。 [Headers] タブの [Response Headers] セクション。

ヘッダーが見つからない場合、変更する必要はありません。それ以外の場合は、以下のいずれかが CSP ディレクティブは CSP ヘッダーで定義されており、次の方法で更新します。

• https://apis.google.com/js/ さん、https://accounts.google.com/gsi/ さん、 https://acounts.google.com/o/fedcm/ を任意の connect-src にマッピング、 default-src または frame-src ディレクティブ。

• https://apis.google.com/js/bundle-name.js への script-src への追加 指定します。bundle-name.js は、api.js、client.js、または platform.jsドキュメント バンドルによってリクエストされるライブラリ バンドルに基づいて決定されます。

ユーザー プロンプトの変更を確認する

ユーザー プロンプトの動作が一部異なるため、FedCM ではモーダル ダイアログが追加されます。 ユーザー アクティベーションの要件を更新します。

モーダル ダイアログ

サイトのレイアウトを調べて、基盤となるコンテンツがコンテンツにアクセスできることを確認する ブラウザのモーダル ダイアログによって安全に重ねて一時的に隠すことができます。もし 一部の要素のレイアウトや位置の調整が必要になることもあります。 確認できます

ユーザーのアクティベーション

FedCM では、ユーザー アクティベーションの要件が更新されています。ボタンを押すか、 リンクのクリックは、サードパーティのオリジンによる ネットワーク リクエストの実行やデータの保存に使用できます。FedCM では、ブラウザは 次の場合にユーザーが同意します。

• ユーザーが最初に新しいブラウザ インスタンスを使用してウェブアプリにログインする
• GoogleAuth.signIn が呼び出される。

現在、ユーザーが以前にウェブサイトにログインしたことがある場合は、 Google ログイン ライブラリを初期化する際のユーザーのログイン情報 （それ以上のユーザー操作なしで gapi.auth2.init を使用）

これは、サードパーティ Cookie が廃止されたため、 ユーザーが最初に FedCM ログインフローを 1 回以上行っていること。

FedCM にオプトインして GoogleAuth.signIn を呼び出すと、次回に同じ ユーザーがウェブサイトにアクセスすると、gapi.auth2.init がユーザーのログイン情報を取得できます ユーザーの操作なしで初期化時に返される情報。

一般的なユースケース

Google ログイン ライブラリのデベロッパー向けドキュメントにはガイドとコードが掲載されています 一般的なユースケース向けのサンプルをご用意しています。このセクションでは、FedCM が組織にもたらす影響について 確認します。

• ウェブアプリへの Google ログインの統合

  このdemoでは、<div> 要素とクラスによってボタンがレンダリングされます。 すでにログインしているユーザーについては、ページ onload イベントでユーザーが返されます。 認証情報を取得できます。ログインして新しいウェブサイトを設定するには、ユーザーの操作が必要 あります。

  ライブラリの初期化は、以下を呼び出す g-signin2 クラスによって行われます。 gapi.load と gapi.auth2.init。

  ユーザー操作（<div> 要素の onclick イベント）が auth2.signIn を呼び出す （ログイン時）または auth2.signOut（ログアウト時）に設定します。

• カスタムの Google ログインボタンを作成する

  デモ 1 では、カスタム属性を使用してアプリのデザインを ログインボタン。すでにログインしているユーザーについては、ページの onload イベント。 ユーザー認証情報が返されます。ログインやユーザーの操作が要求される 確立します

  ライブラリの初期化は、変数の onload イベントによって行われます。 platform.js ライブラリと、ボタンは gapi.signin2.render で表示されます。

  ユーザーがログインボタンを押すと、auth2.signIn が呼び出されます。

  デモ 2 では、<div> 要素、CSS スタイル、カスタム グラフィックが ログインボタンの外観を制御するために使用します。ユーザー操作: 新しいセッションを確立するために必要です。

  ドキュメントの読み込み時に start 関数を使用してライブラリの初期化を行う gapi.load、gapi.auth2.init、 gapi.auth2.attachClickHandler。

  ユーザー操作（<div> 要素の onclick イベント）が auth2.signIn を呼び出す auth2.attachClickHandler をログイン時またはauth2.signOut を使用して あります。

• ユーザーのセッション状態のモニタリング

  このdemoでは、ボタンの押下を使用してユーザーのログインとログアウトを行います。 ログインして新しいセッションを確立するには、ユーザーの操作が必要です。

  ライブラリの初期化は、gapi.load を直接呼び出します。 gapi.auth2.init、その後は gapi.auth2.attachClickHandler() platform.js は script src を使用して読み込まれます。

  ユーザー操作（<div> 要素の onclick イベント）が auth2.signIn を呼び出す auth2.attachClickHandler をログイン時またはauth2.signOut を使用して あります。

• 追加の権限をリクエストする

  このdemoでは、ボタンの押下を使用して追加の OAuth 2.0 をリクエストします 新しいアクセス トークンを取得します。すでにログインしているユーザーについては、 ページ onload イベントは、ユーザー認証情報を返します。ユーザーの操作が必要です ログインして新しいセッションを確立します。

  ライブラリの初期化は、対象のイベントの onload イベントによって行われます。 gapi.signin2.render への呼び出しによる platform.js ライブラリ。

  ユーザーが <button> 要素をクリックすると、次のリクエストがトリガーされます。 googleUser.grant または auth2.signOut を使用した追加の OAuth 2.0 スコープ 表示されます。

• リスナーを使用した Google ログインの統合

  このdemoでは、すでにログインしているユーザーに対するページの onload イベント ユーザー認証情報が返されます。ログインやユーザーの操作が要求される 確立します

  ドキュメントの読み込み時に start 関数を使用してライブラリの初期化を行う gapi.load、gapi.auth2.init、 gapi.auth2.attachClickHandler。次は、auth2.isSignedIn.listen と auth2.currentUser.listen は、以下に対する変更の通知を設定するために使用されます。 維持します。最後に、auth2.SignIn が呼び出されて、サービス アカウントの できます。

  ユーザー操作（<div> 要素の onclick イベント）が auth2.signIn を呼び出す auth2.attachClickHandler をログイン時またはauth2.signOut を使用して あります。

• サーバーサイド アプリ向け Google ログイン

  このdemoでは、ユーザー操作を使用して OAuth 2.0 認証コードをリクエストします JS コールバックが AJAX 呼び出しでバックエンドにレスポンスを送信する 使用します。

  ライブラリの初期化は、platform.js の onload イベントを使用して行います。 このライブラリは start 関数を使用して gapi.load を呼び出し、 gapi.auth2.init。

  ユーザーが <button> 要素をクリックすると、次のリクエストがトリガーされます。 auth2.grantOfflineAccess を呼び出して認証コードを取得します。

• クロス プラットフォーム SSO

  FedCM ではブラウザ インスタンスごとに同意が必要（Android ユーザーも含む） ログインしている場合は、1 回限りの同意が必要です。

移行期間を管理する

移行期間中は、一部のログイン ユーザーが FedCM（ 正確な割合は変動し、時間とともに変化する可能性があります。デフォルトでは FedCM を使用するログイン リクエストの数。ただし、 移行期間中に FedCM を使用していました。移行期間の終了時 FedCM は必須となり、すべてのログイン リクエストに使用されます。

オプトインを選択すると、ユーザーは FedCM ログインフローに進み、 オプトアウトを選択すると、ユーザーは既存のログインフローに送られます。この動作は、 use_fedcm パラメータで制御します。

オプトイン

お使いのアカウントへのログイン試行のすべてまたは一部を FedCM API を使用しています。そのためには、初期化時に use_fedcm を true に設定します。 使用します。この場合、ユーザーのログイン リクエストには FedCM API が使用されます。

オプトアウト

移行期間中は、一定の割合のユーザー ログインがサイトに試行されます デフォルトで FedCM API を使用します変更にさらに時間が必要な場合は、 FedCM API の使用を一時的にオプトアウトできます。そのためには、 プラットフォーム ライブラリの初期化時に use_fedcm を false に設定。ユーザーのログイン FedCM API を使用しません。

必須の導入後は、use_fedcm の設定はプロバイダによって無視されます。 Google ログイン プラットフォーム ライブラリ。

ヘルプ

google-signin タグを使用して StackOverflow で検索または質問します。