このガイドでは、Federated Credentials Management API（FedCM）によってウェブ アプリケーションに導入された変更について説明します。
FedCM が有効になっている場合、ブラウザにユーザー プロンプトが表示され、サードパーティ Cookie は使用されません。
概要
FedCM を使用すると、サードパーティ Cookie を使用せずに、よりプライバシーに配慮したログイン フローを実現できます。ブラウザはユーザー設定を管理し、ユーザー プロンプトを表示します。また、ユーザーの明示的な同意を得た後にのみ、Google などの ID プロバイダに連絡します。
ほとんどのウェブサイトでは、Google Identity Services JavaScript ライブラリの下位互換性のあるアップデートにより、シームレスに移行できます。
自動ログイン機能の更新
Google Identity Services の Federated Credential Management（FedCM）ベータ版は 2023 年 8 月にリリースされました。多くのデベロッパーが API をテストし、貴重なフィードバックを寄せています。
デベロッパーから寄せられた回答の一つは、FedCM 自動ログイン フローのユーザー操作の要件に関するものです。プライバシー保護を強化するため、Chrome では、FedCM のロールアウト前にユーザーがウェブサイトを承認していた場合でも、各 Chrome インスタンスで Google アカウントを使用してウェブサイトにログインすることをユーザーが再度確認する必要があります。この 1 回限りの再確認は、ワンタップ プロンプトを 1 回クリックすることで行われます。これにより、ユーザーがログインする意思があることが示されます。この変更により、一部のウェブサイトで自動ログインのコンバージョン率が最初は低下する可能性があります。
Chrome では最近 M121 で、FedCM の自動ログインフロー UX を変更しました。再確認は、サードパーティ Cookie が制限されている場合にのみ必要です。具体的には、次のようになります。
FedCM の自動ログインでは、再訪問したユーザーに対して再確認を求める必要はありません。ユーザーが FedCM UI で再確認した場合、この再確認は 3PCD 以降のユーザー操作要件にカウントされます。
FedCM 自動ログインでは、サードパーティ Cookie が現在ユーザーによって手動で制限されている場合、または今後の Chrome でデフォルトで制限されている場合に、再確認ステータスを確認します。
この変更に伴い、自動ログイン コンバージョン率への影響を軽減するため、すべての自動ログイン デベロッパーはできる限り早く FedCM に移行することをおすすめします。
自動ログイン フローの場合、ウェブサイトで FedCM を有効にしても、古い Chrome（M121 より前）では GIS JavaScript が FedCM をトリガーしません。
ユーザー ジャーニーの違い
FedCM を使用するワンタップと FedCM を使用しないワンタップの操作は、わずかな違いがあるだけで、基本的には同じです。
シングル セッションの新規ユーザー
FedCM を使用すると、ワンタップではアプリ名ではなく、最上位ドメイン名が表示されます。
| FedCM の使用 | FedCM なし |
|---|---|
|
|
1 セッションのリピーター（自動ログインが無効）
FedCM を使用すると、ワンタップではアプリ名ではなく、最上位ドメイン名が表示されます。
| FedCM の使用 | FedCM なし |
|---|---|
|
|
シングル セッションの再訪ユーザー（自動ログインを有効にしている）
FedCM を使用すると、ユーザーは [キャンセル] ボタンをクリックする代わりに、[X] をクリックして 5 秒以内に自動ログインをキャンセルできます。
| 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 の場合は、
IdConfigurationオブジェクトでuse_fedcm_for_promptをtrueに設定します。
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() は、FedCM が有効になっても変更されません。
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 のオリジンが親オリジンと完全に同じでない場合は、クロスオリジンと見なされます。次に例を示します。
- 異なるドメイン:
https://example1.comとhttps://example2.com - 異なるトップレベル ドメイン:
https://example.ukとhttps://example.jp - サブドメイン:
https://example.comとhttps://login.example.com
クロスオリジン iframe でワンタップを使用すると、ユーザーが混乱する可能性があります。認証情報の収集を防ぐためのセキュリティ対策として、ワンタップ プロンプトには iframe ではなく、トップレベル ドメインの名前が表示されます。ただし、ID トークンは iframe のオリジンに発行されます。詳しくは、こちらの GitHub の問題をご覧ください。
この不一致は誤解を招く可能性があるため、クロスオリジンの iframe でのみワンタップを使用する方法はサポート対象です。同一サイトの iframe でのみワンタップを使用する方法はサポート対象外です。たとえば、トップレベル ドメイン https://www.example.com のページで iframe を使用して、https://login.example.com にワンタップによるページを埋め込む場合です。ワンタップ プロンプトに「google.com で example.com にログイン」と表示されます。
ドメインが異なる場合など、その他のケースはサポート対象外です。代わりに、次のような代替の統合方法を検討してください。
- [Google でログイン] ボタンの実装。
- トップレベル ドメインにワンタップを実装する
- Google OAuth 2.0 エンドポイントを使用して、よりカスタマイズされた統合を実現する。
- iframe 内にサードパーティのサイトを埋め込み、そのワンタップの実装を変更できない場合は、iframe 内にワンタップ プロンプトを表示しないようにできます。これを行うには、親フレームの iframe タグから
allow="identity-credentials-get"属性を削除します。これによりプロンプトが抑制され、埋め込みサイトのログインページにユーザーを直接誘導できます。
クロスオリジンの 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 も含まれています。この iframe には、ワンタップをホストするページ（https://onetap.example2.com）がさらに埋め込まれています。ワンタップが正しく表示されるようにするには、この属性を Iframe A タグと Iframe B タグの両方に追加する必要があります。
ワンタップ プロンプトが表示されないに関するお問い合わせに対応する。オリジンが異なる他のサイトが、One Tap をホストするページを iframe 内に埋め込む場合があります。エンドユーザーや他のサイト所有者から、ワンタップが表示されないというお問い合わせが急増する可能性があります。更新できるのはサイト所有者のみが自分のページで行うことができますが、次の方法で影響を軽減できます。
デベロッパー向けドキュメントを更新し、サイトを呼び出すために iframe を適切に設定する方法を含めます。ドキュメントでこのページへのリンクを設定できます。
必要に応じて、デベロッパー向けのよくある質問ページを更新します。
サポートチームにこの変更について知らせ、お問い合わせへの回答を事前に準備します。
影響を受けるパートナー、お客様、サイト所有者に事前に連絡し、FedCM へのスムーズな移行を図ります。
」が表示されます。
7. これらのディレクティブをコンテンツ セキュリティ ポリシー（CSP）に追加します。
すべてのウェブサイトで CSP を定義するわけではないため、この手順は省略可能です。
ウェブサイトで CSP を使用していない場合は、変更は必要ありません。
現在のワンタップに対応している CSP で、
connect-src、frame-src、script-src、style-src、default-srcを使用していない場合は、変更は必要ありません。それ以外の場合は、こちらのガイドに沿って CSP を設定してください。CSP が正しく設定されていない場合、FedCM One Tap はサイトに表示されません。
」が表示されます。
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は影響を受けません。
移行をテストして検証する
上記の手順に基づいて必要な変更を加えた後、移行が成功したことを確認できます。
ブラウザが FedCM をサポートしており、既存の Google アカウント セッションがあることを確認します。
アプリのワンタップ ページに移動します。
ワンタップ プロンプトが表示され、基盤となるコンテンツに安全に重ねて表示されることを確認します。
One Tap を使用してアプリケーションにログインするときに、正しい認証情報がエンドポイントまたはコールバック メソッドに返されることを確認します。
自動ログインを有効にしている場合は、キャンセルが機能し、正しい認証情報がエンドポイントまたはコールバック メソッドに返されることを確認します。
One Tap のクールダウン期間
右上のワンタップ アイコン をクリックするとプロンプトが閉じられ、クールダウン期間に入ります。この期間中は、ワンタップ プロンプトが一時的に表示されなくなります。Chrome で、クールダウン期間が終了する前にワンタップ プロンプトを再度表示するには、アドレスバーのロックアイコンをクリックし、[権限をリセット] ボタンをクリックしてクールダウン ステータスをリセットします。
自動ログインの静かな期間
FedCM を使用して自動ログインのワンタップをテストする場合、自動ログインが試行されるたびに 10 分間の無効期間があります。サイレント タイムはリセットできません。自動ログインを再度トリガーするには、10 分待つか、テスト用に別の Google アカウントを使用する必要があります。
便利なリソース
プライバシー サンドボックス分析ツール（PSAT）は、FedCM などの代替 API の導入を支援する Chrome DevTools 拡張機能です。サイトをスキャンして影響を受ける機能を確認し、推奨される変更のリストを表示します。