このページは 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 つの新しい連携認証情報管理（FedCM）機能:

Login Hint API: ログインするユーザーアカウントを指定します。ログインしました。
User Info API: リピーターの情報を取得します。これにより、ID プロバイダ（IdP）がパーソナライズされたログインボタンを使用できます。
RP Context API: 「ログイン」以外のタイトルを使用してください FedCM ダイアログを開きます

さらに、Chrome はオリジン IdP ログインステータスの試用版 API。IdP Sign-in Status API は必須であり、互換性を破る変更が行われることもあります既存の実装で FedCM の皆さんは、ぜひオリジントライアルにご参加ください。

FedCM が呼び出されると、ブラウザには認証を受けることができます。IdP が複数のアカウントをサポートしている場合、ログインしているすべてのアカウントの一覧が表示されます。

複数のユーザーアカウントを示す FedCM ダイアログ。 — 複数のユーザーアカウントを示す FedCM ダイアログ

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

この拡張機能は、アカウントリストに login_hints の配列を追加します。エンドポイントレスポンスが IdP でサポートされているすべてのフィルタタイプを使用できます。たとえば、 IdP がメールによるフィルタリングをサポートしている場合、アカウントのレスポンスは次のようになります。 and 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 は次に示すように、navigator.credentials.get() は loginHint プロパティに置き換えます。次のコードサンプルでは、指定したアカウントを選択的に表示します。

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 のロゴで飾られたログインボタン。ユーザーはこのボタンを使ってログインできます。 Identity 連携が一般的になりつつあります。ただし、ユーザーのプロフィールアイコンが表示され、ユーザーの情報がログインしやすくなります。ユーザーが以前に IdP でこのウェブサイトに登録したことがある場合は特にそうです。

[Google でログイン] ボタン。 — [Google でログイン] ボタン

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

問題は、パーソナライズされたボタンはサードパーティに依存し、使用して、ログインしたユーザーを識別し、ボタンを表示しようとしても、サードパーティ Cookie が設定されると、そのボタンは非推奨です。

Chrome 116 でリリースされた User Info API を使用すると、IdP で以下を再訪ユーザーの情報をサーバーから取得する。説明します。

API は、サービスアカウントに埋め込まれた 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.
}

なお、IdentityProvider.getUserInfo() の呼び出しを許可するには、 IdP と同じオリジンの iframe を使用する場合は、埋め込み 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 コンテキスト API

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

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

使い方は簡単です。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 が IdP Sign-In Status API のオリジンを開始します。トライアルをパソコンで Chrome 116 から提供し、その後 Android Chrome に移行しました。出発地トライアルでは、新機能や試験運用版の機能にアクセスすること期間限定でこの機能をお試しいただけます。

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

注: FedCM では、認証済みリクエストがアカウントリストに導入されます。できます。このリクエストでは、リクエスト送信者を特定するデータは送信されず、 RP から提供されるデータの受け渡しを許可します。ブラウザとは別に RP 情報を含む認証情報のないリクエストを client_metadata_endpoint の場合、IdP サーバーは認証情報のない（確率的）に、認証情報が証明済みのリクエストとフィンガープリントを作成します。詳しくは、スライドをご覧ください。

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

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

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

IdP-SignIn-Status: action=signin

または、IdP から JavaScript API IdentityProvider.login() を呼び出します。 origin:

IdentityProvider.login()

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

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

IdP-SignIn-Status: action=signout-all

または、IdP から JavaScript API IdentityProvider.logout() を呼び出します。 origin:

IdentityProvider.logout()

これにより、ユーザーのログインステータスが「ログアウト」として記録されます。ユーザーがログインステータスが「sign-out」の場合、FedCM の呼び出しは通知されずに失敗します。 IdP のアカウントリストのエンドポイントに送信します。

デフォルトでは、IdP のログインステータスは「不明」に設定されています。このステータスは IdP が IdP の Sign-In Status API を使用してシグナルを送信するまでのプロセスです。Google のユーザーがすでに Google アカウントにログイン済みの可能性があるため、移行を適切に行うためにこのステータスを IdP はこの API のリリース時に通知できず、IdP はこの API を通知できない可能性があります。ブラウザに提供されなくなるためです。この例では、リクエストを作成し、ID に基づいてステータスをアカウントリストエンドポイントからのレスポンス:

エンドポイントから有効なアカウントのリストが返された場合は、ステータスを次のように更新します。「ログイン」FedCM ダイアログを開いてこれらのアカウントを表示します。
エンドポイントからアカウントが返されなかった場合は、ステータスを「sign-out」に更新します。失敗できます。

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

引き続き IdP がブラウザにユーザーのログインを通知しても、セッションが期限切れになったときなど、非同期の状態になっている可能性があります。ブラウザが、認証されたリクエストをアカウントリストのエンドポイントに送信しようとしたときに、ログインステータスは「sign-in」ですが、セッションが「ログイン」ではないため、サーバーは拒否します。提供されなくなりましたそのような場合、ブラウザはユーザーに対して、ポップアップウィンドウで IdP にログインします。

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

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

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

で確認できます。

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

{
  "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();
}

</ph>

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

注: この動的なログインエクスペリエンスは、IdP セッションの有効期限が切れた場合を対象としています明示的なログアウトを行わないと、ブラウザのログイン状態が矛盾することになり、示されます。ログインしていないユーザーに対してはトリガーされません。まだ IdP に登録されていません。この新しいフローは、ユーザーのブラウザでの IdP ログインステータスが「ログイン」であるIdP のアカウントリストはアカウントが返されません。

IdP Sign-In Status API が速やかに呼び出されると仮定した場合、FedCM が呼び出されると、次のいずれかのシナリオが考えられます。

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

IdP の Sign-In Status API では、RP でサービスアカウント「IdP にログインする」ダイアログが表示されます。これはこの機能は今後追加される可能性があります

IdP Sign-In Status API の動作は、デモをご覧ください。セッションは 3 分後に期限切れになりますデモ IdP にログインした後、認証を行う必要があります。次に、ポップアップウィンドウの動作から IdP へのログインを確認できます。

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

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

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

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

オリジントライアルでは、新機能を試して、ウェブ標準コミュニティにとってのユーザビリティ、実用性、有効性。対象詳しくは、オリジントライアルガイド（ウェブ向け）デベロッパー。

IdP Sign-In Status API のオリジントライアルは、Chrome 116 ～ Chrome 119。

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

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

で確認できます。

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

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

オリジントライアルの登録ページに移動します。
[Register] ボタンをクリックし、フォームに記入してトークンをリクエストします。
IdP の生成元を [ウェブ生成元] として入力します。
他のオリジンで 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 Pyamldure 希望（Unsplash より）

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

Login Hint API

User Info API

RP コンテキスト API

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

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

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

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

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

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

対応してフィードバックを共有する

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

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

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

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

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

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