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

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

Eiji Kitamura

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

ボタンモード API

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

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

新しい Button Mode API には、ボタンモードという新しい UI モードが追加されています。ウィジェットモードとは異なり、ボタンモードはユーザーが RP に到達したらすぐに呼び出されるものではありません。これは、ユーザーが「IdP でログイン」ボタンを押すなど、ログインフローを開始したときに呼び出されることを意図しています。

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

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

https://fedcm-rp-demo.glitch.me/button_flow で Chrome 125 を使用して実際に試すことができます。

ユーザーが 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"
    }
  });

ブラウザは、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

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

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

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

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

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

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

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

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

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

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

Button Mode API オリジントライアルは Chrome 125 ～ Chrome 127 で利用できます。

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

トークンをサードパーティのウェブサイトに埋め込むには、IdP の JavaScript ライブラリまたは IdP の送信元から提供される 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 125 以降、ID アサーションエンドポイントに CORS が適用されます。

CORS（Cross-Origin-Resource-Sharing）は、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 以降では、明示的に SameSite=None とマークされた Cookie のみを使用して、これらの認証情報付きリクエストを送信します。

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