FedCM-Updates: Ursprungstest der Button Mode API, CORS und SameSite

Eiji Kitamura

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. z. B. 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">

</ph>

Im Widget-Modus wird in der Desktopversion von Chrome oben rechts ein Dialogfeld ohne Nutzeraktivierung angezeigt.

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 in der 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 wahren. 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 die Nutzung von 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 mit einem größeren Symbol angezeigt.

Probieren Sie es mit Chrome 125 selbst aus unter https://fedcm-rp-demo.glitch.me/button_flow.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Ein Nutzer meldet sich über die Button Mode API beim RP an.

So verwenden Sie die Button Mode API:

• Die experimentelle Funktion FedCmButtonMode in chrome://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"
    }
  });

Hinweis: Chrome unterstützt "button" vorerst nur in der neuen mode-Property. Sonstiges Eigenschaften wie "widget" werden hinzugefügt, sobald diese Funktion in Chrome verfügbar ist.

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

Hinweis :Wenn ein Fehler auftritt, wird der FedCM API-Aufruf über den Schaltflächenmodus und im Widget-Modus die Antwort verzögert. bewusst. Das liegt daran, dass der Anmeldestatus des Nutzers beim IdP als private Informationen betrachtet werden. Das Senden eines Fehlersignals führt dazu, Hinweis zum IdP-Anmeldestatus des Nutzers Im Schaltflächenmodus wird die nutzende Person gefragt, um sich trotzdem beim IdP anzumelden, ist die IdP-Anmeldung des Nutzers nicht gefährdet. zum RP hinzufügen.

Hinweis :Nutzer können den FedCM-Widget-Modus in Chrome deaktivieren. Einstellungen. Das ist nicht sich auf die Button Mode API auswirken, da die Anmeldeanfrage von einem Nutzer initiiert wird. und der Browser sollen Nutzer dabei unterstützen, sich anzumelden.

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

Der 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 in chrome://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 von Drittanbietern 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.

1. Zur Registrierung für Ursprungstest .
2. Klicken Sie auf die Schaltfläche Registrieren und füllen Sie das Formular aus, um ein Token anzufordern.
3. Geben Sie den Ursprung des IdP als Web Origin (Web-Ursprung) ein.
4. Klicken Sie das Kästchen „Drittanbieter-Abgleich“ an, um das Token mit JavaScript auf anderen Ursprüngen.
5. Klicken Sie auf Senden.
6. 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.

Hinweis: Wenn die FedCM API vom RP und nicht vom vom IdP geladenen Script aufgerufen wird, Der RP muss seinen Ursprung selbst registrieren und seinen eigenen Ursprung haben. testen.

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

Hinweis :Da Access-Control-Allow-Credentials auf „true“ gesetzt ist, Access-Control-Allow-Origin muss explizit eine Domain zurückgeben und kann Folgendes nicht verwenden: Platzhalter, angegeben durch *.

SameSite=Keine

SameSite von Cookies Parameter angibt, ob ist das Cookie auf einen Erstanbieter- oder Websitekontext 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 trennen Endpunkt. Ab Chrome 125 sendet Chrome diese Anfragen mit Anmeldedaten nur mit Cookies ausdrücklich als SameSite=None gekennzeichnet.