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 を既に実装している場合は、オリジン トライアルに参加してください。

Login Hint API

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

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

[Google でログイン] ボタン。
Google でログインボタン
カスタマイズされた [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 権限ポリシーを使用して明示的に許可する必要があります。

<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 dialog rendered with 「**** にログイン」とレンダリングされた FedCM ダイアログ。RP コンテキストが指定されていない場合のデフォルト オプションです。
FedCM dialog rendered with
「**** に登録」とレンダリングされた FedCM ダイアログ
FedCM dialog rendered with
「**** に進む」とレンダリングされた FedCM ダイアログ
FedCM dialog rendered with
「**** を使用する」とレンダリングされた 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",
    }],
  }
});

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

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

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

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

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

ユーザーがログインしていることを通知するには、最上位のナビゲーションまたは同一オリジンのサブリソース リクエストで 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 呼び出しを失敗させます。

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

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

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

IdP へのログインを促す FedCM ダイアログ。
IdP へのログインを促す FedCM ダイアログ。

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

IdP へのログイン ボタンをクリックした後に表示されるポップアップ ウィンドウ。
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 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 Sign-In Status API のオリジン トライアルは、Chrome 116 ～ Chrome 119 で利用できます。

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

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

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

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

トークンをサードパーティのウェブサイトに埋め込むには、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）