new PasswordCredential() — Methode · JavaScript-Referenz

Signatur

new PasswordCredential(data | form)

Beschreibung

Der Konstruktor PasswordCredential() gehört zur Credential Management API. Er erzeugt ein Objekt mit Zugangsdaten aus Benutzername und Passwort. Mit diesem Objekt kann eine Webanwendung dem Passwortmanager des Browsers nach einer erfolgreichen Anmeldung oder Registrierung sagen: „Diese Zugangsdaten bitte speichern.“ Das geschieht über navigator.credentials.store().

Es gibt zwei Varianten:

Mit einem Datenobjekt (PasswordCredentialData): Sie geben id (Benutzername), password und optional name, iconURL sowie origin direkt an. Das passt gut zu Anmeldungen per fetch() ohne klassisches Absenden eines Formulars.
Mit einem HTMLFormElement: Der Browser liest die Werte anhand der autocomplete-Attribute der Formularfelder aus: username → id, current-password bzw. new-password → password, name → name, photo → iconURL.

Typischer Ablauf: Der Benutzer meldet sich an, der Server bestätigt die Anmeldung, danach wird ein PasswordCredential erzeugt und gespeichert. Beim nächsten Besuch kann die Seite die Daten mit navigator.credentials.get({ password: true }) wieder abrufen und den Benutzer so automatisch oder mit einem Klick anmelden.

Parameter

Name	Typ	Default	Beschreibung
$data Pflicht	PasswordCredentialData		Objekt mit den Zugangsdaten. Pflichtfelder: `id` (string, Benutzername/Kennung) und `password` (string). Optional: `name` (string, Anzeigename), `iconURL` (string, URL eines Avatars; muss eine sichere URL sein) und `origin` (string, Herkunft; laut Spezifikation Pflicht, am besten `location.origin` angeben). Alternativ zu `form`.
$form Pflicht	HTMLFormElement		Formular, dessen Felder über `autocomplete`-Attribute (`username`, `current-password`/`new-password`, `name`, `photo`) zugeordnet werden. Alternativ zu `data`.

Rückgabewert

Typ

PasswordCredential

Beschreibung

Ein neues PasswordCredential-Objekt mit den Eigenschaften id, password, name, iconURL und type (immer "password"). Fehlen id oder password oder sind sie leer, wird ein TypeError geworfen.

Beispiele

Nach erfolgreichem fetch-Login die Zugangsdaten speichern

const login = async (username, password) => {
  const res = await fetch('/api/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ username, password })
  });
  if (!res.ok) throw new Error('Anmeldung fehlgeschlagen');

  // Nur speichern, wenn der Browser die API unterstützt
  if ('PasswordCredential' in window) {
    const cred = new PasswordCredential({
      id: username,
      password,
      name: 'Max Mustermann',
      origin: location.origin
    });
    await navigator.credentials.store(cred);
    console.log('Gespeichert:', cred.type, cred.id);
  }
};

login('max@example.com', 'geheim123');

Gespeichert: password max@example.com

Credential direkt aus einem Formular erzeugen

// HTML:
// <form id="signup">
//   <input name="user" autocomplete="username">
//   <input name="pw" type="password" autocomplete="new-password">
//   <input name="fullname" autocomplete="name">
//   <button>Registrieren</button>
// </form>

const form = document.getElementById('signup');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const res = await fetch('/api/signup', { method: 'POST', body: new FormData(form) });
  if (res.ok && 'PasswordCredential' in window) {
    const cred = new PasswordCredential(form);
    await navigator.credentials.store(cred);
    console.log(`Konto für ${cred.name} (${cred.id}) gespeichert`);
  }
});

Konto für Max Mustermann (max@example.com) gespeichert

Gespeicherte Zugangsdaten beim nächsten Besuch abrufen

const autoSignIn = async () => {
  if (!('PasswordCredential' in window)) return null;

  const cred = await navigator.credentials.get({
    password: true,
    mediation: 'optional'
  });

  if (cred instanceof PasswordCredential) {
    console.log('Angemeldet als', cred.id);
    return cred;
  }
  return null;
};

autoSignIn();

Angemeldet als max@example.com

Fehlerfall: leeres Passwort

try {
  new PasswordCredential({ id: 'max', password: '', origin: location.origin });
} catch (err) {
  console.log(err.name);
}

TypeError

// Wichtig · Fallstricke

Browserunterstützung: Nur Chromium-basierte Browser (Chrome, Edge, Opera, Samsung Internet). Firefox und Safari kennen PasswordCredential nicht. Prüfen Sie die Unterstützung daher immer mit 'PasswordCredential' in window und bieten Sie das normale Formular als Rückfallebene an.
Sicherer Kontext: Funktioniert nur über HTTPS (oder localhost).
Nur nach erfolgreicher Anmeldung speichern: Wer ungeprüfte Eingaben speichert, legt falsche Passwörter im Passwortmanager ab.
Formular-Variante: Ohne passende autocomplete-Attribute findet der Browser keine Werte, und der Konstruktor wirft einen TypeError.
iconURL muss eine sichere URL (HTTPS) sein, sonst gibt es einen Fehler.
Sicherheit: Das Objekt enthält das Passwort im Klartext in cred.password. Nicht protokollieren und nicht an Dritt-Skripte weitergeben. Eine strenge CSP senkt das Risiko, dass per XSS eingeschleuster Code gespeicherte Zugangsdaten abruft.
Die früher genutzten Eigenschaften idName, passwordName und additionalData wurden entfernt. Senden Sie die Daten heute selbst per fetch().
Für eine Anmeldung ohne Passwort sind Passkeys (PublicKeyCredential/WebAuthn) die modernere Alternative.

Siehe auch

Credential new DOMMatrixReadOnly() new FederatedCredential() new PageSwapEvent() new StorageEvent()