FedCM-Updates: IdP Sign-In Status API, Login Hint und mehr

Chrome 116 enthält FedCM-Funktionen wie die Login Hint API, die User Info API und die RP Context API. Außerdem wird ein Ursprungstest für die IdP Sign-In Status API gestartet.

In Chrome 116 sind die folgenden drei neuen Funktionen für die Federated Credential Management API (FedCM) verfügbar:

  • Login Hint API: Geben Sie ein bevorzugtes Nutzerkonto an, mit dem angemeldet werden soll.
  • User Info API: Hiermit werden die Informationen des wiederkehrenden Nutzers abgerufen, damit der Identitätsanbieter (IdP) eine personalisierte Anmeldeschaltfläche in einem Iframe anzeigen kann.
  • RP Context API: Verwenden Sie im FedCM-Dialogfeld einen anderen Titel als „Anmelden“.

Außerdem startet Chrome einen Origin-Test für die IdP Sign-In Status API. Die IdP Sign-in Status API ist eine Anforderung und wird eine gravierende Änderung darstellen, wenn sie eingeführt wird. Wenn Sie bereits eine FedCM-Implementierung haben, sollten Sie am Ursprungstest teilnehmen.

Login Hint API

Wenn FedCM aufgerufen wird, zeigt der Browser das angemeldete Konto des angegebenen Identitätsanbieters (IdP) an. Wenn der Identitätsanbieter mehrere Konten unterstützt, werden alle angemeldeten Konten aufgeführt.

Ein FedCM-Dialogfeld mit mehreren Nutzerkonten
Ein FedCM-Dialogfeld mit mehreren Nutzerkonten

Nach der Anmeldung des Nutzers wird er manchmal von der vertrauenden Partei (RP) aufgefordert, sich noch einmal zu authentifizieren. Der Nutzer ist sich jedoch möglicherweise nicht sicher, welches Konto er verwendet hat. Wenn der RP angeben kann, mit welchem Konto er sich anmelden soll, kann der Nutzer leichter ein Konto auswählen. Der Hinweis zur Anmeldung wird in Chrome 116 eingeführt. Damit kann der RP die Liste auf einen Eintrag eingrenzen.

Diese Erweiterung fügt der Antwort vom Endpunkt „accounts list“ des Identitätsanbieters ein Array von login_hints mit allen möglichen Filtertypen hinzu, die der Identitätsanbieter unterstützt. Wenn ein IdP das Filtern nach E-Mail-Adresse und ID unterstützt, könnte die Antwort für Konten beispielsweise so aussehen:

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

Wenn der RP login_hints in der Kontoliste übergibt, kann er navigator.credentials.get() mit der Property loginHint aufrufen, wie im folgenden Codebeispiel gezeigt, um das angegebene Konto selektiv anzuzeigen:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

User Info API

Anmeldeschaltflächen mit dem Logo des Identitätsanbieters, über die sich Nutzer mithilfe der Identitätsfederation anmelden können, sind heute üblich. Wenn Sie die Schaltfläche jedoch mit dem Profilsymbol und den Informationen des Nutzers versehen, ist die Anmeldung noch intuitiver, insbesondere wenn sich ein Nutzer bereits auf dieser Website über den Identitätsanbieter registriert hat.

Schaltfläche „Über Google anmelden“
Schaltfläche „Über Google anmelden“
Personalisierte Schaltfläche „Über Google anmelden“
Personalisierte Schaltfläche „Über Google anmelden“

Da die personalisierte Schaltfläche jedoch auf den Drittanbieter-Cookies in der IdP-Domain innerhalb eines Iframes angewiesen ist, um den angemeldeten Nutzer zu identifizieren und die Schaltfläche zu rendern, ist sie nicht mehr verfügbar, sobald Drittanbieter-Cookies eingestellt werden.

Die User Info API, die in Chrome 116 eingeführt wird, bietet dem Identitätsanbieter die Möglichkeit, die Informationen des wiederkehrenden Nutzers vom Server abzurufen, ohne auf Drittanbieter-Cookies angewiesen zu sein.

Die API wird vom IdP voraussichtlich über einen iFrame aufgerufen, der auf der Website des RP eingebettet ist, damit die Nutzerinformationen abgerufen und eine personalisierte Schaltfläche gerendert werden kann, als wäre sie Teil der RP-Oberfläche. Über den API-Aufruf sendet der Browser eine Anfrage an den Endpunkt für die Kontoliste und gibt dann ein Array mit Nutzerinformationen zurück, wenn:

  • Der Nutzer hat sich in der Vergangenheit über die gleiche Browserinstanz mit dem Identitätsanbieter über FedCM bei der vertrauenden Partei angemeldet und die Daten wurden nicht gelöscht.
  • Der Nutzer ist in derselben Browserinstanz beim IdP angemeldet.
// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

Damit IdentityProvider.getUserInfo() aus einem Iframe aufgerufen werden kann, der denselben Ursprung wie der Identitätsanbieter hat, muss dies in der HTML-Embedding-Datei ausdrücklich mit der identity-credentials-get-Berechtigungsrichtlinie zugelassen werden.

<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>

Sie können sich die Funktion unter https://fedcm-rp-demo.glitch.me/button ansehen.

RP Context API

Mit der RP Context API, die in Chrome 116 eingeführt wird, kann ein RP den String in der FedCM-Dialog-Benutzeroberfläche so ändern, dass er vordefinierte Authentifizierungskontexte unterstützt. In den folgenden Screenshots sind verschiedene Optionen zu sehen:

FedCM-Dialogfeld mit „Bei **** anmelden“ gerendert
FedCM-Dialogfeld mit „Bei **** anmelden“ gerendert. Dies ist die Standardoption, wenn der RP-Kontext nicht angegeben ist.
FedCM-Dialogfeld gerendert mit
FedCM-Dialogfeld mit „Bei **** registrieren“
FedCM-Dialogfeld gerendert mit
FedCM-Dialogfeld mit „Weiter zu ****“ gerendert
FedCM-Dialogfeld mit „**** verwenden“
FedCM-Dialogfeld mit „**** verwenden“ gerendert

Die Verwendung ist ganz einfach: Geben Sie für das Attribut identity.context einen der folgenden Werte an: "signin" (Standard), "signup", "use" oder "continue".

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

Ursprungstest der IdP Sign-In Status API

Chrome startet einen Ursprungstest der IdP Sign-In Status API auf dem Computer ab Chrome 116, gefolgt von Android Chrome. Mit Ursprungstests erhältst du Zugriff auf eine neue oder experimentelle Funktion, um Funktionen zu entwickeln, die deine Nutzer für begrenzte Zeit testen können, bevor die Funktion für alle verfügbar gemacht wird.

Die IdP Sign-In Status API ist ein Mechanismus, mit dem ein IdP den Browser über den Anmeldestatus des Nutzers beim IdP informiert. Mit dieser API kann der Browser unnötige Anfragen an den Identitätsanbieter reduzieren und potenzielle Timing-Angriffe abwehren.

Browser über den Anmeldestatus des Nutzers informieren

Identitätsanbieter können den Anmeldestatus des Nutzers an den Browser senden, indem sie einen HTTP-Header senden oder eine JavaScript API aufrufen, wenn der Nutzer beim Identitätsanbieter angemeldet ist oder von allen seinen Identitätsanbieterkonten abgemeldet ist. Der Browser zeichnet den Status als einen der folgenden Werte auf: „Anmelden“, „Abmelden“ oder „Unbekannt“ (Standard).

Um anzuzeigen, dass der Nutzer angemeldet ist, senden Sie einen IdP-SignIn-Status: action=signin-HTTP-Header in einer Navigation auf oberster Ebene oder in einer Anfrage für eine untergeordnete Ressource desselben Ursprungs:

IdP-SignIn-Status: action=signin

Alternativ können Sie die JavaScript API IdentityProvider.login() vom IdP-Ursprung aus aufrufen:

IdentityProvider.login()

Der Anmeldestatus des Nutzers wird als „sign-in“ erfasst. Wenn der Anmeldestatus des Nutzers auf „Anmelden“ gesetzt ist, sendet der PR, der FedCM aufruft, Anfragen an den Endpunkt der Kontoliste des Identitätsanbieters und zeigt dem Nutzer im FedCM-Dialogfeld verfügbare Konten an.

Wenn du signalisieren möchtest, dass der Nutzer von allen seinen Konten abgemeldet ist, sende den IdP-SignIn-Status: action=signout-all-HTTP-Header in einer Navigation auf oberster Ebene oder in einer Anfrage für eine untergeordnete Ressource desselben Ursprungs:

IdP-SignIn-Status: action=signout-all

Alternativ können Sie die JavaScript API IdentityProvider.logout() vom IdP-Ursprung aus aufrufen:

IdentityProvider.logout()

Dabei wird der Anmeldestatus des Nutzers als „Abmeldung“ erfasst. Wenn der Anmeldestatus des Nutzers „Abmelden“ lautet, schlägt der Aufruf von FedCM stillschweigend fehl, ohne dass eine Anfrage an den Endpunkt der Kontoliste des IdP gesendet wird.

Standardmäßig ist der Anmeldestatus des Identitätsanbieters auf „unbekannt“ festgelegt. Dieser Status wird verwendet, bevor der Identitätsanbieter ein Signal über die IdP Sign-In Status API sendet. Wir führen diesen Status ein, um die Umstellung zu erleichtern. Ein Nutzer hat sich möglicherweise bereits beim IdP angemeldet, wenn wir diese API veröffentlichen, und der IdP hat möglicherweise keine Möglichkeit, dies dem Browser zu signalisieren, wenn FedCM zum ersten Mal aufgerufen wird. In diesem Fall senden wir eine Anfrage an den Endpunkt für die Kontoliste des IdP und aktualisieren den Status basierend auf der Antwort vom Endpunkt für die Kontoliste:

  • Wenn der Endpunkt eine Liste aktiver Konten zurückgibt, aktualisiere den Status zu „Anmelden“ und öffne das FedCM-Dialogfeld, um diese Konten anzuzeigen.
  • Wenn der Endpunkt keine Konten zurückgibt, aktualisiere den Status zu „Abmelden“ und scheitere den FedCM-Aufruf.

Was passiert, wenn die Nutzersitzung abläuft? Nutzer über einen dynamischen Anmeldevorgang anmelden

Auch wenn der Identitätsanbieter den Browser weiterhin über den Anmeldestatus des Nutzers informiert, kann es zu einer Synchronisierungsverzögerung kommen, z. B. wenn die Sitzung abläuft. Der Browser versucht, eine Anfrage mit Anmeldedaten an den Endpunkt „accounts_list“ zu senden, wenn der Anmeldestatus „sign-in“ lautet. Der Server lehnt die Anfrage jedoch ab, da die Sitzung nicht mehr verfügbar ist. In einem solchen Szenario kann der Browser den Nutzer dynamisch über ein Pop-up-Fenster beim IdP anmelden.

Im FedCM-Dialogfeld wird eine Meldung wie in der folgenden Abbildung angezeigt:

Ein FedCM-Dialogfeld, in dem zur Anmeldung beim IdP aufgefordert wird.
Ein FedCM-Dialogfeld, in dem zur Anmeldung beim IdP aufgefordert wird.

Wenn der Nutzer auf die Schaltfläche Weiter klickt, öffnet der Browser ein Pop-up-Fenster, über das er zur Anmeldeseite des Identitätsanbieters weitergeleitet wird.

Ein Pop-up-Fenster, das nach dem Klicken auf die Schaltfläche „Über den Identitätsanbieter anmelden“ angezeigt wird.
Ein Pop-up-Fenster, das nach dem Klicken auf die Schaltfläche „Über den IdP anmelden“ angezeigt wird.

Die URL der Anmeldeseite (muss der Ursprung des IdP sein) kann mit signin_url als Teil der IdP-Konfigurationsdatei angegeben werden.

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

Das Pop-up-Fenster ist ein normales Browserfenster, in dem eigene Cookies verwendet werden. Was im Inhaltsfenster passiert, liegt im Ermessen des Identitätsanbieters. Es sind jedoch keine Fenster-Handles verfügbar, um eine plattformübergreifende Kommunikationsanfrage an die RP-Seite zu senden. Nachdem sich der Nutzer angemeldet hat, sollte der IdP Folgendes tun:

  • Sende den IdP-SignIn-Status: action=signin-Header oder rufe die IdentityProvider.login() API auf, um den Browser darüber zu informieren, dass der Nutzer angemeldet ist.
  • Rufen Sie IdentityProvider.close() auf, um das Pop-up-Fenster zu schließen.
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}
Ein Nutzer meldet sich bei einem RP an, nachdem er sich mit FedCM beim IdP angemeldet hat

Sie können das Verhalten der IdP Sign-In Status API in unserer Demo ausprobieren. Die Sitzung läuft drei Minuten nach der Anmeldung beim Demo-IdP ab. Anschließend können Sie die Anmeldung beim IdP über das Verhalten des Pop-up-Fensters beobachten.

Am Ursprungstest teilnehmen

Sie können die IdP Sign-In Status API lokal testen, indem Sie in Chrome 116 oder höher eine Chrome-
Flag chrome://flags#fedcm-idp-signin-status-api aktivieren.

Sie können die IdP Sign-In Status API auch aktivieren, indem Sie einen Ursprungstest zweimal registrieren:

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 IdP Sign-In Status API ist von Chrome 116 bis Chrome 119 verfügbar.

Ursprungstest für die IdP registrieren

  1. Rufe 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. Klicken Sie auf Senden.
  5. Fügen Sie den Seiten, auf denen IdentityProvider.close() verwendet wird, ein origin-trial <meta>-Tag in den Kopf ein. Das könnte beispielsweise so aussehen:
    <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Ursprungstest für Drittanbieter für den RP registrieren

  1. Rufe 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. Aktiviere 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 Ihrer JavaScript-Bibliothek oder Ihrem SDK, 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.

Feedback geben und erhalten

Wenn Sie Feedback haben oder während des Tests Probleme auftreten, können Sie sich unter crbug.com melden.

Foto von Dan Cristian Pădureț auf Unsplash