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

Eiji Kitamura

Ab Chrome 125 wird die Button Mode API auf dem Computer im Rahmen eines Ursprungstests eingeführt. Mit der Button Mode API können Identitätsanbieter die FedCM API auch dann verwenden, wenn ihre Nutzer beim API-Aufruf keine aktiven IdP-Sitzungen haben. Nutzer können sich dann mit ihrem föderierten Konto auf einer Website anmelden, ohne zur IdP-Website weitergeleitet zu werden. Die FedCM-Benutzeroberfläche im Schaltflächenmodus ist im Vergleich zur Benutzeroberfläche des vorhandenen Widget-Flows auffälliger, da sie durch eine Nutzergeste geschützt ist und die Absicht des Nutzers, sich anzumelden, besser widerspiegelt.

Button Mode API

Die FedCM-Benutzeroberfläche war als Widget verfügbar, das auf dem Computer rechts oben oder auf Mobilgeräten als Unterbrechung unten angezeigt wurde, sobald die API aufgerufen wurde. Das kann der Fall sein, wenn der Nutzer die Seite der vertrauenden Partei (RP) aufruft. Dies wird als Widget-Modus bezeichnet. Damit das Widget angezeigt wird, muss der Nutzer beim IdP angemeldet sein, bevor er zur RP weitergeleitet wird. FedCM bot keine zuverlässige Möglichkeit, den Nutzer beim Identitätsanbieter anzumelden, bevor er sich mit dem beim Identitätsanbieter verfügbaren Konto beim RP anmelden konnte. FedCM wird demnächst eine entsprechende Funktion enthalten.

Im Widget-Modus wird in Chrome auf dem Computer ohne Nutzeraktivierung ein Dialogfeld rechts oben angezeigt.

Die neue Button Mode API fügt einen neuen UI-Modus namens button hinzu. Im Gegensatz zum Widget-Modus soll der Schaltflächenmodus nicht aufgerufen werden, sobald der Nutzer die Landingpage erreicht. Sie soll stattdessen aufgerufen werden, wenn der Nutzer einen Anmeldevorgang initiiert, z. B. durch Drücken der Schaltfläche „Über IdP anmelden“.

Sobald die Schaltfläche gedrückt wird, prüft FedCM, ob der Nutzer über einen Abruf des Endpunkts für Konten oder einen im Browser gespeicherten Anmeldestatus beim Identitätsanbieter angemeldet ist. Wenn der Nutzer noch nicht angemeldet ist, wird er von FedCM aufgefordert, sich über das Pop-up-Fenster mit der vom Identitätsanbieter bereitgestellten login_url beim Identitätsanbieter anzumelden. Wenn der Browser weiß, dass der Nutzer bereits beim Identitätsanbieter angemeldet ist, oder sobald sich der Nutzer über das Pop-up-Fenster beim Identitätsanbieter anmeldet, öffnet FedCM ein modales Dialogfeld, in dem der Nutzer ein Identitätsanbieterkonto auswählen kann, mit dem er sich anmelden möchte. Durch Auswahl eines Kontos kann sich der Nutzer mit dem IdP-Konto beim RP anmelden.

Im Schaltflächenmodus ist das angezeigte Anmeldedialogfeld im Vergleich zum Widget-Modus größer. Das sollte auch für das Brandingsymbol gelten, um für visuelle Einheitlichkeit zu sorgen. Die Mindestgröße des Symbols im Widget-Modus beträgt 25 × 25 Pixel, im Schaltflächenmodus 40 × 40 Pixel. In der Well-Known-Datei des IdP können mehrere Symbol-URLs so angegeben werden:

{
  // ... 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 Mitte oben im Chrome-Desktop ein modales Dialogfeld mit einem größeren Symbol angezeigt.

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

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

So verwenden Sie die Button Mode API:

• Aktivieren Sie die experimentelle Funktion FedCmButtonMode in chrome://flags.
• Die API muss bei einer vorübergehenden Nutzeraktivierung aufgerufen werden, z. B. bei einem Klick auf eine Schaltfläche.
• Rufen Sie die API mit dem Parameter mode auf:

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

Hinweis :In Chrome wird "button" derzeit nur in der neuen Property mode unterstützt. Weitere Properties wie "widget" werden hinzugefügt, sobald diese Funktion in Chrome eingeführt wird.

Der Browser sendet einen neuen Parameter an den Endpunkt für die ID-Bestätigung, der den Anfragetyp darstellt. Dazu wird mode=button verwendet:

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, reagiert der FedCM API-Aufruf im Schaltflächenmodus sofort. Im Widget-Modus wird die Antwort dagegen absichtlich verzögert. Das liegt daran, dass der Anmeldestatus des Nutzers beim IdP als vertrauliche Information gilt. Wenn ein Fehlersignal gesendet wird, erhält der RP einen Hinweis auf den Anmeldestatus des Nutzers beim IdP. Im Schaltflächenmodus wird der Nutzer ohnehin aufgefordert, sich beim IdP anzumelden. Es besteht also keine Gefahr, dass der Anmeldestatus des Nutzers beim IdP an den RP weitergegeben wird.

Hinweis :Nutzer können den FedCM-Widget-Modus in den Chrome-Einstellungen deaktivieren. Dies hat keine Auswirkungen auf die Button Mode API, da die Anmeldeanfrage durch eine Nutzergeste initiiert wird und der Browser Nutzern beim Abschluss des Anmeldevorgangs helfen sollte.

Funktionserkennung

Mit dem folgenden Code kannst du prüfen, ob der Browser den Schaltflächenmodus verwenden kann:

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 Nutzern erlauben, in der Kontoauswahl „andere Konten verwenden“ auszuwählen, z. B. wenn IdPs mehrere Konten unterstützen oder das vorhandene Konto ersetzen.

So aktivieren Sie die Option zum Verwenden eines anderen Kontos:

• Aktiviere die experimentelle Funktion FedCmUseOtherAccount in chrome://flags oder registriere dich für den Test des Button Mode API-Ursprungs.
• Der IdP gibt in der IdP-Konfigurationsdatei Folgendes an:

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

Am Ursprungstest teilnehmen

Sie können die Button Mode API lokal testen, indem Sie in Chrome 125 oder höher eine Chrome-Flag aktivierenchrome://flags#fedcm-button-mode.

IdPs können den Schaltflächenmodus auch aktivieren, indem sie einen Test für den Ursprung registrieren:

• Registrieren Sie einen Test für den Ursprung von Drittanbietern für den RP.

Mit Ursprungstests können Sie neue Funktionen ausprobieren und der Webstandards-Community Feedback zu ihrer Nutzerfreundlichkeit, Praktikabilität und Effektivität geben. Weitere Informationen findest du im Leitfaden für Origin-Tests für Webentwickler.

Der Ursprungstest für die Button Mode API ist von Chrome 125 bis Chrome 130 verfügbar.

1. Rufen Sie die Registrierungsseite für den Ursprungstest auf.
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-Ursprung ein.
4. Aktivieren Sie die Option „Drittanbieterabgleich“, um das Token mit JavaScript in anderen Ursprüngen einzuschleusen.
5. Klicken Sie auf Senden.
6. Binde das ausgestellte Token auf einer Drittanbieter-Website ein.

Wenn Sie das Token auf einer Drittanbieterwebsite einbetten möchten, fügen Sie der JavaScript-Bibliothek oder dem SDK des Identitätsanbieters, das vom Ursprung des Identitätsanbieters bereitgestellt wird, den folgenden Code hinzu.

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, muss der RP seinen Ursprung selbst registrieren und einen Test für den selbst erhobenen Ursprung ausführen.

CORS und SameSite=None sind in Chrome 125 erforderlich

CORS

Ab Chrome 125 wird in Chrome CORS für den Endpunkt für die ID-Bestätigung erzwungen.

CORS (Cross-Origin Resource Sharing) ist ein System, das aus der Übertragung von HTTP-Headern besteht und bestimmt, ob Browser den Zugriff von Frontend-JavaScript-Code auf Antworten für plattformübergreifende Anfragen blockieren. Der Endpunkt für die ID-Bestätigung auf dem IdP-Server muss mit zusätzlichen Headern auf die Anfrage antworten. Im folgenden Beispiel wird ein Antwortheader für eine Anfrage von https://fedcm-rp-demo.glitch.me gezeigt:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

Hinweis :Da Access-Control-Allow-Credentials auf „wahr“ gesetzt ist, muss Access-Control-Allow-Origin eine Domain explizit zurückgeben und kann kein *-Wildcard verwenden.

SameSite=None

Der SameSite-Parameter des Cookies gibt an, ob das Cookie auf eigene Cookies oder auf den Kontext der Website beschränkt ist. Wenn Sie None angeben, kann das Cookie an eine Drittanbieterdomain gesendet werden.

Bei FedCM sendet Chrome Cookies an den Endpunkt für Konten, den Endpunkt für die ID-Bestätigung und den Endpunkt für die Trennung. Ab Chrome 125 sendet Chrome bei diesen Anfragen mit Anmeldedaten nur Cookies, die explizit als SameSite=None gekennzeichnet sind.