このページは Cloud Translation API によって翻訳されました。

FedCM に移行する

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

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

概要

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

FedCM を使用すると、サードパーティ Cookie の使用を必要とせずに、よりプライベートなログインフローが可能になります。ブラウザはユーザー設定を制御し、ユーザープロンプトを表示します。また、ユーザーが明示的に同意した後にのみ、Google などの ID プロバイダに連絡します。

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

始める前に

お使いのブラウザとブラウザのバージョンが FedCM API をサポートしていることを確認し、必要に応じて新しいバージョンにアップデートします。

サードパーティ Cookie をブロックしてログインフローをテストする前に、chrome://flags を開き、試験運用版の FedCmWithoutThirdPartyCookies 機能を有効にします。この手順は、デフォルトになるまでの間のみ必要です。また、Chrome で [サードパーティのログイン] の設定を有効にする必要があります。

ウェブアプリを移行する

FedCM を有効にし、移行に対する潜在的な影響を評価し、必要に応じて既存のウェブアプリケーションを変更する必要がある場合は、次の操作を行います。

次のコマンドを使用して初期化するときに FedCM を有効にするブール値フラグを追加します。
- data-use_fedcm_for_prompt 属性を true に設定します。
- IdConfiguration オブジェクトで use_fedcm_for_prompt を true に設定します。
PromptMomentNotication オブジェクトで返された opt_out_or_no_session 値の使用をすべて削除します。

ユーザーのプライバシー保護を強化するため、google.accounts.id.prompt コールバックはユーザー設定やセッションステータスに関連する結果を返さなくなりました。
isDisplayMoment() イベントの通知の遅延を処理できるように、ユーザーフローとウェブサイトのコードを更新します。

ユーザーのプライバシー保護を強化するため、FedCM が有効になっている場合は、ディスプレイモーメントの通知がランダムな時間で意図的に遅延されます。通知は、実際のイベントの発生後 1 分以内に受信できます。isDisplayMoment を使用して、条件付きでプロンプトを表示したり、ユーザー操作をトリガーしたりする場合は、UX デザインの時間の長さが可変であることについて慎重に考慮してください。
data-prompt_parent_id と intermediate_iframes から position スタイル属性を削除します。

ユーザープロンプトのサイズと位置はブラウザによって制御されます。デスクトップでのワンタップのカスタム位置はサポートされていません。
必要に応じてページレイアウトを更新します。

ユーザープロンプトのサイズと位置はブラウザによって制御されます。個々のページのレイアウトによっては、一部のコンテンツがオーバーレイされる場合があります。

ページレイアウトを変更して、重要な情報が隠れているときのユーザーエクスペリエンスを改善する。
ウェブアプリがクロスオリジンの iframe から One Tap API を呼び出す場合は、allow="identity-credentials-get" 属性を親フレームに追加します。

iframe のオリジンが親オリジンと完全に同一でない場合、その iframe はクロスオリジンと見なされます。次に例を示します。
- 異なるドメイン: https://example1.com と https://example2.com
- トップレベルドメインの違い: https://example.uk と https://example.jp
- サブドメイン: https://example.com と https://login.example.com
ユーザーのプライバシーを向上させるため、One Tap API がクロスオリジンの iframe から呼び出される場合は、すべての親フレームの 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 タグの両方に追加する必要があります。
これらのディレクティブをコンテンツセキュリティポリシー（CSP）に追加します。

すべてのウェブサイトが CSP を定義するわけではないため、このステップは省略可能です。
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 は影響を受けません。