new FederatedCredential() — Methode · JavaScript-Referenz

Signatur

new FederatedCredential(init)

Beschreibung

Der Konstruktor FederatedCredential() gehört zur Credential Management API. Er erzeugt ein Anmeldedaten-Objekt, das festhält, dass und mit welchem Konto sich ein Nutzer über einen externen Identitätsanbieter (Identity Provider, IdP) angemeldet hat. Das Objekt enthält weder ein Passwort noch ein Token. Es speichert nur die Kennung des Kontos (id) und den Anbieter (provider), dazu optional einen Anzeigenamen und ein Profilbild.

Typischer Ablauf: Nach einer erfolgreichen OAuth- oder OpenID-Connect-Anmeldung erzeugt die Anwendung ein FederatedCredential und übergibt es an navigator.credentials.store(). Der Browser kann es dann im Passwortmanager ablegen. Beim nächsten Besuch liefert navigator.credentials.get({ federated: { providers: [...] } }) dieses Objekt zurück. Die Anwendung weiß dann, bei welchem Anbieter sie den Nutzer anmelden soll, im Idealfall ganz ohne Kontoauswahl.

Der Konstruktor selbst meldet niemanden an und spricht auch nicht mit dem Identitätsanbieter. Den eigentlichen Anmeldevorgang, also Weiterleitung, Popup oder Token-Prüfung auf dem Server, muss die Anwendung selbst umsetzen. FederatedCredential speichert nur, welches Konto bei welchem Anbieter verwendet wurde.

Parameter

Name	Typ	Beschreibung
$init Pflicht	Object	Objekt zum Initialisieren mit den folgenden Eigenschaften.
$init.id Pflicht	string	Kennung des Kontos beim Anbieter, z. B. die E-Mail-Adresse oder die Nutzer-ID des IdP.
$init.provider Pflicht	string	Herkunft (Origin) des Identitätsanbieters als URL, z. B. `"https://accounts.google.com"`.
$init.name	string	Anzeigename des Nutzers, den der Browser in der Kontoauswahl zeigt.
$init.iconURL	string	URL eines Profilbilds oder Avatars für die Kontoauswahl.
$init.protocol	string	Verwendetes Protokoll, z. B. `"openidconnect"` oder `"oauth"`.

Rückgabewert

Typ

FederatedCredential

Beschreibung

Ein neues FederatedCredential-Objekt. Die Eigenschaften id, type (immer "federated"), provider, protocol, name und iconURL sind nur lesbar.

Beispiele

Anmeldedaten erzeugen und untersuchen

if ('FederatedCredential' in window) {
  const cred = new FederatedCredential({
    id: 'max.mustermann@gmail.com',
    provider: 'https://accounts.google.com',
    name: 'Max Mustermann',
    iconURL: 'https://example.com/avatare/max.png',
    protocol: 'openidconnect'
  });

  console.log(cred.type, cred.id, cred.provider);
} else {
  console.log('FederatedCredential wird nicht unterstützt');
}

federated max.mustermann@gmail.com https://accounts.google.com

Nach erfolgreichem OAuth-Login im Browser speichern

// Wird aufgerufen, nachdem der Server das IdP-Token geprüft hat
const merkeFoederiertenLogin = async (profil) => {
  if (!('FederatedCredential' in window)) return;

  const cred = new FederatedCredential({
    id: profil.email,
    provider: 'https://github.com',
    name: profil.displayName,
    iconURL: profil.avatarUrl
  });

  try {
    await navigator.credentials.store(cred);
    console.log('Anmeldedaten gespeichert');
  } catch (err) {
    console.error('Speichern fehlgeschlagen:', err);
  }
};

merkeFoederiertenLogin({
  email: 'max@example.com',
  displayName: 'Max',
  avatarUrl: 'https://avatars.githubusercontent.com/u/1'
});

Anmeldedaten gespeichert

Gespeicherte Anmeldedaten beim nächsten Besuch abrufen

const automatischAnmelden = async () => {
  const cred = await navigator.credentials.get({
    federated: {
      providers: ['https://accounts.google.com', 'https://github.com']
    },
    mediation: 'optional'
  });

  if (cred?.type === 'federated') {
    console.log(`Anmeldung über ${cred.provider} als ${cred.id}`);
    // Hier den passenden OAuth-Ablauf starten, z. B. mit login_hint = cred.id
  } else {
    console.log('Keine gespeicherten föderierten Anmeldedaten');
  }
};

automatischAnmelden();

Anmeldung über https://accounts.google.com als max.mustermann@gmail.com

Fehlende Pflichtfelder abfangen

try {
  // provider fehlt
  new FederatedCredential({ id: 'max@example.com' });
} catch (err) {
  console.log(err.name);
}

TypeError

// Wichtig · Fallstricke

Browserunterstützung: Nur Chromium-Browser (Chrome, Edge, Opera) unterstützen die API. Firefox und Safari kennen FederatedCredential nicht. Prüfe deshalb immer vorher mit 'FederatedCredential' in window, ob sie vorhanden ist.
Sicherer Kontext: Die API steht nur über HTTPS (oder localhost) zur Verfügung.
Pflichtfelder: Fehlen id oder provider oder sind sie leer, wirft der Konstruktor einen TypeError. Ist iconURL keine gültige URL, gibt es ebenfalls einen Fehler.
Kein Sicherheitsnachweis: Ein FederatedCredential beweist nicht, dass der Nutzer wirklich angemeldet ist. Es ist nur ein Hinweis darauf, welches Konto bei welchem Anbieter benutzt wurde. Die Anmeldung musst du trotzdem über den Identitätsanbieter abwickeln und das Token auf dem Server prüfen.
Nicht mit FedCM verwechseln: Die neuere Federated Credential Management API (FedCM) arbeitet mit IdentityCredential und navigator.credentials.get({ identity: ... }). Für neue Projekte ist FedCM meist die bessere Wahl, denn sie ersetzt Anmeldeabläufe, die auf Drittanbieter-Cookies angewiesen sind.
Daten schützen: In name und iconURL sollten keine vertraulichen Daten stehen, weil der Browser sie in seiner Kontoauswahl anzeigt.

Siehe auch

Credential new CSSVariableReferenceValue() new PasswordCredential() new FetchEvent() new DragEvent()