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. 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>

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
      }
    ]
  }
}

</ph>

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

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"
    }
  });

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 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 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.

1. Zur Registrierung für Ursprungstests .
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.

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.