Signatur
Beschreibung
Die schreibgeschützte Eigenschaft provider der Schnittstelle FederatedCredential enthält den Identitätsanbieter (Identity Provider, IdP), bei dem sich der Benutzer angemeldet hat. Laut Spezifikation ist der Wert eine serialisierte Origin, also eine URL aus Schema, Host und ggf. Port ohne Pfad, zum Beispiel https://accounts.google.com oder https://www.facebook.com.
Gebraucht wird die Eigenschaft vor allem dann, wenn eine Website Anmeldedaten über navigator.credentials.get({ federated: { providers: [...] } }) abruft. Der Browser gibt dann ein FederatedCredential zurück, und über provider lässt sich erkennen, welcher Anbieter gespeichert war. Damit kann die Anwendung den richtigen OAuth- oder OpenID-Connect-Ablauf starten, zum Beispiel mit einem login_hint, der aus credential.id gebildet wird.
Der Wert wird beim Erstellen über den Konstruktor new FederatedCredential({ id, provider, ... }) festgelegt und lässt sich danach nicht mehr ändern. Wichtig: Das Credential speichert nur, dass der Benutzer einen bestimmten Anbieter verwendet hat. Tokens oder Passwörter enthält es nicht. Die eigentliche Authentifizierung übernimmt weiterhin der Anbieter.
Rückgabewert
"https://accounts.google.com".Beispiele
FederatedCredential erstellen und speichern
// Nach erfolgreichem Login über Google das Credential im Browser ablegen
const saveGoogleLogin = async (email, displayName, avatarUrl) => {
if (!('FederatedCredential' in window)) {
console.warn('FederatedCredential wird nicht unterstützt');
return;
}
const cred = new FederatedCredential({
id: email,
provider: 'https://accounts.google.com',
name: displayName,
iconURL: avatarUrl
});
console.log(cred.provider);
await navigator.credentials.store(cred);
};
saveGoogleLogin('max@example.com', 'Max Muster', 'https://example.com/max.png');Gespeichertes Credential abrufen und Anbieter auswerten
const autoSignIn = async () => {
const cred = await navigator.credentials.get({
federated: {
providers: ['https://accounts.google.com', 'https://www.facebook.com']
},
mediation: 'optional'
});
if (!cred || cred.type !== 'federated') {
console.log('Kein föderiertes Credential gefunden');
return;
}
switch (cred.provider) {
case 'https://accounts.google.com':
console.log(`Google-Login für ${cred.id} starten`);
break;
case 'https://www.facebook.com':
console.log(`Facebook-Login für ${cred.id} starten`);
break;
default:
console.log(`Unbekannter Anbieter: ${cred.provider}`);
}
};
autoSignIn();Anbieter-Origin normalisiert vergleichen
// Vorsichtig vergleichen: nur die Origin zählt, nicht Pfad oder abschließender Slash
const isProvider = (cred, url) => new URL(cred.provider).origin === new URL(url).origin;
const cred = new FederatedCredential({
id: 'max@example.com',
provider: 'https://accounts.google.com'
});
console.log(isProvider(cred, 'https://accounts.google.com/'));
console.log(isProvider(cred, 'https://login.microsoftonline.com'));// Wichtig · Fallstricke
- Browser-Kompatibilität:
FederatedCredentialgibt es nur in Chromium-basierten Browsern. Firefox und Safari unterstützen es nicht. Deshalb vorher mit'FederatedCredential' in windowprüfen und eine eigene Anmeldeoberfläche als Rückfall anbieten. - Nur in sicheren Kontexten: Die API steht nur über HTTPS (oder
localhost) zur Verfügung. - Kein Nachweis der Identität:
providerundidsind nur ein Hinweis darauf, welchen Anbieter der Benutzer gewählt hat. Der Server muss die Anmeldung trotzdem immer über den Anbieter prüfen, also OAuth-/OIDC-Token validieren. Den Wert nie als Beweis für eine Authentifizierung werten. - String-Vergleiche: Der Wert ist eine Origin ohne abschließenden Slash. Werte wie
https://accounts.google.com/passen beim direkten Vergleich mit===nicht. Besser übernew URL(...).originnormalisieren. - Nicht mit FedCM verwechseln: Die neuere Federated Credential Management API (FedCM) arbeitet mit
IdentityCredentialundnavigator.credentials.get({ identity: ... }).FederatedCredentialgilt als veraltetes Konzept und wird in Chrome zugunsten von FedCM zurückgedrängt.