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

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 は、そのための方法を追加しようとしています。

<ph type="x-smartling-placeholder">
</ph> ウィジェット モードでは、ユーザーが有効にしなくても、パソコンの Chrome の右上にダイアログが表示されます。
ウィジェット モードでは、ユーザーが有効にしなくても、パソコンの 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
      }
    ]
  }
}
<ph type="x-smartling-placeholder">
</ph> ボタンモードでは、モーダル ダイアログがパソコン版 Chrome の上部中央に表示されます。
ボタンモードでは、モーダル ダイアログがパソコン版 Chrome の上部中央に大きく表示され、

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

<ph type="x-smartling-placeholder">
</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 が複数のアカウントをサポートする場合や、既存のアカウントを置き換える場合などです。

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

{
  "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。

  1. オリジン トライアルの登録に移動します。 ページをご覧ください
  2. [Register] ボタンをクリックし、フォームに記入してトークンをリクエストします。
  3. IdP の生成元を [ウェブ生成元] として入力します。
  4. [サードパーティ マッチング] をオンにし、JavaScript を使用してトークンを 生成します。
  5. [送信] をクリックします。
  6. 発行されたトークンをサードパーティのウェブサイトに埋め込みます。

トークンをサードパーティのウェブサイトに埋め込むには、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 とマークされています。