Signatur
Beschreibung
Credential ist das abstrakte Basis-Interface der Credential Management API. Es liefert Informationen über eine Entität, meist einen Benutzer. Der Browser braucht diese Informationen, bevor er eine Vertrauensentscheidung treffen kann, zum Beispiel bei einer Anmeldung. Direkt instanziieren lässt sich Credential nicht. Man arbeitet immer mit einer der Unterklassen:
PasswordCredential: Benutzername und Passwort, die im Passwortmanager des Browsers gespeichert sindPublicKeyCredential: WebAuthn bzw. Passkeys mit asymmetrischer KryptografieIdentityCredential: föderierte Anmeldung über FedCM (z. B. „Mit Google anmelden“)OTPCredential: Einmalcodes aus SMS (WebOTP API)FederatedCredential: älteres Modell für föderierte Anmeldung, veraltet
Das Interface selbst hat nur zwei schreibgeschützte Eigenschaften. id ist ein string und identifiziert die Anmeldedaten, zum Beispiel über den Benutzernamen oder die Credential-ID. type ist ebenfalls ein string und nennt die Art: "password", "public-key", "identity", "otp" oder "federated". An type erkennt man, welche Unterklasse man vor sich hat.
Man bekommt Credential-Objekte nicht über einen Konstruktor, sondern über den CredentialsContainer unter navigator.credentials. Die Methode get() ruft vorhandene Anmeldedaten ab, create() legt neue an, und store() speichert Anmeldedaten im Browser. Typische Einsätze sind automatische Anmeldung, Passkey-Registrierung und föderierte Anmeldung ohne Drittanbieter-Cookies.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $id | string | Schreibgeschützte Eigenschaft: Kennung der Anmeldedaten. Bei PasswordCredential meist der Benutzername, bei PublicKeyCredential die Base64url-codierte Credential-ID. |
|
| $type | "password" | "public-key" | "identity" | "otp" | "federated" | Schreibgeschützte Eigenschaft: Art der Anmeldedaten. Daran erkennt man die konkrete Unterklasse. |
Rückgabewert
navigator.credentials.get() oder create(). Beide geben ein Promise<Credential | null> zurück.Beispiele
Gespeicherte Anmeldedaten abrufen und nach Typ unterscheiden
const anmelden = async () => {
if (!('credentials' in navigator)) {
console.log('Credential Management API nicht verfügbar');
return;
}
const cred = await navigator.credentials.get({
password: true,
mediation: 'optional'
});
if (!cred) {
console.log('Keine Anmeldedaten ausgewählt');
return;
}
console.log(cred instanceof Credential); // true
console.log(cred.type, cred.id);
if (cred.type === 'password') {
await fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ user: cred.id, pass: cred.password })
});
}
};
anmelden();Passwort nach erfolgreichem Login im Browser speichern
const form = document.querySelector('#login-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const res = await fetch('/api/login', { method: 'POST', body: new FormData(form) });
if (res.ok && 'PasswordCredential' in window) {
// Erzeugt die Anmeldedaten direkt aus dem Formular (Felder brauchen autocomplete-Attribute)
const cred = new PasswordCredential(form);
await navigator.credentials.store(cred);
console.log(`Gespeichert: ${cred.type} für ${cred.id}`);
}
});Passkey anlegen (PublicKeyCredential)
const registrierePasskey = async () => {
const cred = await navigator.credentials.create({
publicKey: {
challenge: crypto.getRandomValues(new Uint8Array(32)), // in der Praxis vom Server
rp: { name: 'Beispiel GmbH' },
user: {
id: new TextEncoder().encode('user-42'),
name: 'max@example.com',
displayName: 'Max Muster'
},
pubKeyCredParams: [{ type: 'public-key', alg: -7 }]
}
});
console.log(cred.type); // 'public-key'
console.log(typeof cred.id); // 'string'
return cred;
};
registrierePasskey().catch((err) => console.error(err.name, err.message));// Wichtig · Fallstricke
- Kein eigener Konstruktor:
new Credential()wirft einenTypeError. Man verwendet immer die Unterklassen odernavigator.credentials. - Nur in sicheren Kontexten: Die API funktioniert nur über HTTPS oder
localhost. In Cross-Origin-iframes braucht sie zusätzlich die passende Permissions Policy, etwapublickey-credentials-getoderidentity-credentials-get. - Browser-Kompatibilität:
PublicKeyCredential(Passkeys) funktioniert in allen modernen Browsern.PasswordCredentialundFederatedCredentialgibt es praktisch nur in Chromium-Browsern. Vorher mit'PasswordCredential' in windowprüfen. FedCM (IdentityCredential) ist noch nicht überall verfügbar. - Veraltet:
FederatedCredentialgilt als überholt. Für föderierte Anmeldung besser FedCM verwenden. - Sicherheit: Ein Passwort aus
PasswordCredentialist Klartext. Man schickt es nur über HTTPS und darf es nie loggen. Die Challenge bei WebAuthn muss vom Server kommen und dort geprüft werden. Eine im Client erzeugte Challenge taugt nur zu Demozwecken. get()kannnullliefern, etwa wenn der Benutzer abbricht oder keine Daten gespeichert sind. Diesen Fall immer abfangen.