Credential.id — Eigenschaft · JavaScript-Referenz

Signatur

Credential.id

Beschreibung

Die schreibgeschützte Eigenschaft id des Interfaces Credential enthält die Kennung eines Berechtigungsnachweises als String. Sie ist Teil der Credential Management API und wird von allen abgeleiteten Typen geerbt, zum Beispiel PasswordCredential, FederatedCredential, PublicKeyCredential (WebAuthn/Passkeys) und IdentityCredential (FedCM).

Was die Kennung genau bedeutet, hängt vom Typ ab:

PasswordCredential: der Benutzername bzw. die E-Mail-Adresse, mit der sich jemand anmeldet.
FederatedCredential: die Konto-Kennung beim Identitätsanbieter, meist ebenfalls eine E-Mail-Adresse.
PublicKeyCredential: die Credential-ID im base64url-Format. Sie ist identisch mit rawId (einem ArrayBuffer), nur als String kodiert.

Die Eigenschaft wird typischerweise nach navigator.credentials.get() oder navigator.credentials.create() ausgelesen, um den Nachweis einem Konto auf dem Server zuzuordnen. Bei WebAuthn zum Beispiel speichert der Server die Credential-ID bei der Registrierung und sucht damit später bei der Anmeldung den passenden öffentlichen Schlüssel.

Rückgabewert

Typ

string

Beschreibung

Die Kennung des Berechtigungsnachweises. Das Format hängt vom Typ ab: Benutzername bzw. E-Mail bei PasswordCredential und FederatedCredential, base64url-kodierte Credential-ID bei PublicKeyCredential.

Beispiele

Benutzernamen aus einem gespeicherten Passwort lesen

// Automatische Anmeldung mit einem im Browser gespeicherten Passwort
const autoLogin = async () => {
  if (!('PasswordCredential' in window)) return;

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

  if (cred && cred.type === 'password') {
    console.log(`Angemeldet als: ${cred.id}`);
    // cred.password ist nur in Chromium-Browsern verfügbar
  }
};

autoLogin();

Angemeldet als: max@example.com

WebAuthn: Credential-ID nach der Registrierung an den Server schicken

const registerPasskey = async (options) => {
  // options kommen vom Server (challenge, rp, user, pubKeyCredParams ...)
  const cred = await navigator.credentials.create({ publicKey: options });

  console.log(cred.type);           // 'public-key'
  console.log(typeof cred.id);      // 'string' (base64url)
  console.log(cred.rawId instanceof ArrayBuffer); // true

  await fetch('/api/passkeys', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ credentialId: cred.id })
  });
};

public-key string true

Prüfen, ob id und rawId übereinstimmen

// rawId (ArrayBuffer) in base64url umwandeln und mit id vergleichen
const toBase64Url = (buffer) =>
  btoa(String.fromCharCode(...new Uint8Array(buffer)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');

const checkId = async (publicKeyOptions) => {
  const cred = await navigator.credentials.get({ publicKey: publicKeyOptions });
  console.log(toBase64Url(cred.rawId) === cred.id);
};

true

// Wichtig · Fallstricke

Schreibgeschützt: Wenn man id nachträglich zuweist, passiert nichts (im Strict Mode gibt es einen TypeError). Die Kennung wird beim Anlegen festgelegt, z. B. über new PasswordCredential({ id, password }).
Das Format hängt vom Typ ab: Bei PublicKeyCredential ist id base64url-kodiert, ohne Padding. Standard-Base64 mit +, / und = passt nicht dazu. Den Typ vorher über cred.type prüfen.
Sicherheit: Die Kennung ist kein Geheimnis und beweist keine Identität. Bei WebAuthn muss der Server immer die Signatur prüfen und darf sich nicht auf die übermittelte ID allein verlassen. Benutzernamen aus PasswordCredential.id nicht ungeprüft per innerHTML einfügen (XSS-Gefahr).
Kompatibilität: PasswordCredential und FederatedCredential gibt es praktisch nur in Chromium-Browsern. PublicKeyCredential wird von allen modernen Browsern unterstützt. Die API funktioniert nur in sicheren Kontexten (HTTPS).

Siehe auch

Credential Credential.type Client.id Element.id OTPCredential.code