FederatedCredentialInit — Schnittstelle · JavaScript-Referenz

Signatur

interface FederatedCredentialInit

Beschreibung

FederatedCredentialInit ist ein Wörterbuch (WebIDL-Dictionary) aus der Credential Management API, also ein einfaches Objekt und keine Klasse, die man instanziiert. Es beschreibt die Daten, aus denen der Browser ein FederatedCredential erzeugt. Übergeben wird es entweder als Wert der Option federated an CredentialsContainer.create() (navigator.credentials.create()) oder direkt an den Konstruktor new FederatedCredential(init).

Ein föderiertes Credential hält fest, dass sich ein Benutzer auf Ihrer Website über einen externen Identitätsanbieter angemeldet hat, etwa „Mit Google anmelden“. Gespeichert werden dabei keine Tokens oder Passwörter, sondern nur, welches Konto (id) bei welchem Anbieter (provider) verwendet wurde. Beim nächsten Besuch können Sie mit navigator.credentials.get({ federated: { providers: [...] } }) das gespeicherte Konto abfragen und den Login-Ablauf beim richtigen Anbieter automatisch starten.

Typischer Ablauf: Nach einem erfolgreichen OAuth- bzw. OpenID-Connect-Login bauen Sie ein FederatedCredentialInit-Objekt, erzeugen daraus ein FederatedCredential und speichern es mit navigator.credentials.store() im Passwortmanager des Browsers. Die eigentliche Authentifizierung gegenüber dem Anbieter übernimmt weiterhin Ihr eigener Code bzw. das SDK des Anbieters.

Parameter

Name	Typ	Beschreibung
$id Pflicht	string	Kennung des Benutzers beim Identitätsanbieter, meist E-Mail-Adresse oder Benutzername. Wird aus `CredentialData` geerbt.
$provider Pflicht	string (USVString, URL)	URL des Identitätsanbieters, z. B. `"https://accounts.google.com"`. Gespeichert wird nur der Origin der URL. Ist die URL ungültig, wird ein `TypeError` ausgelöst.
$origin Pflicht	string (USVString)	Origin der Website, für die das Credential gilt, in der Regel `location.origin`.
$name	string	Lesbarer Anzeigename des Benutzers, der in der Kontoauswahl des Browsers erscheint.
$iconURL	string (USVString, URL)	URL eines Avatarbilds für die Kontoauswahl. Muss eine sichere URL sein (`https:`), sonst wird ein `TypeError` ausgelöst.
$protocol	string	Optionale Angabe des verwendeten Protokolls, z. B. `"openidconnect"` oder `"oauth"`. Dient nur zur Information; der Browser wertet sie nicht aus.

Rückgabewert

Typ

FederatedCredential (indirekt)

Beschreibung

Als Wörterbuch hat FederatedCredentialInit selbst keinen Rückgabewert. navigator.credentials.create({ federated }) liefert ein Promise<FederatedCredential | null>, new FederatedCredential(init) gibt das FederatedCredential direkt zurück.

Beispiele

Credential mit navigator.credentials.create() anlegen und speichern

// Nach einem erfolgreichen Login über Google
const saveFederatedLogin = async (user) => {
  if (!('FederatedCredential' in window)) {
    console.log('FederatedCredential wird nicht unterstützt');
    return;
  }

  /** @type {FederatedCredentialInit} */
  const init = {
    id: user.email,
    name: user.displayName,
    iconURL: user.avatarUrl, // muss https sein
    provider: 'https://accounts.google.com',
    origin: location.origin,
    protocol: 'openidconnect'
  };

  const cred = await navigator.credentials.create({ federated: init });
  await navigator.credentials.store(cred);
  console.log('Gespeichert:', cred.type, cred.provider);
};

saveFederatedLogin({
  email: 'anna@example.com',
  displayName: 'Anna Beispiel',
  avatarUrl: 'https://example.com/avatars/anna.png'
});

Gespeichert: federated https://accounts.google.com

Direkt mit dem Konstruktor new FederatedCredential()

const cred = new FederatedCredential({
  id: 'max.mustermann',
  provider: 'https://www.facebook.com',
  origin: location.origin,
  name: 'Max Mustermann'
});

console.log(cred.id, cred.provider, cred.name);
await navigator.credentials.store(cred);

max.mustermann https://www.facebook.com Max Mustermann

Gespeichertes Konto beim nächsten Besuch abrufen

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

  if (cred?.type === 'federated') {
    console.log(`Starte Login bei ${cred.provider} für ${cred.id}`);
    // hier den Login-Ablauf des passenden Anbieters mit login_hint = cred.id starten
  } else {
    console.log('Kein gespeichertes Konto gefunden');
  }
};

autoSignIn();

Starte Login bei https://accounts.google.com für anna@example.com

Fehler bei ungültigen Werten abfangen

try {
  new FederatedCredential({
    id: 'test',
    provider: 'kein gültiger url',
    origin: location.origin
  });
} catch (err) {
  console.log(err.name);
}

TypeError

// Wichtig · Fallstricke

Browserunterstützung: FederatedCredential gibt es nur in Chromium-basierten Browsern. Firefox und Safari unterstützen es nicht. Prüfen Sie deshalb vorher mit 'FederatedCredential' in window, ob die API vorhanden ist, und sehen Sie einen Ablauf ohne sie vor.
Nur in sicheren Kontexten: Die API steht nur über HTTPS (bzw. localhost) zur Verfügung.
Keine Authentifizierung: Das Credential speichert nur Konto und Anbieter, aber keine Tokens. Die Anmeldung beim Anbieter und die Prüfung auf dem Server müssen Sie selbst erledigen. Verlassen Sie sich serverseitig nie auf die Angaben aus dem Credential.
id, provider und origin sind Pflichtfelder. Fehlen sie oder sind provider bzw. iconURL keine gültigen oder sicheren URLs, wird ein TypeError ausgelöst.
Nicht verwechseln: Die Anmeldung über Identitätsanbieter wird zunehmend von der neueren Federated Credential Management API (FedCM, IdentityCredential, Option identity) abgelöst. Für neue Projekte ist FedCM meist die bessere Wahl.

Siehe auch

InteractionContentfulPaint FederatedCredential PasswordCredentialInit DeferredRequestInit IdentityCredential