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

FedCM の更新: Button Mode API オリジントライアル、CORS、SameSite

Eiji Kitamura

Chrome 125 以降、Button Mode API がオリジントライアルは終了です。Button Mode API を使用すると、ID プロバイダはユーザーが API 呼び出し時にアクティブな IdP セッションを持っていなくても FedCM API にアクセスできます。ユーザーは、フェデレーションアカウントでウェブサイトにログインできても、 IdP サイトに移動しますボタンモードの FedCM UI をより目立たせるユーザーによって制限されるため、既存のウィジェットフローと比べてユーザーのログイン意図をより正確に反映できます。

ボタンモード API

FedCM ユーザーインターフェースが右上に表示されるウィジェットとして利用可能に API が呼び出されたらすぐに、パソコンの場合はボトムシート、モバイルの場合はボトムシートとして表示できます。たとえば、ユーザーがリライングパーティ（RP）にアクセスしたときなどです。これを ウィジェット モード。ウィジェットを表示するには、ユーザーが IdP にログインする必要がありますゲームに送られますFedCM 自体には、信頼できる方法でユーザーが RP にログインできるようになる前に、ユーザーが IdP にログインした。 IdP で利用可能なアカウントを使用しますFedCM は、そのための方法を追加しようとしています。

ウィジェットモードでは、ユーザーが有効にしなくても、パソコンの Chrome の右上にダイアログが表示されます。

新しい Button Mode API では、button モードという新しい UI モードが追加されています。ウィジェットモードを使用すると、ユーザーが RP。ユーザーがログインフローを開始したときに呼び出されることを想定して設計されています。「IdP でログイン」ボタンを押すなどの操作が] ボタンを離します。

ボタンが押されるとすぐに、FedCM はユーザーが IdP によるアカウントの取得エンドポイントまたはログインステータスをできます。もしまだログインしていない場合、FedCM は login_url ポップアップウィンドウに表示されます。ブラウザがユーザーの IdP にすでにログインしているか、ユーザーが Cloud Identity and Access Management（IdP）にポップアップウィンドウを開くと、ユーザーが IdP を選択するためのモーダルダイアログが開きます。ログインします。アカウントを選択すると、ユーザーは IdP を使用して RP に接続します。

ボタンモードの UI では、表示されるログインダイアログが視覚的な一貫性を維持するために、ブランディングアイコンも変更する必要があります。ウィジェットモードの最小アイコンサイズは 25x25 ピクセルですが、ボタンモードのアイコンは 40×40 ピクセルですIdP の既知の file を使用すると、次のように複数のアイコン URL を指定します。

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}

ボタンモードでは、モーダルダイアログがパソコン版 Chrome の上部中央に表示されます。 — ボタンモードでは、モーダルダイアログがパソコン版 Chrome の上部中央に大きく表示され、

Chrome 125 を使用して、 https://fedcm-rp-demo.glitch.me/button_flow.

</ph>

ユーザーが Button Mode API を使用して RP にログインしています。

Button Mode API を使用するには:

chrome://flags で試験運用版機能 FedCmButtonMode を有効にします。
一時的なユーザーアクティベーションの背後で必ず API を呼び出すアクションを起こします
次のように、mode パラメータを指定して API を呼び出します。

で確認できます。

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

ブラウザは新しいパラメータを ID アサーションエンドポイントリクエストの種類を表すために、mode=button を含めます。

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=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

機能検出

ブラウザがボタンモードを使用できるかどうかを判断するには、次のコードで確認します。

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

他のアカウントオプションを使用する

ユーザーが RP で「他のアカウントの使用」を許可できるアカウント選択ツールでたとえば、IdP が複数のアカウントをサポートする場合や、既存のアカウントを置き換える場合などです。

別のアカウントを使用するオプションを有効にするには:

chrome://flags で試験運用版機能 FedCmUseOtherAccount を有効にするボタンモード API オリジントライアルへの登録が必要です。
IdP では、IdP 構成で以下を指定します。 file:

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

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

Button Mode API をローカルで試すには、フラグ chrome://flags#fedcm-button-mode（Chrome 125 以降）。

IdP は、オリジントライアルを登録してボタンモードを有効にすることもできます。

サードパーティのオリジントライアルを登録する使用します。

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

Button Mode API のオリジントライアルは Chrome 125 から Chrome まで利用可能 130。

オリジントライアルの登録に移動します。ページをご覧ください。
[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 は、独自のトークンに置き換えます。

CORS と `SameSite=None` が必須に（Chrome 125）

CORS

Chrome は、 ID に対する CORS アサーションエンドポイント Chrome 125 以降。

CORS（クロスオリジンリソースシェアリング）は、クロスオリジンリソースシェアリング（CORS）とは、 HTTP ヘッダー。ブラウザがフロントエンドの JavaScript コードをブロックするかどうかを決定しますクロスオリジンリクエストのレスポンスにはアクセスできません。ローカルにある ID アサーションのエンドポイント IdP サーバーは追加のヘッダーでリクエストに応答する必要があります。「次は、送信元のリクエストに対するレスポンスヘッダーを https://fedcm-rp-demo.glitch.me:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

SameSite=None

Cookie の SameSite パラメータは、 Cookie がファーストパーティまたは同一サイトコンテキストに限定される。指定する None の場合、Cookie はサードパーティのドメインに送信できます。

FedCM では、Chrome からアカウントにCookie が送信されます。エンドポイント ID アサーションエンドポイント管理とつながりを断ち切る提供します。最低料金 Chrome 125（Chrome は認証情報付きのリクエストを Cookie のみを使用して送信）明示的に SameSite=None とマークされています。