FedCM に移行する

このガイドでは、Federated Credentials Management API（FedCM）で導入されたウェブ アプリケーションの変更点について説明します。

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

概要

ウェブ版プライバシー サンドボックスと Chrome によるウェブからのサードパーティ Cookie の削除により、Google Identity Services とユーザー ログインに大幅な変更が加えられます。

FedCM を使用すると、サードパーティ Cookie を使用することなく、より非公開のログインフローが可能になります。ブラウザはユーザー設定を制御し、ユーザー プロンプトを表示し、明示的なユーザーの同意が得られた後にのみ Google などの ID プロバイダと通信します。

ほとんどのウェブサイトでは、Google Identity Services JavaScript ライブラリの下位互換性のある更新によりシームレスに移行が行われます。

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

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

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

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

  1. サードパーティ Cookie の制限が 2024 年第 3 四半期に 100% に引き上げられるまでは、FedCM の自動ログインではリピーターの再確認が不要になります。ユーザーが FedCM UI で再確認した場合、この再確認は 3PCD 後の時代のユーザー操作の要件にカウントされます。

  2. サードパーティ Cookie が現在ユーザーによって手動で制限されている場合、または今後の Chrome ではデフォルトで、FedCM の自動ログインによって再確認ステータスが確認されます。

この変更に伴い、自動ログインのコンバージョン率の中断を軽減するために、すべての自動ログイン デベロッパーにできるだけ早く FedCM に移行することをおすすめします。

自動ログインフローの場合、古い Chrome（M121 より前）では、ウェブサイトで FedCM をオプトインしても、GIS JavaScript によって FedCM がトリガーされることはありません。

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

FedCM を使用した場合と FedCM を使用しない場合のワンタップ エクスペリエンスは似ていますが、違いはわずかです。

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

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

FedCM の使用 FedCM なし
FedCM を使用した単一セッションの新規ユーザー FedCM を使用しない単一セッションの新規ユーザー

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

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

FedCM の使用 FedCM なし
FedCM を使用した単一セッションのリピーター ジャーニー（自動ログインを無効にした場合） FedCM を使用しない単一セッションのリピーター ジャーニー（自動ログインが無効になっている）

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

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

FedCM の使用 FedCM なし
FedCM を使用した単一セッションのリピーター ジャーニー（自動ログインが有効） FedCM を使用しない単一セッションのリピーター ジャーニー（自動ログインが有効な場合）

複数セッション

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

FedCM の使用 FedCM なし
FedCM を使用するマルチセッション ユーザー FedCM を使用しないマルチセッション ユーザー

始める前に

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

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

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

  • Chrome ブラウザのバージョンが 119 以前の場合は、chrome://flags を開いて試験運用版の FedCmWithoutThirdPartyCookies 機能を有効にします。この手順は Chrome ブラウザ バージョン 120 以降では必要ありません。

ウェブアプリを移行する

FedCM を有効にし、移行による影響を評価し、必要に応じて既存のウェブ アプリケーションに変更を加えるには、次の手順を行います。

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

2. コード内で isDisplayMoment()、isDisplayed()、isNotDisplayed()、getNotDisplayedReason() の各メソッドを削除してください。

ユーザーのプライバシーを向上させるため、google.accounts.id.prompt コールバックは PromptMomentNotication オブジェクトで表示時点の通知を返さなくなりました。表示モーメント関連のメソッドに依存するコードをすべて削除します。isDisplayMoment()、isDisplayed()、isNotDisplayed()、getNotDisplayedReason() の各メソッドです。

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

スキップの瞬間（isSkippedMoment()）は、引き続き PromptMomentNotication オブジェクトの google.accounts.id.prompt コールバックから呼び出されますが、詳細な理由は示されません。getSkippedReason() メソッドに依存するコードをコードから削除します。

FedCM が有効になっている場合、閉じられた瞬間の通知 isDismissedMoment() と関連する詳細な理由メソッド getDismissedReason() は変更されません。

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

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

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

ユーザー プロンプトのサイズと位置はブラウザが制御します。個々のページのレイアウトによっては、一部のコンテンツがパソコン上でワンタップでカスタムの位置として重ねられる場合があります（スタイル属性、data-prompt_parent_id、intermediate_iframes、カスタマイズした iframe、その他のクリエイティブな方法など）。

ページ レイアウトを変更して、重要な情報が隠れている場合のユーザー エクスペリエンスを改善する。ワンタップ プロンプトがデフォルトの位置にあると思っても、そのプロンプトを中心に UX を作成しないでください。FedCM API はブラウザを仲介するため、ブラウザ ベンダーによってプロンプトの位置が若干異なる場合があります。

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

iframe の origin が親オリジンと完全には同一でない場合、その iframe はクロスオリジンと見なされます。次に例を示します。

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

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

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

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

    別の iframe を含む iframe をアプリで使用する場合は、すべてのサブ iframe を含むすべての iframe に属性を追加する必要があります。

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

  • 上部のドキュメント（https://www.example.uk）には、「iframe A」という名前の iframe があり、ページ（https://logins.example.com）が埋め込まれています。

  • この埋め込みページ（https://logins.example.com）には「iframe B」という iframe があり、さらにワンタップをホストするページ（https://onetap.example2.com）が埋め込まれています。

    ワンタップを適切に表示するには、iframe A タグと iframe B タグの両方に属性を追加する必要があります。

    ワンタップ プロンプトが表示されない問い合わせに準備する。 オリジンが異なる他のサイトでは、ワンタップをホストするページが iframe 内に埋め込まれている場合があります。エンドユーザーや他のサイト所有者から One Tap が表示されないことに関連するサポート チケットが増加する可能性があります。ページを更新できるのはサイト所有者だけですが、次の方法で影響を軽減できます。

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

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

  • この変更についてサポートチームに知らせて、お問い合わせへの対応に備えましょう。

  • FedCM の円滑な移行のため、影響を受けるパートナー、お客様、サイト所有者に事前に連絡してください。

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

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

  • ウェブサイトで CSP が使用されていない場合は、変更する必要はありません。

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

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

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 アカウントを使用する必要があります。

便利なリソース

プライバシー サンドボックス分析ツール（PSAT）は、デベロッパーがサードパーティ Cookie のサポート終了と代替 API を導入する際に役立つ特別な機能を備えた Chrome DevTools の拡張機能です。このツールは、影響を受ける機能がないかサイトをスキャンすることで、推奨される変更のリストを提供します。