FederatedCredential — Schnittstelle · JavaScript-Referenz

Signatur

interface FederatedCredential extends Credential

Beschreibung

Das Interface FederatedCredential gehört zur Credential Management API. Es speichert keine Geheimnisse wie Passwörter oder Tokens. Stattdessen merkt es sich, mit welchem Identitätsanbieter (Eigenschaft provider) und mit welchem Konto (Eigenschaft id) sich ein Nutzer zuletzt angemeldet hat. So kann eine Website beim nächsten Besuch den Anbieter direkt vorschlagen oder den Nutzer automatisch anmelden, ohne dass er erneut einen Anbieter auswählen muss.

FederatedCredential erbt von Credential die Eigenschaften id und type (hier immer "federated"). Aus CredentialUserData übernimmt es name und iconURL. Selbst definiert es folgende Eigenschaften:

provider: Ursprung (Origin) des Identitätsanbieters als String, z. B. "https://accounts.google.com". Nur lesbar.
protocol: optionaler Name des Föderationsprotokolls, z. B. "openidconnect" oder "oauth2". Ist keiner gesetzt, ist der Wert null. Nur lesbar.

Der typische Ablauf sieht so aus: Nach einem erfolgreichen OAuth- oder OpenID-Connect-Login erzeugen Sie mit new FederatedCredential(...) ein Objekt und speichern es mit navigator.credentials.store() im Browser. Später fragen Sie es mit navigator.credentials.get({ federated: { providers: [...] } }) wieder ab und starten anschließend den eigentlichen Login-Ablauf beim zurückgegebenen Anbieter, mit dem gespeicherten Konto als Anmeldehinweis (Login-Hint).

Parameter

Name	Typ	Default	Beschreibung
$init Pflicht	Object		Initialisierungsobjekt für den Konstruktor `new FederatedCredential(init)`.
$init.id Pflicht	string		Kennung des Kontos beim Anbieter, meist die E-Mail-Adresse oder der Benutzername.
$init.provider Pflicht	string		Origin des Identitätsanbieters als URL-String, z. B. `"https://github.com"`.
$init.name	string	""	Anzeigename des Nutzers, den der Browser im Kontoauswahl-Dialog zeigt.
$init.iconURL	string	""	URL eines Avatarbilds für den Kontoauswahl-Dialog. Muss eine sichere URL (HTTPS) sein.
$init.protocol	string	null	Verwendetes Föderationsprotokoll, z. B. `"openidconnect"`.

Rückgabewert

Typ

FederatedCredential

Beschreibung

Der Konstruktor gibt eine neue FederatedCredential-Instanz zurück. Mit navigator.credentials.store() wird sie gespeichert. Bei navigator.credentials.get() erhalten Sie ein Promise, das mit einer FederatedCredential-Instanz oder mit null erfüllt wird.

Beispiele

Nach erfolgreichem Login speichern

// Nach erfolgreichem OAuth-Login (z. B. per Callback-Seite)
const saveFederatedLogin = async (user) => {
  if (!('FederatedCredential' in window)) return;

  const cred = new FederatedCredential({
    id: user.email,
    provider: 'https://accounts.google.com',
    name: user.displayName,
    iconURL: user.avatarUrl,
    protocol: 'openidconnect'
  });

  await navigator.credentials.store(cred);
  console.log(cred.type, cred.provider);
};

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

federated https://accounts.google.com

Gespeicherten Anbieter abfragen und Login starten

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

  if (cred?.type === 'federated') {
    // Login beim gespeicherten Anbieter mit Konto-Hinweis starten
    const url = new URL('/auth/start', location.origin);
    url.searchParams.set('provider', cred.provider);
    url.searchParams.set('login_hint', cred.id);
    location.assign(url);
  } else {
    console.log('Kein gespeicherter Anbieter – Auswahl anzeigen');
  }
};

autoSignIn();

Kein gespeicherter Anbieter – Auswahl anzeigen

Eigenschaften einer Instanz auslesen

const cred = new FederatedCredential({
  id: 'dev42',
  provider: 'https://github.com'
});

console.log(cred.id);       // Konto-ID
console.log(cred.type);     // immer 'federated'
console.log(cred.provider); // Anbieter-Origin
console.log(cred.protocol); // nicht gesetzt
console.log(cred instanceof Credential);

dev42 federated https://github.com null true

Automatische Anmeldung beim Abmelden verhindern

const logout = async () => {
  await fetch('/api/logout', { method: 'POST' });
  // Verhindert, dass 'silent'-Mediation den Nutzer sofort wieder anmeldet
  await navigator.credentials.preventSilentAccess();
  console.log('Abgemeldet');
};

logout();

Abgemeldet

// Wichtig · Fallstricke

Browser-Kompatibilität: Nur Chromium-basierte Browser (Chrome, Edge, Opera, Samsung Internet) unterstützen das Interface. Firefox und Safari kennen es nicht. Prüfen Sie deshalb vorher mit 'FederatedCredential' in window, ob es verfügbar ist, und bieten Sie immer einen normalen Login-Weg an.
Sicherer Kontext: Die API steht nur über HTTPS bzw. localhost zur Verfügung. In Cross-Origin-iframes ist sie ohne passende Berechtigungsrichtlinie (Permissions Policy) blockiert.
Keine Authentifizierung: Ein FederatedCredential enthält weder Token noch Passwort. Es ist nur ein Hinweis darauf, welchen Anbieter und welches Konto der Nutzer verwendet. Den eigentlichen OAuth- bzw. OpenID-Connect-Ablauf und die Token-Prüfung auf dem Server müssen Sie weiterhin selbst umsetzen. Werten Sie id nie als Beweis für die Identität des Nutzers.
Nicht verwechseln mit FedCM: Die neuere Federated Credential Management API (IdentityCredential, navigator.credentials.get({ identity: ... })) funktioniert ohne Drittanbieter-Cookies und wird heute für föderierte Logins empfohlen. FederatedCredential gilt dagegen als veraltetes Konzept mit wenig Weiterentwicklung.
provider muss exakt dem Origin entsprechen, den Sie später in providers abfragen. Ein abschließender Schrägstrich oder ein Pfad führt dazu, dass kein Treffer gefunden wird.
Rufen Sie beim Abmelden navigator.credentials.preventSilentAccess() auf. Sonst meldet mediation: 'silent' den Nutzer beim nächsten Seitenaufruf sofort wieder an.

Siehe auch

FederatedCredentialInit IdentityCredential OTPCredential PasswordCredential PublicKeyCredential DeferredRequestInit