プライバシーサンドボックスの一部のテクノロジーは段階的に廃止されます。

プライバシーサンドボックス技術の計画に関する最新情報をご覧ください。

プライバシーサンドボックスの機能のステータスでは、個々の API とプラットフォーム機能のステータスについて詳しく説明しています。

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

FedCM の更新: IdP Sign-In Status API、ログインヒントなど

Chrome 116 では、ログインヒント API、ユーザー情報 API、RP コンテキスト API などの FedCM 機能が提供され、IdP ログインステータス API のオリジントライアルが開始されます。

Chrome 116 では、次の 3 つの新しい Federated Credential Management（FedCM）機能がリリースされます。

ログインヒント API: ログインする優先ユーザーアカウントを指定します。
User Info API: 再訪ユーザーの情報を取得して、ID プロバイダ（IdP）が iframe 内にパーソナライズされたログインボタンを表示できるようにします。
RP Context API: FedCM ダイアログで「ログイン」以外のタイトルを使用します。

また、Chrome では IdP ログインステータス API のオリジントライアルも開始されます。IdP ログインステータス API は必須であり、リリース時に破壊的変更となります。FedCM の既存の実装がある場合は、オリジントライアルに参加してください。

FedCM が呼び出されると、ブラウザには指定された ID プロバイダ（IdP）のログイン済みアカウントが表示されます。IdP が複数のアカウントをサポートしている場合、ログインしているすべてのアカウントが一覧表示されます。

複数のユーザーアカウントが表示された FedCM ダイアログ。 — 複数のユーザーアカウントを表示する FedCM ダイアログ

ユーザーがログインした後、RP（証明書利用者）がユーザーに再認証を求めることがあります。ただし、お客様がどのアカウントを使用しているかわからない場合があります。RP がログインするアカウントを指定できる場合、ユーザーはアカウントを選択しやすくなります。ログインヒントは Chrome 116 でリリースされ、RP はリストを 1 つに絞り込むことができます。

この拡張機能により、IdP からのアカウントリストエンドポイントのレスポンスに、IdP がサポートするすべてのフィルタタイプの login_hints の配列が追加されます。たとえば、IdP がメールアドレスと ID によるフィルタリングをサポートしている場合、アカウントレスポンスは次のようになります。

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

アカウントリストに login_hints を渡すことで、RP は次のコードサンプルに示すように loginHint プロパティを使用して navigator.credentials.get() を呼び出し、指定されたアカウントを選択的に表示できます。

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

User Info API

IdP のロゴで装飾されたログインボタンを使用して、ユーザーが ID 連携でログインできるようにすることは、現在では一般的になっています。ただし、ユーザーのプロフィールアイコンと情報を使用してボタンを装飾すると、特にユーザーが以前にこのウェブサイトで IdP に登録している場合に、より直感的にログインできます。

カスタマイズされた [Google でログイン] ボタン。 — パーソナライズされた Google ログインボタン

問題は、パーソナライズされたボタンが、iframe 内の IdP ドメインのサードパーティ Cookie に依存して、ログインしているユーザーを識別し、ボタンをレンダリングしているため、サードパーティ Cookie が非推奨になると、このボタンは利用できなくなることです。

Chrome 116 でリリースされる User Info API を使用すると、IdP はサードパーティ Cookie に依存することなく、サーバーからリピーターの情報を取得できます。

この API は、RP ウェブサイトに埋め込まれた iframe 内から IdP によって呼び出されることが想定されています。これにより、ユーザー情報を取得し、RP サーフェスの一部であるかのようにパーソナライズされたボタンをレンダリングできます。API 呼び出しにより、ブラウザはアカウントリストエンドポイントにリクエストを送信し、次の条件を満たす場合はユーザー情報の配列を返します。

ユーザーが過去に同じブラウザインスタンスで FedCM 経由で IdP を使用して RP にログインしており、データがクリアされていない。
ユーザーが同じブラウザインスタンスで IdP にログインしている。

// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

IdP と同じオリジンの iframe 内から IdentityProvider.getUserInfo() を呼び出すことを許可するには、埋め込み HTML で identity-credentials-get permissions policy を使用して明示的に許可する必要があります。

<iframe src="https://fedcm-demo-idp.dev" allow="identity-credentials-get"></iframe>

実際の動作は https://fedcm-demo-rp.dev/active-mode で確認できます。

RP Context API

Chrome 116 でリリースされる RP Context API を使用すると、RP は FedCM ダイアログ UI の文字列を変更して、事前定義された認証コンテキストに対応できます。さまざまなオプションについては、以下のスクリーンショットをご覧ください。

「**** にログイン」と表示された FedCM ダイアログ。RP コンテキストが指定されていない場合のデフォルトオプションです。

FedCM ダイアログが — 「**** に登録」と表示された FedCM ダイアログ

「**** を使用する」と表示された FedCM ダイアログ — 「**** を使用」と表示された FedCM ダイアログ

使い方は簡単です。identity.context プロパティに "signin"（デフォルト）、"signup"、"use"、"continue" のいずれかを指定します。

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

Chrome 116 以降のパソコン版 Chrome で IdP Sign-In Status API のオリジントライアルが開始され、その後 Android 版 Chrome でも開始されます。オリジントライアルでは、新しい機能や試験運用版の機能を利用して、ユーザーが一定期間試用できる機能を構築できます。この機能は、その後、すべてのユーザーに提供されます。

IdP Sign-In Status API は、IdP が IdP でのユーザーのログインステータスをブラウザに通知するメカニズムです。この API を使用すると、ブラウザは IdP への不要なリクエストを減らし、タイミング攻撃の可能性を軽減できます。

注: FedCM は、アカウントリストエンドポイントに認証情報付きリクエストを導入します。このリクエストでは、リクエスト元を特定するデータは送信されず、RP が提供するデータを渡すこともできません。ただし、ブラウザは RP 情報を含む認証情報のないリクエストを client_metadata_endpoint に別途実行します。その後、IdP サーバーはタイミングやその他のフィンガープリントデータを使用して、認証情報のないリクエストと認証情報のあるリクエストを（確率的に）関連付けることができます。詳しくは、こちらのスライドをご覧ください。

ユーザーのログインステータスをブラウザに通知する

ユーザーが IdP にログインしている場合、またはすべての IdP アカウントからログアウトしている場合、IdP は HTTP ヘッダーを送信するか、JavaScript API を呼び出すことで、ユーザーのログインステータスをブラウザに通知できます。ブラウザは、ステータスを「sign-in」、「sign-out」、「unknown」（デフォルト）のいずれかで記録します。

ユーザーがログインしていることを示すには、最上位のナビゲーションまたは同一オリジンのサブリソースリクエストで IdP-SignIn-Status: action=signin HTTP ヘッダーを送信します。

IdP-SignIn-Status: action=signin

または、IdP オリジンから JavaScript API IdentityProvider.login() を呼び出します。

IdentityProvider.login()

これにより、ユーザーのログインステータスが「ログイン」として記録されます。ユーザーのログインステータスが「ログイン」に設定されている場合、FedCM を呼び出す PR は IdP のアカウントリストエンドポイントにリクエストを行い、利用可能なアカウントを FedCM ダイアログに表示します。

ユーザーがすべてのアカウントからログアウトしたことを通知するには、トップレベルのナビゲーションまたは同一オリジンのサブリソースリクエストで IdP-SignIn-Status: action=signout-all HTTP ヘッダーを送信します。

IdP-SignIn-Status: action=signout-all

または、IdP オリジンから JavaScript API IdentityProvider.logout() を呼び出します。

IdentityProvider.logout()

これにより、ユーザーのログインステータスが「ログアウト」として記録されます。ユーザーのログインステータスが「ログアウト」の場合、IdP のアカウントリストエンドポイントにリクエストを送信することなく、FedCM の呼び出しはサイレントに失敗します。

デフォルトでは、IdP のログインステータスは [不明] に設定されています。このステータスは、IdP が IdP ログインステータス API を使用してシグナルを送信する前に使用されます。このステータスを導入するのは、移行をスムーズに行うためです。この API をリリースした時点で、ユーザーがすでに IdP にログインしている可能性があり、FedCM が最初に呼び出されるまでに IdP がブラウザにこのことを通知できない可能性があります。この場合、IdP のアカウントリストエンドポイントにリクエストを送信し、アカウントリストエンドポイントからのレスポンスに基づいてステータスを更新します。

エンドポイントが有効なアカウントのリストを返した場合は、ステータスを「ログイン」に更新し、FedCM ダイアログを開いてそれらのアカウントを表示します。
エンドポイントがアカウントを返さない場合は、ステータスを「ログアウト」に更新し、FedCM 呼び出しを失敗させます。

ユーザーセッションの有効期限が切れた場合はどうなりますか？動的ログインフローでユーザーがログインできるようにする

IdP はブラウザにユーザーのログインステータスを継続的に通知しますが、セッションの期限切れなどにより、同期が取れなくなる可能性があります。ログインステータスが「ログイン」の場合、ブラウザは認証情報付きのリクエストをアカウントリストエンドポイントに送信しようとしますが、セッションが利用できなくなったため、サーバーはリクエストを拒否します。このようなシナリオでは、ブラウザはポップアップウィンドウを通じてユーザーが IdP に動的にログインできるようにします。

次の図に示すように、FedCM ダイアログにメッセージが表示されます。

IdP へのログインを促す FedCM ダイアログ。 — IdP へのログインを提案する FedCM ダイアログ。

[続行] ボタンをクリックすると、ブラウザでポップアップウィンドウが開き、ユーザーが IdP のログインページに移動します。

ログインページの URL（IdP のオリジンである必要があります）は、IdP 構成ファイルの一部として signin_url で指定できます。

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

ポップアップウィンドウは、ファーストパーティ Cookie を使用する通常のブラウザウィンドウです。コンテンツウィンドウ内で何が起こるかは IdP 次第ですが、RP ページにクロスオリジン通信リクエストを行うためのウィンドウハンドルは利用できません。ユーザーがログインしたら、IdP は次の処理を行う必要があります。

IdP-SignIn-Status: action=signin ヘッダーを送信するか、IdentityProvider.login() API を呼び出して、ユーザーがログインしたことをブラウザに通知します。
IdentityProvider.close() を呼び出して、自身（ポップアップウィンドウ）を閉じます。

// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}

ユーザーが FedCM を使用して IdP にログインした後、RP にログインする

注: この動的なログインエクスペリエンスは、明示的なログアウトなしで IdP セッションが期限切れになり、ブラウザのログイン状態が実際の状態と矛盾する場合を想定しています。IdP にまだログインしていないユーザーに対しては、この処理はトリガーされません。この新しいフローは、ブラウザでのユーザーの IdP ログインステータスが「ログイン」であるにもかかわらず、IdP のアカウントリストエンドポイントがアカウントを返さないケースに対応するように設計されています。

IdP Sign-In Status API がすぐに呼び出されると仮定すると、FedCM が呼び出されたときに次のいずれかのシナリオが発生する可能性があります。

ブラウザがユーザーのログインステータスを認識していない場合（「不明」）、アカウントリストエンドポイントからの IdP のレスポンスに応じてステータスが更新されます（「ログイン」または「ログアウト」）。動的なログインフローはトリガーされません。
ユーザーがブラウザで IdP にログイン（「ログイン」）した後、明示的に IdP からログアウト（「ログアウト」）した場合、動的ログインフローはトリガーされません。
ユーザーがブラウザで IdP にログインしている（「ログイン」）が、明示的にログアウトせずにセッションの期限が切れた場合、動的ログインフローがトリガーされます。

IdP Sign-In Status API には、IdP にログインしていないユーザーに「IdP にログイン」ダイアログを表示する機能はありません。これは別の機能であり、今後追加される可能性があります。

IdP Sign-In Status API の動作は、デモでお試しいただけます。セッションは、デモ IdP にログインしてから 3 分後に期限切れになります。その後、ポップアップウィンドウの動作を通じて IdP へのログインを確認できます。

オリジントライアルに参加する

Chrome 116 以降で Chrome
フラグ chrome://flags#fedcm-idp-signin-status-api をオンにすると、IdP Sign-In Status API をローカルで試すことができます。

オリジントライアルを 2 回登録して、IdP ログインステータス API を有効にすることもできます。

IdP のオリジントライアルを登録します。
RP のサードパーティのオリジントライアルを登録します。

オリジントライアルでは、新機能を試して、そのユーザビリティ、実用性、有効性に関するフィードバックをウェブ標準コミュニティに送信できます。詳しくは、ウェブデベロッパー向けのオリジントライアルガイドをご覧ください。

IdP Sign-In Status API のオリジントライアルは、Chrome 116 から Chrome 119 までご利用いただけます。

IdP のオリジントライアルを登録する

オリジントライアルの登録ページに移動します。
[登録] ボタンをクリックし、フォームに記入してトークンをリクエストします。
IdP のオリジンを [Web Origin] として入力します。
[送信] をクリックします。
IdentityProvider.close() を使用するページの head に origin-trial <meta> タグを追加します。たとえば、
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE"> のようになります。

警告: この API では Origin-Trial HTTP ヘッダーを送信しても機能しません。

RP のサードパーティオリジントライアルを登録する

オリジントライアルの登録ページに移動します。
[登録] ボタンをクリックし、フォームに記入してトークンをリクエストします。
IdP のオリジンを [Web Origin] として入力します。
[サードパーティのマッチング] をオンにして、他のオリジンの JavaScript でトークンを挿入します。
[送信] をクリックします。
発行されたトークンをサードパーティのウェブサイトに埋め込みます。

トークンをサードパーティのウェブサイトに埋め込むには、IdP のオリジンから提供される JavaScript ライブラリまたは SDK に次のコードを追加します。

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

TOKEN_GOES_HERE は、独自のトークンに置き換えます。

意見交換とフィードバックの提供

テスト中にフィードバックがある場合や問題が発生した場合は、crbug.com で共有できます。

写真: Dan Cristian Pădureț（Unsplash）

FedCM の更新: IdP Sign-In Status API、ログインヒントなど コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

ログイン ヒント API

User Info API

RP Context API

IdP Sign-In Status API オリジン トライアル

ユーザーのログイン ステータスをブラウザに通知する

ユーザー セッションの有効期限が切れた場合はどうなりますか？動的ログインフローでユーザーがログインできるようにする

オリジン トライアルに参加する

IdP のオリジン トライアルを登録する

RP のサードパーティ オリジン トライアルを登録する