PasswordCredentialInit — Schnittstelle · JavaScript-Referenz

Signatur

interface PasswordCredentialInit

Beschreibung

PasswordCredentialInit ist kein Objekt, das man mit new erzeugt, sondern ein Wörterbuch (ein einfaches Objekt mit festgelegten Eigenschaften). Es beschreibt die Daten eines Passwort-Anmeldedatensatzes: Benutzerkennung, Passwort, Ursprung und optional einen Anzeigenamen und ein Symbolbild. Das Objekt übergibt man als Wert der Option password an CredentialsContainer.create() oder direkt an den Konstruktor PasswordCredential().

Laut Spezifikation ist PasswordCredentialInit ein Union-Typ aus dem Wörterbuch PasswordCredentialData und einem HTMLFormElement. Statt eines Objekts kann man also auch ein <form>-Element übergeben. Der Browser liest die Werte dann über die autocomplete-Attribute der Felder aus: username wird zu id, current-password bzw. new-password zu password, name zu name und photo zu iconURL.

Typischerweise nutzt man das Wörterbuch nach einer erfolgreichen Anmeldung oder Registrierung. Man erzeugt damit einen PasswordCredential und speichert ihn mit navigator.credentials.store() im Passwortmanager des Browsers. Beim nächsten Besuch kann die Seite ihn mit navigator.credentials.get({ password: true }) wieder abrufen, sodass eine automatische Anmeldung möglich wird.

Parameter

Name	Typ	Default	Beschreibung
$id Pflicht	string		Benutzerkennung, meist Benutzername oder E-Mail-Adresse. Entspricht später `PasswordCredential.id`.
$password Pflicht	string		Das Passwort. Ein leerer String führt zu einem `TypeError`.
$origin	string	Ursprung des aktuellen Dokuments	Ursprung (z. B. `https://example.com`), zu dem der Datensatz gehört. In der Spezifikation als Pflichtfeld aufgeführt, Chromium setzt aber den Ursprung des Dokuments ein, wenn der Wert fehlt. Wer auf Nummer sicher gehen will, übergibt `location.origin`.
$name	string		Lesbarer Anzeigename, z. B. der volle Name. Der Browser zeigt ihn in der Kontoauswahl an.
$iconURL	string		URL eines Avatars oder Symbols für die Kontoauswahl. Die URL muss aus einem sicheren Kontext stammen, also `https:` verwenden.

Rückgabewert

Typ

PasswordCredentialInit

Beschreibung

Ein einfaches Objekt. Es hat keinen eigenen Rückgabewert, sondern dient als Eingabe für navigator.credentials.create() (liefert Promise<PasswordCredential | null>) oder new PasswordCredential().

Beispiele

Anmeldedaten nach erfolgreichem Login speichern

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

  // PasswordCredentialInit-Wörterbuch
  const init = {
    id: email,
    password,
    name: displayName,
    origin: location.origin,
    iconURL: 'https://example.com/avatars/default.png'
  };

  const credential = await navigator.credentials.create({ password: init });
  await navigator.credentials.store(credential);
  return true;
};

saveCredential('anna@example.com', 's3cr3t!', 'Anna Beispiel')
  .then((ok) => console.log('Gespeichert:', ok));

Gespeichert: true

Direkt über den Konstruktor erzeugen

const cred = new PasswordCredential({
  id: 'max.muster',
  password: 'geheim123',
  name: 'Max Muster'
});

console.log(cred.type, cred.id, cred.name);

password max.muster Max Muster

Formular-Element statt Objekt übergeben

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

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

  if (response.ok && 'PasswordCredential' in window) {
    // Werte kommen aus den autocomplete-Attributen
    const credential = await navigator.credentials.create({ password: form });
    await navigator.credentials.store(credential);
    console.log('Angemeldet als', credential.id);
  }
});

Angemeldet als max.muster

// Wichtig · Fallstricke

Kompatibilität: PasswordCredential und damit dieses Wörterbuch gibt es nur in Chromium-Browsern (Chrome, Edge, Opera, Samsung Internet). Firefox und Safari unterstützen es nicht. Prüfe deshalb immer vorher mit 'PasswordCredential' in window.
Sicherer Kontext: Die API funktioniert nur über HTTPS (oder localhost).
Fehlen id oder password oder sind sie leer, wirft der Konstruktor einen TypeError bzw. das Promise von create() wird abgelehnt.
Wird ein Formular übergeben, müssen die Felder korrekte autocomplete-Werte haben. Sonst fehlen id oder password und die Erstellung schlägt fehl.
create() legt den Datensatz nur an. Gespeichert wird er erst mit navigator.credentials.store(), dabei fragt der Browser den Nutzer in der Regel um Erlaubnis.
Sicherheit: Das Passwort steht im Klartext im Objekt. Gib es nicht in Logs aus und speichere es nicht zusätzlich im localStorage.

Siehe auch

PasswordCredential CredentialsContainer.create() CredentialsContainer.store() CredentialsContainer.get() FederatedCredentialInit