PasswordCredential — Schnittstelle · JavaScript-Referenz

Signatur

interface PasswordCredential extends Credential

Beschreibung

PasswordCredential gehört zur Credential Management API und erweitert das Basis-Interface Credential. Ein Objekt dieses Typs enthält einen Benutzernamen (id), ein Passwort (password) sowie optional einen Anzeigenamen (name) und eine Avatar-URL (iconURL). Die Eigenschaft type hat immer den Wert "password".

Mit dieser Schnittstelle kann eine Webanwendung die Passwortverwaltung des Browsers direkt ansprechen. Statt sich darauf zu verlassen, dass der Browser ein Login-Formular selbst erkennt, übergibt man nach einer erfolgreichen Anmeldung mit navigator.credentials.store() ausdrücklich die Zugangsdaten. Beim nächsten Besuch liefert navigator.credentials.get({ password: true }) sie wieder zurück. So sind eine Anmeldung per Klick oder sogar eine stille automatische Anmeldung möglich.

Ein Objekt lässt sich auf zwei Arten erzeugen: mit einem Datenobjekt (new PasswordCredential({ id, password, ... })) oder direkt aus einem <form>-Element (new PasswordCredential(formElement)). Im zweiten Fall liest der Browser die Felder anhand ihrer autocomplete-Attribute aus (username, current-password/new-password, name, photo).

Eigenschaften:

id (geerbt): Benutzername oder E-Mail-Adresse
type (geerbt): immer "password"
password: das Passwort im Klartext (nur lesbar)
name: Anzeigename für die Kontoauswahl
iconURL: URL eines Avatars für die Kontoauswahl

Parameter

Name	Typ	Default	Beschreibung
$data Pflicht	PasswordCredentialData \| HTMLFormElement		Argument für den Konstruktor: entweder ein Objekt mit den Zugangsdaten oder ein Formular, dessen Felder passende `autocomplete`-Attribute haben.
$data.id Pflicht	string		Benutzerkennung, meist Benutzername oder E-Mail-Adresse.
$data.password Pflicht	string		Das Passwort. Ein leerer String löst einen `TypeError` aus.
$data.name	string		Anzeigename, den der Browser in der Kontoauswahl zeigt.
$data.iconURL	string		URL eines Avatarbildes für die Kontoauswahl. Die URL muss eine sichere Adresse (HTTPS) sein.
$data.origin	string	aktueller Origin	Origin, für den die Zugangsdaten gelten. In der Praxis setzt der Browser den aktuellen Origin.

Rückgabewert

Typ

PasswordCredential

Beschreibung

Der Konstruktor gibt ein neues PasswordCredential-Objekt zurück. Dieses übergibt man an navigator.credentials.store(). Umgekehrt liefert navigator.credentials.get() ein solches Objekt zurück.

Beispiele

Zugangsdaten nach erfolgreichem Login 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('Login fehlgeschlagen');

  // Nur speichern, wenn der Browser die API kennt
  if ('PasswordCredential' in window) {
    const cred = new PasswordCredential({
      id: username,
      password,
      name: 'Max Mustermann',
      iconURL: 'https://example.com/avatars/max.png'
    });
    await navigator.credentials.store(cred);
    console.log('Gespeichert:', cred.type, cred.id);
  }
};

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

Gespeichert: password max@example.com

PasswordCredential direkt aus einem Formular erzeugen

// HTML:
// <form id="login">
//   <input name="user" autocomplete="username">
//   <input name="pass" type="password" autocomplete="current-password">
//   <button>Anmelden</button>
// </form>
const form = document.querySelector('#login');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  if (!('PasswordCredential' in window)) return form.submit();

  const cred = new PasswordCredential(form);
  const res = await fetch('/api/login', {
    method: 'POST',
    body: new FormData(form)
  });
  if (res.ok) {
    await navigator.credentials.store(cred);
    location.href = '/dashboard';
  }
});

Automatische Anmeldung beim Seitenaufruf

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

  const cred = await navigator.credentials.get({
    password: true,
    mediation: 'optional' // 'silent' = nie nachfragen, 'required' = immer nachfragen
  });

  if (cred instanceof PasswordCredential) {
    const res = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: cred.id, password: cred.password })
    });
    return res.ok ? cred.id : null;
  }
  return null;
};

autoSignIn().then((user) => console.log(user ? `Angemeldet als ${user}` : 'Kein Konto gewählt'));

Angemeldet als max@example.com

Beim Logout die stille Anmeldung verhindern

const logout = async () => {
  await fetch('/api/logout', { method: 'POST' });
  // Sonst meldet mediation: 'silent' den Nutzer sofort wieder an
  if (navigator.credentials?.preventSilentAccess) {
    await navigator.credentials.preventSilentAccess();
  }
  console.log('Abgemeldet');
};

logout();

Abgemeldet

// Wichtig · Fallstricke

Browserunterstützung: Nur Chromium-basierte Browser (Chrome, Edge, Opera, Samsung Internet) unterstützen die Schnittstelle. Firefox und Safari kennen sie nicht. Deshalb vorher immer mit 'PasswordCredential' in window prüfen und ein normales Formular als Rückfallebene anbieten.
Sicherer Kontext: Die API funktioniert nur über HTTPS (oder localhost) und nur im obersten Browsing-Kontext, also nicht ohne Weiteres in iframes.
Klartext-Passwort: password enthält das Passwort unverschlüsselt. Es darf nicht geloggt, nicht in localStorage abgelegt und nur per HTTPS an den eigenen Server geschickt werden. Eine XSS-Lücke auf der Seite gibt Angreifern Zugriff auf navigator.credentials.get(). Eine strikte Content-Security-Policy ist daher wichtig.
Speichern erst nach Erfolg: store() nur nach einer vom Server bestätigten Anmeldung aufrufen. Sonst werden falsche Passwörter gespeichert.
Logout: Ohne navigator.credentials.preventSilentAccess() meldet mediation: 'silent' den Nutzer direkt nach dem Abmelden wieder an.
Die Konstruktor-Variante mit Formular braucht korrekte autocomplete-Attribute. Fehlen Benutzername oder Passwort, wird ein TypeError ausgelöst.
Für passwortlose Anmeldungen ist PublicKeyCredential (WebAuthn/Passkeys) die modernere und browserübergreifend unterstützte Alternative.

Siehe auch

PasswordCredentialInit OTPCredential Credential FederatedCredential IdentityCredential