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

FedCM の更新: Continuation API バンドルのオリジントライアルと Storage Access API の自動付与

Eiji Kitamura

Chrome 126 以降、デベロッパーは次のバンドルのオリジントライアルを開始できます。デスクトップの Federated Credential Management API（FedCM）機能を使用して、認可のユースケース。このバンドルは Continuation API と Parameters API。OAuth 認証フローに似たエクスペリエンスを実現します。 ID プロバイダ（IdP）提供の権限ダイアログを含む。このバンドルには Fields API、複数の configURLs、Custom など、アカウントのラベルChrome 126 以降、 Storage Access API（SAA）: ユーザーが以前に FedCM を使用して正常にログインできたかどうか。

オリジントライアル: FedCM Continuation API バンドル

FedCM Continuation API バンドルは、複数の FedCM 拡張機能で構成されています。

Continuation API
Parameters API
Fields API
複数の configURL
カスタムアカウントラベル

Continuation API

</ph>

ユーザーが RP にログインしてから、ボタンモードで承認します。

Glitch で API を使用するデモをご覧いただけます。

Continuation API を使用すると、 IdP の ID アサーションエンドポイント管理必要に応じて FedCM がレンダリングする URL を返し、ユーザーが続けて構成されます。これにより、IdP はユーザーに権限を許可するよう既存の FedCM UI で可能な以上の証明書利用者（RP）権限ユーザーのサーバーサイドリソースへのアクセスなど、

通常、ID アサーションエンドポイントは、必要なトークンをあります。

{
  "token": "***********"
}

これに対して Continuation API では、エンドポイントが絶対パスまたは相対パスを含む continue_on プロパティを返す ID アサーションエンドポイントへのパスを指定します。

{
  // In the id_assertion_endpoint, instead of returning a typical
  // "token" response, the IdP decides that it needs the user to
  // continue on a pop-up window:
  "continue_on": "/oauth/authorize?scope=..."
}

ブラウザが continue_on レスポンスを受信するとすぐに、新しいポップアップウィンドウが表示されます。が開き、指定されたパスにユーザーを誘導します。

ユーザーがページを操作した後（追加の権限を付与するなど）追加情報を RP と共有すると、IdP ページから IdentityProvider.resolve(): 元の navigator.credentials.get() を呼び出して、引数としてトークンを返します。

document.getElementById('allow_btn').addEventListener('click', async () => {
  let accessToken = await fetch('/generate_access_token.cgi');
  // Closes the window and resolves the promise (that is still hanging
  // in the relying party's renderer) with the value that is passed.
  IdentityProvider.resolve(accessToken);
});

その後、ブラウザはポップアップを自ら閉じ、API にトークンを返します。呼び出します。

ユーザーがリクエストを拒否した場合は、 IdentityProvider.close()。

IdentityProvider.close();

なんらかの理由でユーザーがポップアップでアカウントを変更した場合（ IdP が「ユーザーの切り替え」委任のケースでは、この解決は call はオプションの 2 番目の引数を取り、次のようなものです。

IdentityProvider.resolve(token, {accountId: '1234');

パラメータ API

Parameters API を使用すると、RP 追加のパラメータを ID アサーションに提供提供します。 Parameters API を使用すると、RP は追加のパラメータを IdP に渡して、基本的なログイン以外のリソースに対する権限をリクエストします。この場合、ユーザーは IdP 制御の UX フローを介してこれらの権限にアクセスできます。このフローは Continuation API。

API を使用するには、パラメータをオブジェクトとして params プロパティに追加します。 navigator.credentials.get() の呼び出し。

let {token} = await navigator.credentials.get({
  identity: {
    providers: [{
      clientId: '1234',
      configURL: 'https://idp.example/fedcm.json',
      // Key/value pairs that need to be passed from the
      // RP to the IdP but that don't really play any role with
      // the browser.
      params: {
        IDP_SPECIFIC_PARAM: '1',
        foo: 'BAR',
        ETC: 'MOAR',
        scope: 'calendar.readonly photos.write',
      }
    },
  }
});

params オブジェクトのプロパティ名の先頭には param_ が付加されます。上記の例で、params プロパティには IDP_SPECIFIC_PARAM が '1'、foo として含まれています。 'BAR'、ETC 'MOAR'、scope と 'calendar.readonly photos.write' の形式を使用します。これは次のように翻訳されます。 param_IDP_SPECIFIC_PARAM=1&param_foo=BAR&param_ETC=MOAR&param_scope=calendar.readonly%20photos.write を、リクエストの HTTP 本文内に挿入します。

POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity

account_id=123&client_id=client1234&nonce=234234&disclosure_text_shown=false&param_IDP_SPECIFIC_PARAM=1&param_foo=BAR&param_ETC=MOAR&param_scope=calendar.readonly%20photos.write

権限を動的に取得する

一般に、ユーザーにとっては、権限のリクエストは開発者が簡単に実装できると考えているのではありません。対象たとえば、ユーザーが撮影しようとしたときにカメラへのアクセス許可を求めるなどです。ユーザーがウェブサイトにアクセスしたらすぐに許可を求めるよりも、確認できますサーバーリソースについても同じことが言えます。権限をリクエストするだけユーザーが必要とするときに通知されます。これは「動的承認」と呼ばれます。

FedCM を使用して動的に認可をリクエストするには、IdP で次の操作を行うことができます。

IdP がアクセスできる必須パラメータを使用して navigator.credentials.get() を呼び出す使用できます（scope など）。
ID アサーションエンドポイントユーザーがすでにログインしていることを確認し、continue_on URL を返します。
ブラウザでポップアップウィンドウが開き、IdP の権限ページがリクエストされたスコープに一致する追加の権限。
IdP によって IdentityProvider.resolve() 経由で承認されると、ウィンドウは次のようになります。閉じられ、RP の元の navigator.credentials.get() 呼び出しがトークンまたは認証コードを RP がトークンまたは認証コードを付与する必要があります。

フィールド API

Fields API を使用すると、RP で以下を行うことができます。 IdP にリクエストするアカウント属性を宣言し、ブラウザが FedCM ダイアログに適切な開示 UI を表示するそれは IdP の責任で返されたトークンにリクエストされたフィールドを含めます。このリクエストについて「基本的なプロフィール」OpenID Connect と「スコープ」の違い説明します。

で確認できます。 <ph type="x-smartling-placeholder">

Fields API を使用するには、パラメータを配列として fields プロパティに追加します。 navigator.credentials.get() の呼び出し。フィールドには 'name'、'email' を含めることができます。今のところは 'picture' ですが、これを拡張してより多くの値を含めることもできます。説明します。

fields を使用したリクエストは次のようになります。

let { token } = await navigator.credentials.get({
  identity: {
    providers: [{
      fields: ['name', 'email', 'picture'],
      clientId: '1234',
      configURL: 'https://idp.example/fedcm.json',
      params: {
        scope: 'drive.readonly calendar.readonly',
      }
    },
  }
  mediation: 'optional',
});

ID アサーションに対する HTTP リクエストエンドポイント RP で指定された fields パラメータを disclosure_text_shown とともに含めるこのパラメータは、リピーターでない場合は true に設定され、 disclosure_shown_for パラメータでユーザーに開示するブラウザ:

POST /id_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity

account_id=123&client_id=client1234&nonce=234234&disclosure_text_shown=true&fields=email,name,picture&disclosure_shown_for=email,name,picture

IdP からの追加データに RP がアクセスする必要がある場合（たとえば、これは、前述のカスタムパラメータを使って処理する必要があります。「 IdP は continue_on URL を返して権限をリクエストします。

fields が空の配列の場合、リクエストは次のようになります。

let { token } = await navigator.credentials.get({
  identity: {
    providers: [{
      fields: [],
      clientId: '1234',
      configURL: 'https://idp.example/fedcm.json',
      params: {
        scope: 'drive.readonly calendar.readonly',
      }
    },
  }
  mediation: 'optional',
});

fields に空の配列を指定した場合、ユーザーエージェントは開示 UI をスキップします。

ウィジェットモードでは開示メッセージは表示されません。ボタンフローでは、開示 UI は完全にスキップされます。

これは、アカウントからのレスポンスがエンドポイント approved_clients の RP と一致するクライアント ID が含まれていない。

この例では、ID アサーションに送信された disclosure_text_shown が ID アサーションです。 endpoint です。 false に設定します。

POST /id_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity

account_id=123&client_id=client1234&nonce=234234&disclosure_text_shown=false

複数の configURL

複数の configURL で IdP を許可する複数の構成ファイルに対応するように構成するには、 accounts_endpoint と login_url を、ファイルを指定します。

accounts_endpoint と login_url が well-known ファイルに追加されると、 provider_urls は無視されるため、IdP は複数の構成ファイルをサポートできます。一致していない場合、provider_urls は引き続き有効になり、元の値に戻ります。対応しています。

複数の configURL をサポートする広く知られたファイルは、次のようになります。

{
  "provider_urls": [ "https://idp.example/fedcm.json" ],
  "accounts_endpoint": "https://idp.example/accounts",
  "login_url": "https://idp.example/login"
}

このため、次のことを実現できる。

既存のよく知られたファイルとの後方互換性および前方互換性を維持すでに導入されている旧バージョンのブラウザにも対応します。
任意の数の構成ファイルを使用できます。ただし、すべての構成ファイルが同じ accounts_endpoint と login_url。
認証情報を取得する取得リクエストにエントロピーを追加する機会がない accounts_endpoint に設定されていなければなりません。これは、「.well-known」できます。

複数の configURL のサポートは任意で、既存の FedCM では同じ実装が可能です。

カスタムアカウントラベル

カスタムアカウントラベルにより FedCM が可能 IdP がアカウントにアノテーションを付けることにより、RP が記述できます。Domain Hints を使用しても、同様のフィルタリングが可能です。 API とログイン Hint API を使用します。 navigator.credentials.get() 呼び出しでも使用できますが、カスタムアカウントラベルは構成ファイルを指定してユーザーをフィルタできます。これは、複数の configURL が使用されている。カスタムアカウントラベルは IdP サーバーから提供されるのではなく、IdP サーバーから提供されるという点でも異なります。ログインやドメインヒントなどです。

例

IdP は、コンシューマ用とエンタープライズ用にそれぞれ 2 つの configURL をサポートしています。「コンシューマ構成ファイルに 'consumer' ラベルがあり、エンタープライズ構成ファイルに 'enterprise' ラベルがある。

このような設定では、well-known ファイルに accounts_endpoint と login_url: 複数の configURL を許可します。

{
  "provider_urls": [ "https://idp.example/fedcm.json" ],
  "accounts_endpoint": "https://idp.example/accounts",
  "login_url": "https://idp.example/login"
}

accounts_endpoint が well-known ファイルで指定されている場合、 provider_urls は無視されます。RP はそれぞれの構成を直接参照できる navigator.credentials.get() 呼び出しで参照できます。

コンシューマの構成ファイルは https://idp.example/fedcm.json にあります。これには次のものが含まれます。 include を使用して 'consumer' を指定する accounts プロパティ。

{
  "accounts_endpoint": "https://idp.example/accounts",
  "client_metadata_endpoint": "/client_metadata",
  "login_url": "https://idp.example/login",
  "id_assertion_endpoint": "/assertion",
  "accounts": {
    "include": "consumer"
  }
}

エンタープライズ構成ファイルは https://idp.example/enterprise/fedcm.json にあります。これには、'enterprise' を指定する accounts プロパティが含まれており、 include。

{
  "accounts_endpoint": "https://idp.example/accounts",
  "client_metadata_endpoint": "/enterprise/client_metadata",
  "login_url": "https://idp.example/login",
  "id_assertion_endpoint": "/assertion",
  "accounts": {
    "include": "enterprise"
  }
}

共通の IdP アカウントエンドポイント（この例では https://idp.example/accounts）は、各アカウントの配列に labels が割り当てられた labels プロパティが含まれている。以下は、2 つのアカウントを持つユーザーに対するレスポンスの例です。1 つは 2 種類に分かれます

{
 "accounts": [{
   "id": "123",
   "given_name": "John",
   "name": "John Doe",
   "email": "john_doe@idp.example",
   "picture": "https://idp.example/profile/123",
   "labels": ["consumer"]
  }], [{
   "id": "4567",
   "given_name": "Jane",
   "name": "Jane Doe",
   "email": "jane_doe@idp.example",
   "picture": "https://idp.example/profile/4567",
   "labels": ["enterprise"]
  }]
}

RP が 'enterprise' 人のユーザーにログインを許可する場合、ユーザーは 'enterprise' の configURL 'https://idp.example/enterprise/fedcm.json' に navigator.credentials.get() 呼び出し:

let { token } = await navigator.credentials.get({
  identity: {
    providers: [{
      clientId: '1234',
      nonce: '234234',
      configURL: 'https://idp.example/enterprise/fedcm.json',
    },
  }
});

そのため、ユーザーが署名に使用できるアカウント ID は '4567' のみです。できます。アカウント ID '123' はブラウザによって通知なく非表示になるため、ユーザーはには、このサイトの IdP でサポートされていないアカウントは取得されません。

注:

ラベルは文字列です。labels 配列または include フィールドに文字列以外の値が含まれていて、無視されます。
configURL でラベルを指定しないと、すべてのアカウントに FedCM Account Chooser に表示されます。
アカウントにラベルが指定されていない場合は、 configURL でもラベルが指定されていない場合は、Account Chooser が表示されます。
ウィジェットフローでリクエストされたラベルに一致するアカウントがない場合（ Domain Hint API）を使用すると、FedCM ダイアログにログインプロンプトが表示され、 IdP アカウントにログインできます。ボタンのフローでは、ログインのポップアップウィンドウは直接開きます。

オリジントライアル: Storage Access API のトラストシグナルとしての FedCM

Chrome 126 では、ストレージへのアクセス API。あり FedCM を介した事前のアクセス許可の付与は、リクエストによって、ストレージアクセスリクエストが自動的に承認され、 API。

これは、埋め込み iframe がパーソナライズされたリソースにアクセスする必要がある場合に役立ちます。たとえば、idp.example が rp.example に埋め込まれていて、確認しましょう。ブラウザでサードパーティ Cookie へのアクセスが制限されている場合ユーザーが FedCM の idp.example を使用して rp.example にログインしていても、埋め込みの idp.example iframe は、パーソナライズされたリソースをリクエストできないリクエストにサードパーティの Cookie が含まれていないためです。

これを実現するには、idp.example は iframe が埋め込まれています。この URL は、プロンプトが表示されます。

ストレージアクセスのためのトラストシグナルとして FedCM を使用 API Storage Access API の権限チェックでは、権限の付与を承認するだけでなく、権限の付与だけでなく、ストレージアクセスのプロンプト FedCM プロンプト。

// In top-level rp.example:

// Ensure FedCM permission has been granted.
const cred = await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: 'https://idp.example/fedcm.json',
      clientId: '123',
    }],
  },
  mediation: 'optional',
});

// In an embedded IdP iframe:

// No user gesture is needed to call this, and the call will be auto-granted.
await document.requestStorageAccess();

// This returns `true`.
const hasAccess = await document.hasStorageAccess();

ユーザーが FedCM でログインすると、次の期間、権限が自動的に付与されます。 FedCM 認証が有効になっていることを確認します。つまり、ユーザーの接続が切断されると、プロンプトが表示されます。

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

FedCM Continuation API バンドルをローカルで試すには、Chrome フラグ chrome://flags#fedcm-authz（Chrome 126 以降）。FedCM Storage Access API のトラストシグナルとしてローカルに許可する場合は、 #fedcm-with-storage-access-api（Chrome 126 以降）。

これらの機能はオリジントライアルとしても利用できます。オリジントライアルでは、新機能を試して、ユーザビリティ、実用性、有効性に関するフィードバックを提供できます。詳しくは、オリジントライアルのスタートガイドをご覧ください。

FedCM Continuation API バンドルのオリジンを試すには試用次の 2 つのオリジントライアルトークンを作成します。

トライアルに登録します。トークンを IdP に埋め込む origin を指定します。
[サードパーティの照合] チェックボックスをオンにしてオリジントライアルに登録する。の手順に沿って、サードパーティのオリジントライアルを RP: RP のトークンを埋め込む場合。

ボタンとともに Continuation API を有効にする場合フローで [ボタンモード] を有効にします。 API オリジントライアルさらに:

サードパーティとしてオリジントライアルに登録する。以下の手順に従います。 RP にサードパーティのオリジントライアルを登録して埋め込む使用します。

Storage Access API オリジンのトラストシグナルとして FedCM を試す試用版:

オリジントライアルに登録します。トークンを IdP に埋め込む origin を指定します。

Continuation API バンドルのオリジントライアルと FedCM を、 Storage Access API のオリジントライアルは Chrome 126 から利用できます。

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

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

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

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

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

FedCM の更新: Continuation API バンドルのオリジン トライアルと Storage Access API の自動付与

オリジン トライアル: FedCM Continuation API バンドル