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.
Login Hint API
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](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-showing-mu-e3714b87b4d94.png?authuser=7&hl=de)
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“.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/sign-with-google-button-d34d0cc6c6301.png?authuser=7&hl=de)
![Personalisierte Schaltfläche „Über Google anmelden“.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/personalized-sign-with-g-45331497ab21b.png?authuser=7&hl=de)
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](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-fe1a06336087f.png?authuser=7&hl=de)
![FedCM-Dialogfeld gerendert mit](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-06a2fc27f97ad.png?authuser=7&hl=de)
![FedCM-Dialogfeld gerendert mit](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-c-5d3bb7d44dd6a.png?authuser=7&hl=de)
![FedCM-Dialogfeld gerendert mit](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-u-efb6bbffb812.png?authuser=7&hl=de)
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",
}],
}
});
Ursprungstest der IdP Sign-In Status API
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.
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.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-suggesting-b9179c79f722d.png?authuser=7&hl=de)
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.
![Ein Pop-up-Fenster, das nach dem Klicken auf die Schaltfläche „Beim IdP anmelden“ angezeigt wird.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-popup-window-shown-cli-0520929770807.png?authuser=7&hl=de)
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 dieIdentityProvider.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();
}
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-Flagchrome://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, dasorigin-trial
-<meta>
-Tag ein. Das kann beispielsweise so aussehen:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
.
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