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

Eiji Kitamura

Ab Chrome 125 wird die Button Mode API auf dem Computer getestet. 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-Ablaufs auffälliger, da sie durch eine Nutzeraktion ausgelöst wird und die Absicht des Nutzers, sich anzumelden, besser widerspiegelt.

Button Mode API

Die FedCM-Benutzeroberfläche ist als Widget in der oberen rechten Ecke auf dem Computer oder als Bottom Sheet auf Mobilgeräten verfügbar, sobald die API aufgerufen wird. Das kann passieren, wenn der Nutzer auf der Website der vertrauenden Partei landet. Das wird als Widget-Modus bezeichnet. Damit das Widget angezeigt wird, muss der Nutzer beim IdP angemeldet sein, bevor er auf der RP-Seite landet. FedCM selbst bot keine zuverlässige Möglichkeit, den Nutzer beim Identitätsanbieter anzumelden, bevor er sich mit dem beim Identitätsanbieter verfügbaren Konto beim Relying Party anmelden konnte. FedCM bietet bald eine Möglichkeit, dies zu tun.

Die neue Button Mode API bietet einen neuen UI-Modus namens button. Im Gegensatz zum Widget-Modus soll der Schaltflächenmodus nicht aufgerufen werden, sobald der Nutzer auf der RP landet. Sie soll stattdessen aufgerufen werden, wenn der Nutzer einen Anmeldevorgang startet, z. B. durch Drücken der Schaltfläche „Mit IdP anmelden“.

Sobald die Schaltfläche gedrückt wird, prüft FedCM, ob der Nutzer über einen Fetch-Vorgang zum Kontenendpunkt oder einen im Browser gespeicherten Anmeldestatus beim IdP angemeldet ist. Wenn der Nutzer noch nicht angemeldet ist, fordert FedCM ihn auf, sich über das Pop-up-Fenster mit dem 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 mit dem Pop-up-Fenster beim Identitätsanbieter anmeldet, öffnet FedCM ein modales Dialogfeld, in dem der Nutzer ein Identitätsanbieterkonto für die Anmeldung auswählen kann. Durch Auswahl eines Kontos kann sich der Nutzer mit dem IdP-Konto beim RP anmelden.

In der Benutzeroberfläche im Schaltflächenmodus ist das angezeigte Anmeldedialogfeld größer als im Widget-Modus. Daher sollte auch das Markensymbol größer sein, um die visuelle Konsistenz zu wahren. Die Mindestgröße für das Symbol 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 angegeben werden:

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}

Sie können es selbst mit Chrome 125 unter https://fedcm-demo-rp.dev/active-mode ausprobieren.

So verwenden Sie die Button Mode API:

• Aktivieren Sie die experimentelle Funktion FedCmButtonMode in chrome://flags.
• Die API muss hinter einer vorübergehenden Nutzeraktivierung aufgerufen werden, z. B. durch 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 den ID-Assertion-Endpunkt, der den Anfragetyp darstellt, indem er mode=button enthält:

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

Mit dem folgenden Code können Sie prüfen, ob der Browser für die Verwendung des Schaltflächenmodus geeignet ist:

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

Option „Anderes Konto verwenden“

Der RP kann Nutzern erlauben, in der Kontoauswahl „Andere Konten verwenden“ auszuwählen, z. B. wenn IdPs mehrere Konten unterstützen oder das bestehende Konto ersetzt wird.

So aktivieren Sie die Option, ein anderes Konto zu verwenden:

• Aktivieren Sie die experimentelle Funktion FedCmUseOtherAccount in chrome://flags oder registrieren Sie sich für den Ursprungstest der Button Mode API.
• Der IdP gibt Folgendes in der IdP-Konfigurationsdatei 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 ein Chrome-Flag chrome://flags#fedcm-button-mode aktivieren.

IdPs können den Schaltflächenmodus auch aktivieren, indem sie einen Ursprungstest registrieren:

• Registrieren Sie einen Ursprungstest eines Drittanbieters für den RP.

Mit Ursprungstests können Sie neue Funktionen ausprobieren und der Webstandards-Community Feedback zu ihrer Benutzerfreundlichkeit, Praktikabilität und Effektivität geben. Weitere Informationen finden Sie im Origin Trials Guide for Web Developers.

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 Origin ein.
4. Aktivieren Sie „Drittanbieterabgleich“, um das Token mit JavaScript in andere Ursprünge einzufügen.
5. Klicken Sie auf Senden.
6. Bette das ausgestellte Token auf einer Drittanbieterwebsite 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.

CORS und SameSite=None sind in Chrome 125 erforderlich

CORS

Ab Chrome 125 wird in Chrome CORS für den ID-Bestätigungsendpunkt 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 Cross-Origin-Anfragen blockieren. Der ID-Bestätigungsendpunkt auf dem IdP-Server muss auf die Anfrage mit zusätzlichen Headern antworten. Das Folgende 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=None

Mit dem SameSite-Parameter eines Cookies wird deklariert, ob das Cookie auf einen Erstanbieter- oder SameSite-Kontext beschränkt ist. Wenn Sie None angeben, kann das Cookie an eine Drittanbieterdomain gesendet werden.

Bei FedCM sendet Chrome Cookies an den Kontenendpunkt, den ID-Assertion-Endpunkt und den Endpunkt zum Trennen der Verbindung. Ab Chrome 125 werden diese Anfragen mit Anmeldedaten nur mit Cookies gesendet, die explizit als SameSite=None gekennzeichnet sind.