PasswordCredential.name — Eigenschaft · JavaScript-Referenz

Signatur

PasswordCredential.name

Beschreibung

Die Eigenschaft name eines PasswordCredential-Objekts enthält einen frei wählbaren, menschenlesbaren Namen, zum Beispiel „Erika Mustermann“. Der Browser zeigt ihn in der nativen Kontoauswahl an, die bei navigator.credentials.get() erscheinen kann, wenn für eine Origin mehrere gespeicherte Zugangsdaten vorhanden sind. Zusammen mit iconURL hilft er Nutzerinnen und Nutzern, das richtige Konto zu erkennen.

Gesetzt wird der Wert beim Erzeugen des Credentials, entweder über ein Datenobjekt (new PasswordCredential({ id, password, name })) oder aus einem Formular-Element. Im Formularfall liest der Browser das Feld mit autocomplete="name" bzw. autocomplete="nickname". Danach lässt sich name nur noch lesen. Soll der Name geändert werden, legt man ein neues Credential an und speichert es mit navigator.credentials.store().

Die Eigenschaft stammt aus dem Mixin CredentialUserData, das auch FederatedCredential einbindet. Ist beim Erzeugen kein Name angegeben, ist der Wert ein leerer String "". Er ist nie null.

Rückgabewert

Typ

string

Beschreibung

Der menschenlesbare Anzeigename des Kontos oder ein leerer String, wenn keiner angegeben wurde.

Beispiele

Credential mit Anzeigenamen erzeugen und speichern

const speichereLogin = async (benutzer, passwort, anzeigename) => {
  if (!('PasswordCredential' in window)) return;
  const cred = new PasswordCredential({
    id: benutzer,
    password: passwort,
    name: anzeigename,
    iconURL: 'https://example.com/avatar/erika.png'
  });
  console.log(cred.name);
  await navigator.credentials.store(cred);
};

speichereLogin('erika@example.com', 'geheim123', 'Erika Mustermann');

Erika Mustermann

Gespeicherte Zugangsdaten abrufen und Namen anzeigen

const autoLogin = async () => {
  const cred = await navigator.credentials.get({
    password: true,
    mediation: 'optional'
  });
  if (cred instanceof PasswordCredential) {
    const begruessung = cred.name || cred.id;
    document.querySelector('#hallo').textContent = `Willkommen zurück, ${begruessung}!`;
  }
};

autoLogin();

Namen aus einem Formular übernehmen

// <form id="login">
//   <input name="user" autocomplete="username">
//   <input name="anzeige" autocomplete="name">
//   <input name="pw" type="password" autocomplete="current-password">
// </form>
const form = document.querySelector('#login');
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const cred = new PasswordCredential(form);
  console.log(`Name: "${cred.name}"`);
  await navigator.credentials.store(cred);
});

Name: "Erika Mustermann"

Eigenschaft ist schreibgeschützt

const cred = new PasswordCredential({ id: 'max', password: 'pw', name: 'Max' });
cred.name = 'Moritz'; // wird ignoriert (im Strict Mode: TypeError)
console.log(cred.name);

Max

// Wichtig · Fallstricke

Browser-Unterstützung: PasswordCredential gibt es nur in Chromium-basierten Browsern. 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 auf localhost).
Schreibschutz: Eine Zuweisung an name wird stillschweigend ignoriert. Im Strict Mode (also auch in ES-Modulen) löst sie einen TypeError aus.
Leerer Wert: Ohne Angabe ist name ein leerer String. Für die Anzeige lohnt sich deshalb ein Rückfallwert wie cred.name || cred.id.
Sicherheit: Der Name kommt aus Nutzereingaben. Gib ihn deshalb über textContent aus und nicht über innerHTML, sonst droht XSS.
Der Wert ist öffentlich und nicht geheim. Er darf keine sensiblen Daten enthalten.

Siehe auch

OTPCredential.code PasswordCredential.iconURL PasswordCredential.password Credential.type Credential.id