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 の右上にダイアログが表示されます。](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-125-widget-mode.jpg?hl=ja)
新しい Button Mode API には、ボタンモードという新しい UI モードが追加されています。ウィジェット モードとは異なり、ボタンモードはユーザーが RP に到達したらすぐに呼び出されるものではありません。これは、ユーザーが「IdP でログイン」ボタンを押すなど、ログインフローを開始したときに呼び出されることを意図しています。
ボタンが押されると、FedCM はアカウント エンドポイントへのフェッチまたはブラウザに保存されたログイン ステータスによって、ユーザーが IdP にログインしているかどうかをチェックします。ユーザーがまだログインしていない場合、FedCM は、ポップアップ ウィンドウで IdP から提供される login_url
を使用して IdP にログインするようユーザーに求めます。ユーザーがすでに IdP にログインしていることをブラウザが認識している場合、またはユーザーがポップアップ ウィンドウで IdP にログインするとすぐに、FedCM はモーダル ダイアログを開いて、ログインに使用する IdP アカウントを選択します。アカウントを選択すると、ユーザーは IdP アカウントを使用して RP にログインできます。
![ボタンモードでは、パソコン版 Chrome の上部中央にモーダル ダイアログが表示されます。](https://developers.google.cn/static/privacy-sandbox/assets/images/blog/fedcm-125-button-mode.jpg?hl=ja)
https://fedcm-rp-demo.glitch.me/button_flow で Chrome 125 を使用して実際に試すことができます。
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.
}
他のアカウント オプションを使用
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 のみを使用して、これらの認証情報付きリクエストを送信します。