FedCM に移行する

このガイドでは、ウェブ アプリケーションに加えられた変更について説明します。 エンコーダとデコーダによって Federated Credentials Management API（FedCM）。

FedCM を有効にすると、ブラウザにユーザー プロンプトが表示され、サードパーティは表示されない Cookie が使用されます。

概要

ウェブ版プライバシー サンドボックス ウェブからのサードパーティ Cookie の削除（Chrome） が大幅に変更されます。

FedCM を使用すると、 制限します。ブラウザがユーザー設定を制御し、ユーザー プロンプトを表示する。 ユーザーが明示的に指定した場合にのみ、Google などの ID プロバイダに連絡します。 できます。

ほとんどのウェブサイトでは、下位互換性により移行がシームレスに の更新を完了しました。

ヒント: Google のテストや Chrome のオリジン トライアルでは、 ウェブサイトにログインするユーザーの合計数が FedCM API を使用する。 具体的な割合は一定ではなく、予告なく変更される場合があります。FedCM 導入前 すべてのログインで必須になる場合は、data-use_fedcm_for_prompt を使用してください。 または use_fedcm_for_prompt をタップしてログインフローを選択します。これにより、 リリース後に、デバッグ、指標の収集、すべてのログインを FedCM に切り替える機能 。

自動ログイン機能に関する最新情報

Google Identity Services の Federated Credential Management（FedCM）ベータ版 2023 年 8 月にリリースされました多くのデベロッパーがこの API をテストし、 貴重なフィードバックが得られます

Google がデベロッパーから聞いた回答の 1 つは、FedCM 自動ログインについてです。 フローユーザー操作の要件です。Chrome では、プライバシー保護を強化するために、ユーザーが次のことを行う必要があります。 各ウェブサイトで Google アカウントを使用してウェブサイトにログインすることを Chrome インスタンス（ユーザーが FedCM より前にウェブサイトを承認していた場合も含む） ロールアウトされます。この再確認は、 ユーザーのログインの意図を示すワンタップ プロンプト。この変更により、 一部のウェブサイトで、自動ログイン コンバージョン率が最初に低下したとき。

最近の M121 では、FedCM 自動ログインに変更が加えられました サポートします。再確認が必要になるのは、サードパーティ Cookie が 制限されています。これは次のことを意味します。

1. サードパーティ Cookie の制限が 100% に達する前に（プライバシー 最新のタイムラインについては、サンドボックスの [ニュースと最新情報] ページを参照） FedCM 自動ログインでは、リピーターによる再確認は必要ありません。 ユーザーが FedCM の UI で再確認すると、この再確認は 3PCD 後のユーザー ジェスチャー要件

2. FedCM 自動ログインは、 現在ユーザーが手動で制限しているか、デフォルトで おすすめします。

この変更に伴い、すべての自動ログイン デベロッパーに FedCM に移行することをおすすめします。 できるだけ早急に対応することをおすすめします。

自動ログイン フローでは、GIS JavaScript が古いデバイスでは FedCM をトリガーしません。 ウェブサイトで FedCM を有効にするよう選択している場合でも、Chrome（M121 より前）に表示されます。

ユーザー ジャーニーの違い

FedCM を使用した場合と使用しない場合のワンタップ エクスペリエンスは、 若干の違いがあります

単一セッションの新規ユーザー

FedCM を使用すると、ワンタップでアプリケーション名ではなくドメイン名が表示されます。

FedCM の使用	FedCM を導入しない場合

1 回のセッションを利用したリピーター（自動ログインが無効になっている場合）

FedCM を使用すると、ワンタップでアプリケーション名ではなくドメイン名が表示されます。

FedCM の使用	FedCM を導入しない場合

単一セッションのリピーター（自動ログインが有効）

FedCM を使用する場合、ユーザーは [X] をクリックして 5 日以内に自動ログインをキャンセルできます。 [Cancel] ボタンはクリックしません。

FedCM の使用	FedCM を導入しない場合

マルチセッション

FedCM を使用すると、ワンタップでアプリケーション名ではなくドメイン名が表示されます。

FedCM の使用	FedCM を導入しない場合

始める前に

ブラウザの設定とバージョンが FedCM API をサポートしていることを確認します。 最新バージョンに更新することをおすすめします。

• FedCM API は Chrome 117 以降で使用できます。

• Chrome で [サードパーティのログイン] の設定が有効になっている。

• Chrome ブラウザのバージョンが 119 以前の場合は、chrome://flags を開きます。 試験運用版の FedCmWithoutThirdPartyCookies 機能を有効にします。このステップ Chrome ブラウザ バージョン 120 以降では不要です。

ウェブアプリを移行する

次の手順に沿って FedCM を有効にし、移行の潜在的な影響を評価して、 必要な場合は、既存のウェブ アプリケーションに変更を加えます。

1. 以下を使用して、初期化時に FedCM を有効にするブール値フラグを追加します。

• HTML の場合は、data-use_fedcm_for_prompt 属性を true に設定します。

• JavaScript の場合は、次のように use_fedcm_for_prompt を true に設定します。 IdConfiguration オブジェクト。

2. コード内の isDisplayMoment()、isDisplayed()、isNotDisplayed()、getNotDisplayedReason() の各メソッドの使用を削除します。

ユーザーのプライバシーを向上させるために、google.accounts.id.prompt コールバックは すべてのディスプレイ モーメントの通知が PromptMomentNotication オブジェクト。依存するコードをすべて削除する ディスプレイ モーメント関連のメソッド。isDisplayMoment()、isDisplayed()、 isNotDisplayed()、getNotDisplayedReason() メソッド。

3. コードから getSkippedReason() メソッドの使用を削除します。

スキップする場面である isSkippedMoment() は、引き続き PromptMomentNotication での google.accounts.id.prompt コールバック 詳細な理由は提供されません。依存するコードをすべて削除する getSkippedReason() メソッドを使用します。

閉じたモーメントの通知 isDismissedMoment()、 関連する詳細な理由メソッド getDismissedReason() は変更されません。 有効になります。

4. data-prompt_parent_id と intermediate_iframes から position スタイル属性を削除します。

ユーザー プロンプトのサイズと位置、カスタムの位置はブラウザが制御 サポートされていません。

5. 必要に応じてページ レイアウトを更新します。

ユーザー プロンプトのサイズと位置はブラウザによって制御されます。影響する要因 一部のコンテンツはカスタム レイアウトとしてオーバーレイされる場合があります。 以下のような方法で、デスクトップのワンタップの位置はサポートされていません。 style 属性、data-prompt_parent_id intermediate_iframes、カスタマイズした iframe、その他のクリエイティブな方法で使用できます。

重要な情報が表示されるときに、ページ レイアウトを変更してユーザー エクスペリエンスを向上させる 見えにくくなります。仮定する場合でも、ワンタップ プロンプトを中心に UX を構築しない デフォルトの位置にあります。FedCM API はブラウザを介したものであるため、 ブラウザ ベンダーによってプロンプトの位置が若干異なる場合があります。 違います。

6. ウェブアプリがクロスオリジンの iframe から One Tap API を呼び出す場合は、allow="identity-credentials-get" 属性を親フレームに追加します。

iframe は次の場合にクロスオリジンと見なされます。 origin は あります。次に例を示します。

• 異なるドメイン: https://example1.com と https://example2.com
• 異なるトップレベル ドメイン: https://example.uk と https://example.jp

• サブドメイン: https://example.com と https://login.example.com

  ユーザーのプライバシーを向上させるため、ワンタップ API をクロスオリジンの iframe から呼び出す場合は、 追加する必要があります allow="identity-credentials-get" 属性をすべての親フレーム iframe タグで指定する必要があります。

  <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>
  

  別の iframe を含む iframe をアプリで使用している場合は、 すべてのサブ iframe を含むすべての iframe に属性が追加されていることを確認します。

  たとえば、次のような時系列でレポート機能を設定したとします。

• 先頭のドキュメント（https://www.example.uk）に「iframe」という名前の iframe が含まれています A」というテキストはページ（https://logins.example.com）を埋め込みます。

• この埋め込みページ（https://logins.example.com）には iframe も含まれています 「iframe B」としますページがさらに埋め込まれている（https://onetap.example2.com） アプリを構築しました

  ワンタップが正しく表示されるようにするには、属性を追加する必要があります。 すべて iframe A タグと iframe B タグの両方に適用されます。

  注: 中間 iframe API は、FedCM のクロスオリジン iframe をサポートしています。 追加の属性は必要ありません。ただし、 別の iframe 内に中間 iframe API を使用する場合は、 すべての親 iframe に allow="identity-credentials-get" 属性を追加します。 FedCM を有効にして、適切な権限ポリシーの設定をテストして確認する あります。

  表示されないワンタップ プロンプトでの問い合わせに対して [Prepare] を行います。 オリジンが異なる他のサイトにワンタップをホストするページが埋め込まれている可能性がある あります。受け取るサポート チケットの数が増える可能性があります エンドユーザーやその他のサイト所有者によるワンタップが表示されないことに関連する問題です。しばらく 更新できるのはサイトのオーナーだけです その場合は 影響を緩和するために

• デベロッパー向けドキュメントを更新し、iframe の設定方法を記載する サイトを適切に呼び出せますドキュメントにこのページへのリンクがあります。

• 必要に応じて、デベロッパー向けのよくある質問のページを更新します。

• サポートチームに今回の変更について通知し、対応に備えます 事前に問い合わせに送る場合があります

• 影響を受けるパートナー、お客様、サイト所有者に事前連絡して、 FedCM へのスムーズな移行。

  注: 問題のページの Chrome にエラー メッセージが表示されます。 ブラウザ デベロッパー ツール コンソール: [GSI_LOGGER]: FedCM get() rejects with NotAllowedError: The 'identity-credentials-get' feature is not enabled in this document.

7. コンテンツ セキュリティ ポリシー（CSP）に以下のディレクティブを追加します。

すべてのウェブサイトが CSP の定義を選択するわけではないため、このステップは省略可能です。

• ウェブサイトで CSP を使用していない場合は、変更の必要はありません。

• CSP が現在のワンタップで機能し、connect-src を使用していない場合は、 frame-src、script-src、style-src、default-src は変更されません 必要ありません。

• それ以外の場合は、こちらのガイドに沿って CSP を設定してください。適切な CSP なし サイトには FedCM One Tap が表示されません。

  注: 問題のページの Chrome にエラー メッセージが表示されます。 ブラウザ デベロッパー ツール コンソール: [GSI_LOGGER]: FedCM get() rejects with NetworkError: Failed to execute 'get' on 'CredentialsContainer': Refused to connect to 'https://accounts.google.com/gsi/fedcm.json' because it violates the document's Content Security Policy.

8. ログインに対する Accelerated Mobile Pages（AMP）サポートを削除します。

AMP へのユーザー ログイン サポートはウェブアプリの GIS のオプション機能 あるかもしれません。その場合は

以下への参照をすべて削除します。

• カスタム要素 amp-onetap-google

• <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>
  

  ログイン リクエストを AMP からウェブサイトの HTML ログインにリダイレクトすることを検討してください できます。関連する Intermediate Iframe Support API は、 影響は受けません。

移行のテストと検証

ここまでの手順に基づいて必要な変更を加えたら、 正常に移行されます。

1. お使いのブラウザが FedCM をサポートしており、Google アカウント セッション。

2. アプリのワンタップ ページに移動します。

3. ワンタップ プロンプトが表示され、基になるメッセージに安全に重ねて表示されることを確認する 説明します。

4. 正しい認証情報がエンドポイントまたはコールバック メソッドに返されることを確認する 。

5. 自動ログインが有効になっている場合は、キャンセルが機能し、問題がないことを確認する 正しい認証情報がエンドポイントまたはコールバック メソッドに返されます。

ワンタップのクールダウン期間

ワンタップ をクリックする プロンプトが閉じ、クールダウン期間に入ります。 ワンタップ プロンプトを一時的に表示しないようにします。Chrome の場合、 クールダウン期間が終了する前にワンタップ プロンプトを再度表示したい場合は、 クールダウン ステータスをリセットするには、アドレスバーの鍵アイコンをクリックして、 [権限をリセット] ボタンをクリックします。

自動ログイン無音期間

FedCM を使用した自動ログインワンタップのテストでは、10 分間 自動ログインを試行するまでの待機期間。消音期間を設定できません リセットできます。10 分ほどお待ちいただくか、別の Google アカウントを使用する必要があります 自動的にログインするようにします。

便利なリソース

Privacy Sandbox Analysis Tool（PSAT）は Chrome DevTools の拡張機能です 特別な機能が組み込まれており、デベロッパーが 代替 API の導入をサポートしています。画像をスキャンして のサイトで、影響を受ける機能を確認し、推奨される変更のリストを提供しています。