Diese Seite wurde von der Cloud Translation API übersetzt.

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

Chrome 116 bietet FedCM-Funktionen wie die Login Hint API, die User Info API und die RP Context API und startet einen Ursprungstest für die IdP Sign-In Status API.

In Chrome 116 werden die folgenden drei neuen Funktionen der föderierten Anmeldedatenverwaltung (FedCM) veröffentlicht:

Login Hint API: Geben Sie ein bevorzugtes Nutzerkonto für die Anmeldung an.
User Info API: Ruft die Informationen des wiederkehrenden Nutzers ab, damit der Identitätsanbieter (Identity Provider, IdP) eine personalisierte Anmeldeschaltfläche in einem iFrame rendern kann.
RP Context API: Verwenden Sie im FedCM-Dialogfeld einen anderen Titel als „Sign in“ (Anmelden).

Außerdem startet Chrome einen Ursprungstest für die IdP Sign-In Status API. Die IdP Sign-in Status API ist eine Voraussetzung und ist bei der Auslieferung eine funktionsgefährdende Änderung. Wenn Sie bereits eine FedCM-Implementierung haben, sollten Sie am Ursprungstest teilnehmen.

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

FedCM-Dialogfeld mit mehreren Nutzerkonten

Nachdem sich der Nutzer angemeldet hat, wird er manchmal von der vertrauenden Partei (RP) zur erneuten Authentifizierung aufgefordert. Der Nutzer ist sich aber möglicherweise nicht sicher, welches Konto er verwendet hat. Wenn im RP angeben kann, mit welchem Konto er sich anmelden soll, ist es für den Nutzer einfacher, ein Konto auszuwählen. Hinweis zur Anmeldung wird in Chrome 116 versendet und damit kann das RP die Liste auf einen Wert eingrenzen.

Durch diese Erweiterung wird der Antwort des IdP ein Array von login_hints mit allen möglichen Filtertypen, die vom IdP unterstützt werden, in die Antwort des IdPs für den Endpunkt der Kontenliste eingefügt. Die Kontoantwort könnte beispielsweise so aussehen, wenn ein IdP das Filtern nach E-Mail-Adresse und ID unterstützt:

{
  "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"],
    ...
  }, ...]
}

Durch Übergeben von login_hints in der Kontenliste kann der RP navigator.credentials.get() mit dem Attribut 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"
    }]
  }
});

Nutzerinfo-API

Anmeldeschaltflächen mit dem Logo des IdP, über die sich Nutzer mit der Identitätsföderation anmelden können, sind jetzt üblich. Das Dekorieren der Schaltfläche mit dem Profilsymbol des Nutzers und seinen Informationen ist jedoch noch intuitiver, insbesondere wenn sich ein Nutzer bereits auf dieser Website mit dem IdP registriert hat.

Schaltfläche „Über Google anmelden“. — Schaltfläche „Über Google anmelden“

Personalisierte Schaltfläche „Über Google anmelden“. — Personalisierte „Über Google anmelden“-Schaltfläche

Die Herausforderung besteht darin, dass die personalisierte Schaltfläche von den Drittanbieter-Cookies der IdP-Domain innerhalb eines iFrames abhängig ist, um den angemeldeten Nutzer zum Rendern der Schaltfläche zu identifizieren. Nach der Einstellung von Drittanbieter-Cookies ist sie nicht mehr verfügbar.

Mit der User Info API, die in Chrome 116 verfügbar ist, kann der IdP die Informationen des wiederkehrenden Nutzers vom Server abrufen, ohne von Drittanbieter-Cookies abhängig zu sein.

Die API muss vom IdP aus einem iFrame aufgerufen werden, der auf der RP-Website eingebettet ist. So kann sie die Nutzerinformationen abrufen und eine personalisierte Schaltfläche so rendern, als wäre sie Teil der RP-Oberfläche. Mit dem API-Aufruf stellt der Browser eine Anfrage an den Endpunkt der Kontenliste und gibt in folgenden Fällen ein Array von Nutzerinformationen zurück:

Der Nutzer hat sich in der Vergangenheit über FedCM in derselben Browserinstanz beim RP mit dem IdP über FedCM 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() von einem iFrame aus demselben Ursprung wie der IdP aufgerufen werden kann, muss der HTML-Code zum Einbetten dies mit der Berechtigungsrichtlinie identity-credentials-get explizit zulassen.

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

Sie können sie unter https://fedcm-rp-demo.glitch.me/button in Aktion sehen.

RP Context API

Mit der RP Context API, die in Chrome 116 verfügbar ist, kann ein RP den String in der FedCM-Dialogoberfläche so ändern, dass vordefinierte Authentifizierungskontexte berücksichtigt werden. In den folgenden Screenshots sehen Sie die verschiedenen Optionen:

FedCM-Dialogfeld gerendert mit — Das FedCM-Dialogfeld wird mit „Sign in to ****“ gerendert. Das ist die Standardoption, wenn der RP-Kontext nicht angegeben ist.

Die Verwendung ist einfach. Geben Sie als identity.context-Attribut "signin" (Standardeinstellung), "signup", "use" oder "continue" an.

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

Chrome startet einen IdP Sign-In Status API-Ursprungstest auf dem Computer ab Chrome 116, gefolgt von Android Chrome. Mit Ursprungstests erhalten Sie Zugriff auf eine neue oder experimentelle Funktion, mit der Sie Funktionen erstellen können, die Ihre Nutzer für eine begrenzte Zeit ausprobieren können, bevor die Funktion allgemein verfügbar ist.

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 IdP reduzieren und potenzielle Timing-Angriffe abschwächen.

Hinweis:FedCM führt eine Anfrage mit Anmeldedaten an den Endpunkt der Kontenliste ein. Diese Anfrage sendet keine Daten, die den Anfragenden identifizieren, und lässt auch keine Weitergabe der vom RP bereitgestellten Daten zu. Der Browser führt jedoch separat eine Anfrage ohne Anmeldedaten, die die RP-Informationen enthält, an die client_metadata_endpoint. Anschließend kann der IdP-Server die Anfrage ohne Anmeldedaten mithilfe von Zeitangaben oder anderen Fingerprinting-Daten (stochastisch) mit der Anfrage mit Anmeldedaten korrelieren. Weitere Informationen finden Sie auf diesen Folien.

Browser über Anmeldestatus des Nutzers informieren

IdPs können den Anmeldestatus des Nutzers dem Browser signalisieren, indem sie einen HTTP-Header senden oder eine JavaScript API aufrufen, wenn der Nutzer beim IdP angemeldet ist oder der Nutzer von allen seinen IdP-Konten abgemeldet ist. Der Browser erfasst den Status als einen der folgenden Status: „sign-in“, „sign-out“ oder „unknown“ (Standardeinstellung).

Um zu signalisieren, dass der Nutzer angemeldet ist, musst du einen IdP-SignIn-Status: action=signin-HTTP-Header in einer Navigation der obersten Ebene oder einer Anfrage für Unterressourcen desselben Ursprungs senden:

IdP-SignIn-Status: action=signin

Alternativ können Sie die JavaScript API IdentityProvider.login() über den IdP-Ursprung aufrufen:

IdentityProvider.login()

Dadurch wird der Anmeldestatus des Nutzers als „Anmeldung“ aufgezeichnet. Wenn der Anmeldestatus des Nutzers auf „Anmelden“ gesetzt ist, sendet der PR-Aufrufer von FedCM Anfragen an den Endpunkt der Kontenliste des IdP und zeigt dem Nutzer die verfügbaren Konten im FedCM-Dialogfeld an.

Wenn Sie signalisieren möchten, dass der Nutzer aus allen seinen Konten abgemeldet ist, senden Sie den HTTP-Header IdP-SignIn-Status: action=signout-all in einer Navigation der obersten Ebene oder einer Anfrage für eine Unterressourcen desselben Ursprungs:

IdP-SignIn-Status: action=signout-all

Alternativ können Sie die JavaScript API IdentityProvider.logout() über den IdP-Ursprung aufrufen:

IdentityProvider.logout()

Dadurch wird der Anmeldestatus des Nutzers als „Abmelden“ aufgezeichnet. Wenn der Anmeldestatus des Nutzers „Abmelden“ ist, schlägt das Aufrufen von FedCM unbemerkt fehl, ohne eine Anfrage an den Endpunkt der Kontenliste des IdP zu senden.

Der Anmeldestatus des IdP ist standardmäßig auf „Unbekannt“ festgelegt. Dieser Status wird verwendet, bevor der IdP ein Signal über die IdP Sign-In Status API sendet. Wir führen diesen Status für eine bessere Umstellung ein, da sich ein Nutzer möglicherweise bereits beim IdP angemeldet hat, als wir diese API versenden, und der IdP möglicherweise nicht die Möglichkeit hat, dies dem Browser zu signalisieren, wenn FedCM zum ersten Mal aufgerufen wird. In diesem Fall senden wir eine Anfrage an den Endpunkt der Kontenliste des IdP und aktualisieren den Status anhand der Antwort vom Endpunkt der Kontenliste:

Wenn der Endpunkt eine Liste aktiver Konten zurückgibt, aktualisieren Sie den Status in „Anmelden“ und öffnen Sie das FedCM-Dialogfeld, um diese Konten anzuzeigen.
Wenn der Endpunkt keine Konten zurückgibt, aktualisieren Sie den Status auf „Abmelden“ und schlagen Sie den FedCM-Aufruf fehl.

Was passiert, wenn die Nutzersitzung abläuft? Nutzern die Anmeldung über eine dynamische Anmeldung ermöglichen

Auch wenn der IdP den Browser weiterhin über den Anmeldestatus des Nutzers informiert, ist er möglicherweise nicht synchron, z. B. wenn die Sitzung abläuft. Wenn der Anmeldestatus „Anmelden“ lautet, versucht der Browser, eine Anfrage mit Anmeldedaten an den Endpunkt der Kontenliste zu senden. Der Server lehnt die Anfrage jedoch ab, weil die Sitzung nicht mehr verfügbar ist. In einem solchen Szenario kann der Browser dem Nutzer die Möglichkeit geben, sich über ein Pop-up-Fenster beim IdP dynamisch anzumelden.

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

Ein FedCM-Dialogfeld mit der Empfehlung, sich beim IdP anzumelden.

Wenn Sie auf die Schaltfläche Weiter klicken, wird im Browser ein Pop-up-Fenster geöffnet, über das der Nutzer zur Anmeldeseite des IdPs weitergeleitet wird.

Die URL der Anmeldeseite (die der Ursprung des IdP sein muss) 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 innerhalb des Inhaltsfensters geschieht, bleibt dem IdP überlassen. Es sind jedoch keine Fenster-Handles verfügbar, um eine ursprungsübergreifende Kommunikationsanfrage an die RP-Seite zu senden. Nachdem sich der Nutzer angemeldet hat, sollte der IdP:

Senden Sie den IdP-SignIn-Status: action=signin-Header oder rufen Sie die IdentityProvider.login() API auf, um den Browser darüber zu informieren, dass der Nutzer angemeldet ist.
Rufen Sie IdentityProvider.close() auf, um sich selbst zu schließen (das Pop-up-Fenster).

// 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 in einem RP an, nachdem er sich mit FedCM beim IdP angemeldet hat.

Hinweis:Diese dynamische Anmeldung ist für den Fall gedacht, dass eine IdP-Sitzung ohne explizite Abmeldung abgelaufen ist, wodurch der Anmeldestatus des Browsers dem tatsächlichen Status widerspricht. Dies wird nicht für Nutzer ausgelöst, die sich noch nicht beim IdP angemeldet haben. Dieser neue Ablauf deckt Fälle ab, in denen der IdP-Anmeldestatus des Nutzers im Browser „signin“ ist, der Endpunkt der Kontenliste des IdP aber keine Konten zurückgibt.

Wenn die IdP Sign-In Status API sofort aufgerufen wird, kann beim Aufrufen von FedCM eines der folgenden Szenarien eintreten:

Wenn der Browser den Anmeldestatus des Nutzers nicht kennt („unbekannt“), wird der Status abhängig von der Antwort des IdP vom Endpunkt der Kontenliste aktualisiert (entweder „Anmeldung“ oder „Abmeldung“). Es wird keine dynamische Anmeldung ausgelöst.
Wenn sich ein Nutzer im Browser beim IdP angemeldet („Anmeldung“) und sich dann explizit vom Identitätsanbieter abgemeldet hat („Abmeldung“), wird der dynamische Anmeldevorgang nicht ausgelöst.
Wenn sich ein Nutzer im Browser beim IdP angemeldet hat („Anmeldung“), die Sitzung aber ohne explizite Abmeldung abläuft, wird der dynamische Anmeldevorgang ausgelöst.

Die IdP Sign-In Status API bietet dem RP keine Möglichkeit, Nutzern, die nicht beim IdP angemeldet sind, das Dialogfeld „Beim IdP anmelden“ anzuzeigen. Dies ist ein separates Feature, das in Zukunft hinzugefügt werden kann.

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

Am Ursprungstest teilnehmen

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

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

Registrieren Sie einen Ursprungstest für den IdP.
Registrieren Sie einen Drittanbieter-Ursprungstest für den RP.

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

Der Ursprungstest der IdP Sign-In Status API ist von Chrome 116 bis Chrome 119 verfügbar.

Ursprungstest für den IdP registrieren

Gehen Sie zur Registrierungsseite für den Ursprungstest.
Klicken Sie auf die Schaltfläche Registrieren und füllen Sie das Formular aus, um ein Token anzufordern.
Geben Sie den Ursprung des IdP als Web Origin (Webursprung) ein.
Klicken Sie auf Senden.
Fügen Sie im Header der Seiten, für die IdentityProvider.close() verwendet wird, das origin-trial-<meta>-Tag ein. Das kann beispielsweise so aussehen:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Warnung:Das Senden eines Origin-Trial-HTTP-Headers funktioniert bei dieser API nicht.

Externen Ursprungstest für die RP registrieren

Gehen Sie zur Registrierungsseite für den Ursprungstest.
Klicken Sie auf die Schaltfläche Registrieren und füllen Sie das Formular aus, um ein Token anzufordern.
Geben Sie den Ursprung des IdP als Web Origin (Webursprung) ein.
Aktivieren Sie Drittanbieter-Abgleich, um das Token mit JavaScript bei anderen Ursprüngen einzuschleusen.
Klicken Sie auf Senden.
Betten Sie das ausgestellte Token auf der Website eines Drittanbieters ein.

Wenn Sie das Token auf der Website eines Drittanbieters einbetten möchten, fügen Sie der JavaScript-Bibliothek oder dem SDK von der Quelle des IdP 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.

Reagieren und Feedback geben

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

Foto von Dan Cristian Pădureț auf Unsplash