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">![ウィジェット モードでは、ユーザーが有効にしなくても、パソコンの Chrome の右上にダイアログが表示されます。](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-widget-mode.jpg?authuser=9&hl=ja)
新しい 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 の上部中央に表示されます。](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-button-mode.jpg?authuser=9&hl=ja)
Chrome 125 を使用して、 https://fedcm-rp-demo.glitch.me/button_flow.
<ph type="x-smartling-placeholder">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
とマークされています。