このガイドでは、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 回限りの再確認は、FedCM でワンタップ プロンプトまたはボタンフローを 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 ボタンフローの主なユーザー ジャーニーについては、[Google でログイン] ボタンのページをご覧ください。
始める前に
ブラウザの設定とバージョンが FedCM API をサポートしていることを確認します。最新バージョンに更新することをおすすめします。
FedCM API は Chrome 117 以降で使用できます。
Chrome で [サードパーティのログイン] 設定が有効になっている。この設定はワンタップのみに影響し、FedCM ボタンフローには影響しません。
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. 初期化時に ボタンの FedCM を有効にするためのブール値フラグを追加します。{:#fedcm_button_flag}（省略可）
HTML の場合は、
data-use_fedcm_for_button属性をtrueに設定して、FedCM ボタンフローを有効にします。FedCM ボタンフローのみを有効にしている場合は、data-use_fedcm_for_button属性をtrueに設定して、新しい自動選択機能を有効にすることもできます。JavaScript では、
IdConfigurationオブジェクトでuse_fedcm_for_buttonをtrueに設定して、FedCM ボタンフローを有効にします。FedCM ボタンフローのみを有効にしている場合は、button_auto_select属性をtrueに設定して、新しい自動選択機能を有効にすることもできます。
3. コード内のワンタップ用 isDisplayMoment()、isDisplayed()、isNotDisplayed()、getNotDisplayedReason() メソッドの使用を削除します。
ユーザーのプライバシー保護を強化するため、google.accounts.id.prompt コールバックは PromptMomentNotication オブジェクトでディスプレイ モーメント通知を返さなくなりました。表示モーメント関連のメソッドに依存するコードをすべて削除します。isDisplayMoment()、isDisplayed()、isNotDisplayed()、getNotDisplayedReason() の各メソッドです。
4. コード内のワンタップ用の getSkippedReason() メソッドの使用を削除しました。
スキップ モーメント isSkippedMoment() は、PromptMomentNotication オブジェクトの google.accounts.id.prompt コールバックから引き続き呼び出されますが、詳細な理由は提供されません。getSkippedReason() メソッドに依存するコードをコードから削除します。
なお、FedCM が有効になっている場合、閉じたモーメントの通知 isDismissedMoment() と、関連する詳細な理由メソッド getDismissedReason() は変更されません。
5. ワンタップ用の data-prompt_parent_id と intermediate_iframes から position スタイル属性を削除しました。
ユーザー プロンプトのサイズと位置はブラウザが制御します。パソコンでのワンタップの場合、カスタム位置はサポートされていません。
6. ワンタップに対応するために、必要に応じてページ レイアウトを更新します。
ユーザー プロンプトのサイズと位置はブラウザが制御します。個々のページのレイアウトによっては、一部のコンテンツがオーバーレイされる場合があります。これは、パソコン版ワンタップ キャンペーンのカスタム位置が、スタイル属性、data-prompt_parent_id、intermediate_iframes、カスタマイズされた iframe など、どのような方法でもサポートされていないためです。
重要な情報が隠れている場合は、ページ レイアウトを変更してユーザー エクスペリエンスを改善します。ワンタップ プロンプトがデフォルトの位置にあると想定していても、そのプロンプトを中心に UX を構築しないでください。FedCM API はブラウザを介したプロンプトであるため、ブラウザ ベンダーによってプロンプトの位置が若干異なる場合があります。
7. ウェブアプリがクロスオリジンの iframe から One Tap API または Button 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 にログイン」と表示されます。
ドメインが異なる場合など、その他のケースはサポート対象外です。代わりに、次のような代替の統合方法を検討してください。
- FedCM を有効にせずに [Google でログイン] ボタンを実装している。
- トップレベル ドメインにワンタップを実装する
- Google OAuth 2.0 エンドポイントを使用して、よりカスタマイズされた統合を実現する。
- iframe 内にサードパーティのサイトを埋め込んでいて、そのサイトのワンタップの実装を変更できない場合は、iframe 内にワンタップ プロンプトを表示しないようにできます。これを行うには、親フレームの iframe タグから
allow="identity-credentials-get"属性を削除します。これによりプロンプトが抑制され、埋め込みサイトのログインページにユーザーを直接誘導できます。
クロスオリジンの iframe から One Tap API または Button 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 が含まれており、この 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 へのスムーズな移行を図ります。
8. これらのディレクティブをコンテンツ セキュリティ ポリシー（CSP）に追加します。
すべてのウェブサイトで CSP を定義するわけではないため、この手順は省略可能です。
ウェブサイトで CSP を使用していない場合は、変更する必要はありません。
現在のワンタップまたはボタンで CSP が機能し、
connect-src、frame-src、script-src、style-src、default-srcを使用していない場合は、変更する必要はありません。それ以外の場合は、こちらのガイドに沿って CSP を設定します。CSP が正しく設定されていないと、FedCM ワンタップまたはボタンがサイトに表示されません。
」が表示されます。
9. ログインでの 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 のクールダウン期間
右上のワンタップ アイコン をクリックするとプロンプトが閉じられ、クールダウン期間に入ります。この期間中は、ワンタップ プロンプトが一時的に表示されなくなります。Chrome で、クールダウン期間が終了する前にワンタップ プロンプトを再度表示するには、アドレスバーのロックアイコンをクリックして [権限をリセット] ボタンをクリックし、クールダウン ステータスをリセットします。
自動ログインの静かな期間
FedCM を使用して自動ログインのワンタップをテストする場合、自動ログインが試行されるたびに 10 分間の無効期間があります。サイレント タイムはリセットできません。自動ログインを再度トリガーするには、10 分待つか、テスト用に別の Google アカウントを使用する必要があります。
便利なリソース
プライバシー サンドボックス分析ツール（PSAT）は、FedCM などの代替 API の導入を支援する Chrome DevTools 拡張機能です。サイトをスキャンして影響を受ける機能を確認し、推奨される変更のリストを表示します。