Ab Chrome 125 startet die Button Mode API Ursprungstest auf dem Computer. Mit der Button Mode API können Identitätsanbieter FedCM API verwenden, auch wenn die Nutzer nach dem API-Aufruf keine aktiven IdP-Sitzungen haben. Nutzer können sich dann mit ihrem föderierten Konto auf einer Website anmelden, die IdP-Website aufgerufen haben. Die FedCM-Benutzeroberfläche im Schaltflächenmodus ist auffälliger im Vergleich zu denen aus dem vorhandenen Widget-Ablauf, da es von einem und besser die Anmeldeabsicht des Nutzers widerspiegelt.
Button Mode API
Die FedCM-Benutzeroberfläche war bisher als Widget oben rechts verfügbar. auf einem Desktop oder als Ansicht am unteren Rand auf einem Mobilgerät, sobald die API aufgerufen wird. Das kann der Fall sein, wenn der Nutzer auf der vertrauenden Seite (RP) landet. Dies wird als Widget-Modus verwenden. Damit das Widget angezeigt werden kann, muss der Nutzer beim IdP angemeldet sein bevor sie auf der RP landen. FedCM allein hatte keine verlässliche Möglichkeit, Der Nutzer meldet sich beim IdP an, bevor er sich beim RP anmelden kann. mit dem beim IdP verfügbaren Konto. FedCM wird demnächst eine Möglichkeit hinzufügen, dies zu ermöglichen.
<ph type="x-smartling-placeholder">![Im Widget-Modus wird oben rechts in der Chrome-Desktopversion ein Dialogfeld ohne Aktivierung durch den Nutzer angezeigt.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-widget-mode.jpg?authuser=8&hl=de)
Die neue Button Mode API fügt einen neuen UI-Modus namens Schaltflächenmodus hinzu. Im Gegensatz zur sollte der Schaltflächenmodus nicht aktiviert werden, RP. Sie soll stattdessen aufgerufen werden, wenn der Nutzer einen Anmeldevorgang startet. z. B. durch Drücken der Option „Über IdP anmelden“ Schaltfläche.
Sobald auf die Schaltfläche geklickt wird, prüft FedCM, ob der Nutzer im
Identitätsanbieter über einen Abruf der Konten
Endpunkt oder
ein Anmeldestatus, der im
Browser Wenn die
noch nicht angemeldet ist, wird der Nutzer von FedCM aufgefordert, sich über die
login_url
die vom IdP in einem Pop-up-Fenster bereitgestellt werden. Wenn der Browser weiß,
bereits beim IdP angemeldet ist oder sobald sich der Nutzer mit
Pop-up-Fenster öffnet FedCM ein modales Dialogfeld, in dem der Nutzer einen IdP auswählen kann.
Konto, in dem Sie sich anmelden möchten. Wenn der Nutzer ein Konto auswählt, kann er sich anmelden
mit dem IdP-Konto beim RP anmelden.
Auf der Benutzeroberfläche des Schaltflächenmodus ist das angezeigte Anmeldedialogfeld größer als die der und das Markensymbol, um optische Einheitlichkeit zu gewährleisten. Die Mindestgröße der Symbole für den Widget-Modus beträgt 25 x 25 Pixel. Die Mindestgröße für ist das Symbol im Schaltflächenmodus 40 x 40 Pixel groß. Die bekannte Methode des IdP Datei ermöglicht es, mehrere Symbol-URLs angeben:
{
// ... Other settings (like endpoints) here
"branding": {
"icons": [
{
"url": "https://size-25px-image",
"size": 25,
},
{
"url": "https://size-40px-image",
"size": 40
}
]
}
}
![Im Schaltflächenmodus wird in der Desktop-Version von Chrome oben in der Mitte ein modales Dialogfeld angezeigt.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-125-button-mode.jpg?authuser=8&hl=de)
Probieren Sie es mit Chrome 125 selbst aus unter https://fedcm-rp-demo.glitch.me/button_flow.
<ph type="x-smartling-placeholder">So verwenden Sie die Button Mode API:
- Die experimentelle Funktion
FedCmButtonMode
inchrome://flags
aktivieren. - Achten Sie darauf, die API hinter der vorübergehenden Nutzeraktivierung aufzurufen. etwa das Klicken auf eine Schaltfläche.
- Rufen Sie die API mit dem Parameter
mode
so auf:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/config.json",
clientId: "123",
nonce:"456",
}],
mode: "button"
}
});
Der Browser sendet einen neuen Parameter an die ID-Assertion
Endpunkt
Anfragetyp darstellen, indem mode=button
eingefügt wird:
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
Funktionserkennung
Um festzustellen, ob der Browser für die Verwendung des Schaltflächenmodus geeignet ist, können Sie mit dem folgenden Code prüfen:
let supportsFedCmMode = false;
try {
navigator.credentials.get({
identity: Object.defineProperty(
{}, 'mode', {
get: function () { supportsFedCmMode = true; }
}
)
});
} catch(e) {}
if (supportsFedCmMode) {
// The button mode is supported.
}
Andere Kontooption verwenden
Das RP kann es Nutzern ermöglichen, „andere Konten zu verwenden“ in der Kontoauswahl für z. B. wenn IdPs mehrere Konten unterstützen oder das vorhandene Konto ersetzen.
So aktivieren Sie die Option zur Verwendung eines anderen Kontos:
- Experimentelle Funktion
FedCmUseOtherAccount
inchrome://flags
aktivieren oder registrieren Sie den Button Mode API-Ursprungstest. - Der IdP gibt in der IdP-Konfiguration Folgendes an: Datei:
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
Am Ursprungstest teilnehmen
Sie können die Button Mode API lokal testen, indem Sie einen Chrome-Browser
melden
chrome://flags#fedcm-button-mode
unter Chrome 125 oder höher.
IdPs können den Schaltflächenmodus auch aktivieren, indem sie einen Ursprungstest registrieren:
- Ursprungstest durch Drittanbieter registrieren für die RP.
Mit Ursprungstests können Sie neue Funktionen ausprobieren und Feedback zu ihren Nutzerfreundlichkeit, Praktische und Effektivität für die Webstandards-Community. Für Weitere Informationen finden Sie im Leitfaden zu Ursprungstests für das Web Entwickler:
Der Button Mode API-Ursprungstest ist ab Chrome 125 über Chrome verfügbar 130.
- Zur Registrierung für Ursprungstests .
- Klicken Sie auf die Schaltfläche Registrieren und füllen Sie das Formular aus, um ein Token anzufordern.
- Geben Sie den Ursprung des IdP als Web Origin (Web-Ursprung) ein.
- Klicken Sie das Kästchen „Drittanbieter-Abgleich“ an, um das Token mit JavaScript auf anderen Ursprüngen.
- Klicken Sie auf Senden.
- Betten Sie das ausgestellte Token auf der Website eines Drittanbieters ein.
Um das Token auf der Website eines Drittanbieters einzubetten, fügen Sie den folgenden Code in das Feld JavaScript-Bibliothek oder SDK, die vom Ursprung des IdP bereitgestellt wird.
const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);
Ersetzen Sie TOKEN_GOES_HERE
durch Ihr eigenes Token.
CORS und SameSite=None
sind in Chrome 125 erforderlich
CORS
erzwingt Chrome CORS auf dem ID Assertion Endpunkt ab Chrome 125.
CORS (Cross-Origin-Resource-Sharing) ist ein System, bei dem
HTTP-Header, mit denen festgelegt wird, ob Browser Front-End-JavaScript-Code blockieren
auf Antworten für ursprungsübergreifende Anfragen. Der ID-Assertion-Endpunkt auf
muss der IdP-Server auf die Anfrage mit zusätzlichen Headern antworten. Die
Hier ist ein Beispiel für einen Antwortheader auf eine Anfrage von
https://fedcm-rp-demo.glitch.me
:
Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true
SameSite=Keine
SameSite von Cookies
Parameter angibt, ob
ist das Cookie auf Erstanbieter- oder Websitekontexte beschränkt. Durch Angeben
auf None
gesetzt ist, kann das Cookie an eine Drittanbieter-Domain gesendet werden.
In FedCM sendet Chrome Cookies an die Konten
Endpunkt,
die ID-Assertion
Endpunkt und
die Verbindung getrennt wird
Endpunkt. Ab
Chrome 125 sendet Chrome diese Anfragen mit Anmeldedaten nur mit Cookies
explizit als SameSite=None
gekennzeichnet.