CredentialsContainer.store() — Methode · JavaScript-Referenz

Signatur

CredentialsContainer.prototype.store(credential)

Beschreibung

navigator.credentials.store() gehört zur Credential Management API. Die Methode reicht dem Browser Anmeldedaten weiter, die er dauerhaft speichern soll, z. B. im eingebauten Passwort-Manager. Nützlich ist das vor allem bei Anmeldungen über fetch() oder in Single-Page-Apps. Dort gibt es kein klassisches Absenden eines Formulars, an dem der Browser „Passwort speichern?“ selbst erkennen würde.

Üblicherweise rufen Sie store() auf, nachdem der Server die Anmeldung erfolgreich bestätigt hat. So landen keine falschen Passwörter im Speicher. Beim nächsten Besuch lassen sich die Daten mit navigator.credentials.get({ password: true }) wieder abrufen, etwa für eine automatische Anmeldung.

Nur die Typen PasswordCredential und FederatedCredential lassen sich auf diese Weise speichern. WebAuthn-Schlüssel (PublicKeyCredential) werden bei der Erzeugung über navigator.credentials.create() angelegt. Gibt man sie an store(), lehnt das Promise mit einem NotSupportedError ab.

Ob wirklich gespeichert wird, entscheidet der Browser bzw. der Benutzer. Chrome zeigt dafür meist eine Rückfrage zum Speichern an. Wie der Benutzer entschieden hat, erfährt Ihre Seite nicht.

Parameter

Name	Typ	Default	Beschreibung
$credential Pflicht	PasswordCredential \| FederatedCredential		Die Anmeldedaten, die gespeichert werden sollen. Eine `PasswordCredential` erzeugen Sie mit `new PasswordCredential(formElement)` oder `new PasswordCredential({ id, password, name, iconURL })`.

Rückgabewert

Typ

Promise<undefined>

Beschreibung

Ein Promise, das ohne Wert (undefined) erfüllt wird, sobald der Browser die Anfrage bearbeitet hat. Ältere Spezifikationsstände und MDN beschreiben noch eine Rückgabe der Credential-Instanz. Verlassen Sie sich darauf nicht. Das Promise wird z. B. mit NotSupportedError (Typ nicht speicherbar) oder NotAllowedError (z. B. in einem ursprungsfremden iframe) abgelehnt.

Beispiele

Nach erfolgreichem fetch-Login das Passwort speichern

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const data = new FormData(form);

  const res = await fetch('/api/login', { method: 'POST', body: data });
  if (!res.ok) {
    console.log('Anmeldung fehlgeschlagen');
    return;
  }

  // Nur speichern, wenn die API verfügbar ist
  if ('PasswordCredential' in window) {
    // Die Felder brauchen autocomplete="username" und autocomplete="current-password"
    const cred = new PasswordCredential(form);
    await navigator.credentials.store(cred);
    console.log('Anmeldedaten an den Browser übergeben');
  }

  location.href = '/dashboard';
});

Anmeldedaten an den Browser übergeben

PasswordCredential aus einem Objekt erzeugen

const saveLogin = async (username, password, displayName) => {
  if (!('PasswordCredential' in window)) return false;

  const cred = new PasswordCredential({
    id: username,
    password,
    name: displayName,
    iconURL: 'https://example.com/avatar.png'
  });

  try {
    await navigator.credentials.store(cred);
    return true;
  } catch (err) {
    console.error(`${err.name}: ${err.message}`);
    return false;
  }
};

saveLogin('max@example.com', 'geheim123', 'Max Mustermann')
  .then((ok) => console.log('Gespeichert:', ok));

Gespeichert: true

Föderierte Anmeldung (z. B. über Google) merken

const rememberFederatedLogin = async (email) => {
  if (!('FederatedCredential' in window)) return;

  const cred = new FederatedCredential({
    id: email,
    provider: 'https://accounts.google.com',
    name: email
  });
  await navigator.credentials.store(cred);
};

// Später: gespeicherte Anmeldung abrufen
const restore = async () => {
  const cred = await navigator.credentials.get({
    federated: { providers: ['https://accounts.google.com'] },
    mediation: 'optional'
  });
  console.log(cred ? `Angemeldet über ${cred.provider}` : 'Keine gespeicherte Anmeldung');
};

Angemeldet über https://accounts.google.com

// Wichtig · Fallstricke

Browser-Unterstützung: navigator.credentials gibt es in allen modernen Browsern. PasswordCredential und FederatedCredential und damit ein sinnvoller Aufruf von store() werden aber nur von Chromium-Browsern unterstützt (Chrome, Edge, Opera). Prüfen Sie deshalb immer mit 'PasswordCredential' in window, ob die API vorhanden ist. Als Rückfall bleibt ein normales Formular mit korrekten autocomplete-Attributen.
Nur in sicheren Kontexten: Die API ist nur über HTTPS oder localhost verfügbar.
iframes: Liegt das Dokument nicht im selben Ursprung wie alle übergeordneten Dokumente, wird das Promise mit NotAllowedError abgelehnt.
Erst prüfen, dann speichern: Rufen Sie store() erst auf, wenn der Server die Anmeldung bestätigt hat. Sonst landen Tippfehler im Passwort-Manager.
Kein Feedback: Ein erfülltes Promise heißt nicht, dass der Benutzer dem Speichern zugestimmt hat.
WebAuthn: PublicKeyCredential lässt sich nicht mit store() speichern (NotSupportedError). Verwenden Sie dafür navigator.credentials.create().
Sicherheit: Behandeln Sie Passwörter im Skript möglichst kurz und schreiben Sie sie nicht in Logs, localStorage oder Analyse-Werkzeuge.

Siehe auch

Navigator.credentials CredentialsContainer.create() CredentialsContainer.get() CredentialsContainer.preventSilentAccess() Selection.containsNode()