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

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

Eiji Kitamura

Chrome 125 以降、ボタンモード API のオリジントライアルがパソコンで開始されます。ボタンモード API を使用すると、ユーザーが API 呼び出し時にアクティブな IdP セッションを持っていない場合でも、ID プロバイダは FedCM API を使用できます。ユーザーは IdP サイトに移動することなく、フェデレーションアカウントでウェブサイトにログインできます。ボタンモードの FedCM UI は、ユーザーの操作によってゲートされるため、既存のウィジェットフローの UI よりも目立ち、ログインに対するユーザーの意図をより適切に反映します。

Button Mode API

FedCM ユーザーインターフェースは、API が呼び出されるとすぐに、パソコンでは右上隅に表示されるウィジェットとして、モバイルではボトムシートとして利用可能になりました。API は、ユーザーが証明書利用者（RP）にアクセスしたときに呼び出される可能性があります。これを「ウィジェットモード」と呼びます。ウィジェットを表示するには、ユーザーが RP にアクセスする前に IdP にログインしている必要があります。FedCM 自体には、ユーザーが IdP で利用可能なアカウントを使用して RP にログインする前に、ユーザーが IdP にログインできるようにする信頼性の高い方法がありませんでした。FedCM では、このための方法が追加されようとしています。

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

新しい Button Mode API は、button モードという新しい UI モードを追加します。ウィジェットモードとは異なり、ボタンモードはユーザーが RP にアクセスした直後に呼び出されるものではありません。このメソッドは、ユーザーが [IdP でログイン] ボタンを押すなどしてログインフローを開始したときに呼び出すことを想定しています。

ボタンが押されるとすぐに、FedCM はアカウントエンドポイントへのフェッチまたはブラウザに保存されたログインステータスを通じて、ユーザーが IdP にログインしているかどうかを確認します。ユーザーがまだログインしていない場合、FedCM は、ポップアップウィンドウを介して IdP から提供された login_url を使用して IdP にログインするようユーザーに求めます。ブラウザがユーザーがすでに IdP にログインしていることを認識している場合、またはユーザーがポップアップウィンドウで IdP にログインするとすぐに、FedCM はユーザーがログインに使用する IdP アカウントを選択するためのモーダルダイアログを開きます。アカウントを選択すると、ユーザーは IdP アカウントを使用して RP にログインできます。

ボタンモードの UI では、表示されるログインダイアログがウィジェットモードよりも大きいため、視覚的な一貫性を保つために、ブランディングアイコンも大きくする必要があります。ウィジェットモードのアイコンの最小サイズは 25x25 ピクセルですが、ボタンモードのアイコンの最小サイズは 40x40 ピクセルです。IdP の既知のファイルでは、次のように複数のアイコン 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-demo-rp.dev/active-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"
    }
  });

ブラウザは、mode=button を含めることでリクエストタイプを表す新しいパラメータを ID アサーションエンドポイントに送信します。

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.
}

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

たとえば、IdP が複数のアカウントをサポートしている場合や、既存のアカウントを置き換える場合、RP はアカウント選択ツールでユーザーが「他のアカウントを使用」できるようにすることができます。

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

chrome://flags で試験運用版機能 FedCmUseOtherAccount を有効にするか、Button Mode API のオリジントライアルに登録します。
IdP は、IdP 構成ファイルで次の項目を指定します。

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

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

Chrome 125 以降で Chrome フラグ chrome://flags#fedcm-button-mode をオンにすると、ボタンモード API をローカルで試すことができます。

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

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

オリジントライアルでは、新機能を試して、そのユーザビリティ、実用性、有効性に関するフィードバックをウェブ標準コミュニティに送信できます。詳しくは、ウェブデベロッパー向けのオリジントライアルガイドをご覧ください。

Button Mode API のオリジントライアルは、Chrome 125 から Chrome 130 までご利用いただけます。

オリジントライアルの登録ページに移動します。
[登録] ボタンをクリックし、フォームに記入してトークンをリクエストします。
IdP のオリジンを [Web Origin] として入力します。
[サードパーティのマッチング] をオンにして、他のオリジンで 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 は、独自のトークンに置き換えます。

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

CORS

Chrome 125 以降、ID アサーションエンドポイントで CORS が適用されます。

CORS（クロスオリジンリソースシェアリング）は、HTTP ヘッダーの送信で構成されるシステムです。このシステムは、ブラウザがフロントエンドの JavaScript コードによるクロスオリジンリクエストのレスポンスへのアクセスをブロックするかどうかを決定します。IdP サーバーの ID アサーションエンドポイントは、追加のヘッダーを使用してリクエストに応答する必要があります。次に、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 はアカウントエンドポイント、ID アサーションエンドポイント、切断エンドポイントに Cookie を送信します。Chrome 125 以降では、Chrome は SameSite=None と明示的にマークされた Cookie のみを含む認証情報付きリクエストを送信します。