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

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

Chrome 116 には、Login Hint API、User Info API、RP Context API などの FedCM 機能が搭載され、IdP Sign-In Status API のオリジントライアルが開始されます。

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

Login Hint API: ログインする優先ユーザーアカウントを指定します。
User Info API: ID プロバイダ（IdP）が iframe 内にパーソナライズされたログインボタンをレンダリングできるように、リピーターの情報を取得します。
RP Context API: FedCM ダイアログの「ログイン」とは異なるタイトルを使用します。

また、Chrome は IdP Sign-In Status API のオリジントライアルを開始しています。IdP Sign-in Status API は要件であり、リリース時に互換性を破る変更になります。FedCM の既存の実装がある場合は、必ずオリジントライアルに参加してください。

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

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

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

この拡張機能は、IdP からのアカウントリストエンドポイントレスポンスに login_hints の配列を追加します。IdP がサポートするすべてのフィルタタイプが含まれます。たとえば、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 でログイン] ボタン

パーソナライズされた「Google でログイン」ボタン。 — パーソナライズされた「Google でログイン」ボタン

課題は、パーソナライズされたボタンは iframe 内の IdP ドメインのサードパーティ Cookie によって、ボタンを表示するログインユーザーを識別するため、サードパーティ Cookie の廃止後は使用できなくなることです。

Chrome 116 で導入された User Info API は、サードパーティ Cookie に依存することなく、IdP がサーバーからリピーターの情報を取得する方法を提供します。

この 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 権限ポリシーで明示的に許可する必要があります。

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

実際の動作は https://fedcm-rp-demo.glitch.me/button で確認できます。

RP Context API

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

使用方法は簡単です。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 からパソコンで IdP Sign-In Status API オリジントライアルが開始され、その後 Android Chrome で開始されます。オリジントライアルでは、新機能や試験運用版の機能にアクセスして、一般公開までの期間限定でユーザーが試すことができます。

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

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

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

IdP は、HTTP ヘッダーを送信するか、JavaScript API を呼び出して、ユーザーが IdP にログインしている場合、またはユーザーがすべての IdP アカウントからログアウトしている場合に、ユーザーのログインステータスをブラウザに通知できます。ブラウザは、ステータスを「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()

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

デフォルトでは、IdP のログインステータスは「不明」に設定されています。このステータスは、IdP が IdP Sign-In Status 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 には、RP が IdP にログインしていないユーザーに「IdP へのログイン」ダイアログを表示する機能はありません。これは別の機能であり、今後追加される可能性があります。

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

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

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

オリジントライアルを 2 回登録して、IdP Sign-In Status API を有効にすることもできます。

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

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

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

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

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

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

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

オリジントライアルの登録ページにアクセスします。
[Register] ボタンをクリックし、フォームに記入してトークンをリクエストします。
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 neededdurelat（Unsplash）

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

Login Hint API

User Info API

RP Context API

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

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

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

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

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

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