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 の既存の実装がある場合は、必ずオリジン トライアルに参加してください。
Login Hint API
FedCM が呼び出されると、ブラウザには指定された ID プロバイダ(IdP)のログイン済みアカウントが表示されます。IdP が複数のアカウントをサポートしている場合は、すべてのログイン アカウントが一覧表示されます。
![複数のユーザー アカウントが表示されている FedCM ダイアログ。](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-showing-mu-e3714b87b4d94.png?authuser=6&hl=ja)
ユーザーがログインした後、証明書利用者(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 でログイン] ボタン。](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/sign-with-google-button-d34d0cc6c6301.png?authuser=6&hl=ja)
![パーソナライズされた「Google でログイン」ボタン。](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/personalized-sign-with-g-45331497ab21b.png?authuser=6&hl=ja)
課題は、パーソナライズされたボタンは 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 で文字列を変更して、事前定義された認証コンテキストに対応できます。さまざまなオプションについて、次のスクリーンショットをご覧ください。
![FedCM ダイアログ](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-fe1a06336087f.png?authuser=6&hl=ja)
![FedCM ダイアログ](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-06a2fc27f97ad.png?authuser=6&hl=ja)
![FedCM ダイアログ](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-c-5d3bb7d44dd6a.png?authuser=6&hl=ja)
![FedCM ダイアログ](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-u-efb6bbffb812.png?authuser=6&hl=ja)
使用方法は簡単です。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",
}],
}
});
IdP Sign-In Status API オリジン トライアル
Chrome 116 からパソコンで IdP Sign-In Status API オリジン トライアルが開始され、その後 Android Chrome で開始されます。オリジン トライアルでは、新機能や試験運用版の機能にアクセスして、一般公開までの期間限定でユーザーが試すことができます。
IdP Sign-In Status API は、IdP が IdP でのユーザーのログイン ステータスをブラウザに通知するメカニズムです。この API を使用すると、ブラウザは 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 ダイアログ。](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-suggesting-b9179c79f722d.png?authuser=6&hl=ja)
[続行] ボタンをクリックすると、ポップアップ ウィンドウが開き、ユーザーを IdP のログインページに誘導します。
![[IdP へのログイン] ボタンをクリックすると表示されるポップアップ ウィンドウ。](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/a-popup-window-shown-cli-0520929770807.png?authuser=6&hl=ja)
ログインページの 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();
}
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">
のようになります。
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 でお知らせください。