CredentialsContainer — Schnittstelle · JavaScript-Referenz

Signatur

interface CredentialsContainer

Beschreibung

Die Schnittstelle CredentialsContainer ist der zentrale Einstiegspunkt der Credential Management API. Eine Instanz erzeugt man nicht selbst, man bekommt sie über navigator.credentials. Über dieses Objekt kann eine Webanwendung den Browser bitten, gespeicherte Anmeldedaten herauszugeben, neue Anmeldedaten zu erzeugen (zum Beispiel einen WebAuthn-Passkey) oder nach einem erfolgreichen Login die verwendeten Daten zu speichern.

Die Schnittstelle hat vier Methoden:

get(options): fordert passende Anmeldedaten an, etwa PasswordCredential, PublicKeyCredential (WebAuthn), FederatedCredential oder IdentityCredential (FedCM). Rückgabe: Promise<Credential | null>.
create(options): erzeugt neue Anmeldedaten, zum Beispiel bei der Registrierung eines Passkeys. Rückgabe: Promise<Credential | null>.
store(credential): speichert Anmeldedaten im Passwort-Manager des Browsers, nachdem sich jemand erfolgreich angemeldet hat. Rückgabe: Promise<void>.
preventSilentAccess(): sorgt dafür, dass beim nächsten get() keine automatische Anmeldung ohne Bestätigung stattfindet. Das ruft man typischerweise beim Logout auf. Rückgabe: Promise<void>.

Einsatzgebiete sind unter anderem die automatische Anmeldung wiederkehrender Nutzer, passwortlose Anmeldung mit Passkeys und der Login über Identitätsanbieter. Die API läuft nur in einem sicheren Kontext (HTTPS oder localhost). Für die meisten Aufrufe ist eine Nutzerinteraktion oder eine Bestätigung im Browser-Dialog nötig.

Parameter

Name	Typ	Default	Beschreibung
$options (get)	CredentialRequestOptions	{}	Objekt mit Schlüsseln wie `password`, `publicKey`, `federated`, `identity` sowie `mediation` (`"silent"`, `"optional"`, `"conditional"`, `"required"`) und `signal` (`AbortSignal`).
$options (create) Pflicht	CredentialCreationOptions		Objekt mit genau einem Typ-Schlüssel: `password`, `federated` oder `publicKey`. Optional kommt `signal` hinzu.
$credential (store) Pflicht	Credential		Das zu speichernde Anmeldedaten-Objekt, meist ein `PasswordCredential` oder `FederatedCredential`.

Rückgabewert

Typ

CredentialsContainer

Beschreibung

navigator.credentials liefert die einzige CredentialsContainer-Instanz des aktuellen Fensters. Alle Methoden geben ein Promise zurück.

Beispiele

Gespeichertes Passwort abrufen und automatisch anmelden

const autoLogin = async () => {
  if (!('credentials' in navigator) || !window.PasswordCredential) return;

  const cred = await navigator.credentials.get({
    password: true,
    mediation: 'optional' // Browser darf ohne Nachfrage liefern, falls erlaubt
  });

  if (cred?.type === 'password') {
    const res = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ user: cred.id, pass: cred.password })
    });
    console.log(res.ok ? `Angemeldet als ${cred.id}` : 'Login fehlgeschlagen');
  } else {
    console.log('Keine gespeicherten Anmeldedaten');
  }
};

autoLogin();

Angemeldet als max@example.com

Nach erfolgreichem Login Passwort speichern

const form = document.querySelector('#login-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const res = await fetch('/api/login', { method: 'POST', body: new FormData(form) });

  if (res.ok && window.PasswordCredential) {
    // Formular braucht autocomplete="username" / "current-password"
    const cred = new PasswordCredential(form);
    await navigator.credentials.store(cred);
    console.log('Anmeldedaten im Browser gespeichert');
  }
});

Anmeldedaten im Browser gespeichert

Mit Passkey (WebAuthn) anmelden

const loginWithPasskey = async () => {
  // Challenge kommt vom Server, hier als Base64URL-String
  const { challenge } = await (await fetch('/api/webauthn/challenge')).json();
  const toBytes = (b64) => Uint8Array.from(atob(b64.replace(/-/g, '+').replace(/_/g, '/')), c => c.charCodeAt(0));

  const controller = new AbortController();
  setTimeout(() => controller.abort(), 60_000);

  const assertion = await navigator.credentials.get({
    publicKey: {
      challenge: toBytes(challenge),
      rpId: location.hostname,
      userVerification: 'preferred'
    },
    signal: controller.signal
  });

  console.log('Credential-ID:', assertion.id);
  // assertion.response an den Server zur Prüfung senden
};

loginWithPasskey().catch(err => console.error(err.name, err.message));

Credential-ID: Xy3k...Qw

Beim Logout die automatische Anmeldung abschalten

const logout = async () => {
  await fetch('/api/logout', { method: 'POST' });
  await navigator.credentials.preventSilentAccess();
  console.log('Abgemeldet – kein stilles Auto-Login mehr');
};

document.querySelector('#logout').addEventListener('click', logout);

Abgemeldet – kein stilles Auto-Login mehr

// Wichtig · Fallstricke

Nur im sicheren Kontext: Außerhalb von HTTPS bzw. localhost ist navigator.credentials undefined.
Browser-Unterstützung ist uneinheitlich: PublicKeyCredential (WebAuthn/Passkeys) läuft in allen modernen Browsern. PasswordCredential und FederatedCredential gibt es nur in Chromium-Browsern, nicht in Firefox und Safari. FedCM (identity) ist ebenfalls vor allem in Chromium verfügbar. Deshalb vorher prüfen, ob das Feature da ist, etwa mit window.PasswordCredential.
get() kann mit null erfüllt werden, wenn keine passenden Daten vorhanden sind oder der Dialog abgebrochen wurde. Bei WebAuthn wird dagegen meist mit einer NotAllowedError abgelehnt.
mediation: "silent" schlägt fehl bzw. liefert null, wenn vorher preventSilentAccess() aufgerufen wurde. Beim Logout sollte man preventSilentAccess() immer aufrufen, sonst werden Nutzer sofort wieder angemeldet.
mediation: "conditional" ermöglicht Passkey-Autofill direkt im Eingabefeld (autocomplete="username webauthn"). Vorher mit PublicKeyCredential.isConditionalMediationAvailable() prüfen, ob das verfügbar ist.
Sicherheit: WebAuthn-Challenges müssen vom Server kommen, zufällig und nur einmal gültig sein. Das Ergebnis muss immer serverseitig geprüft werden, nie nur im Client. In iframes braucht es passende Permissions-Policy-Freigaben (publickey-credentials-get, publickey-credentials-create).

Siehe auch

Credential Navigator.credentials IdentityProvider MediaTrackConstraints PresentationReceiver