Signatur
Beschreibung
Die Eigenschaft type des Interfaces Credential gibt einen String zurück, der angibt, um welche Art von Anmeldedaten es sich handelt. Credential selbst ist eine abstrakte Basisklasse. Welcher Wert zurückkommt, hängt von der konkreten Unterklasse ab:
"password"–PasswordCredential(Benutzername und Passwort)"federated"–FederatedCredential(Anmeldung über einen Identitätsanbieter)"public-key"–PublicKeyCredential(WebAuthn/Passkeys)"otp"–OTPCredential(Einmalcode per SMS, WebOTP-API)"identity"–IdentityCredential(FedCM)
Am nützlichsten ist die Eigenschaft nach einem Aufruf von navigator.credentials.get(), wenn du mehrere Typen gleichzeitig anforderst (z. B. password und federated). Anhand von type entscheidest du dann, wie der Anmeldevorgang weiterläuft: Passwort an den Server schicken, zum Identitätsanbieter weiterleiten oder eine WebAuthn-Assertion prüfen lassen.
Der Wert ist schreibgeschützt und steht für jede Unterklasse fest. Die Eigenschaft ist am Prototyp als Getter definiert, du kannst sie also nicht überschreiben.
Rückgabewert
"password", "federated", "public-key", "otp" oder "identity".Beispiele
Gespeicherte Anmeldedaten abrufen und nach Typ verzweigen
const signIn = async () => {
const cred = await navigator.credentials.get({
password: true,
federated: { providers: ['https://accounts.google.com'] },
mediation: 'optional'
});
if (!cred) {
console.log('Keine gespeicherten Anmeldedaten – Formular anzeigen');
return;
}
switch (cred.type) {
case 'password':
await fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: cred.id, password: cred.password })
});
break;
case 'federated':
console.log(`Weiterleitung zu ${cred.provider}`);
break;
default:
console.warn('Unbekannter Typ:', cred.type);
}
};
signIn();Typ eines neu erzeugten PasswordCredential prüfen
const form = document.querySelector('#login-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
if (!('PasswordCredential' in window)) return;
const cred = new PasswordCredential(form); // liest Felder mit autocomplete-Attributen
console.log(cred.type);
await navigator.credentials.store(cred);
});WebAuthn-Assertion (Passkey) erkennen
const loginWithPasskey = async (challenge) => {
const cred = await navigator.credentials.get({
publicKey: { challenge, userVerification: 'preferred' }
});
console.log(cred.type); // "public-key"
console.log(cred instanceof PublicKeyCredential);
return cred;
};
loginWithPasskey(crypto.getRandomValues(new Uint8Array(32)));// Wichtig · Fallstricke
- Browser-Kompatibilität:
PasswordCredentialundFederatedCredentialgibt es nur in Chromium-basierten Browsern.PublicKeyCredential("public-key") läuft dagegen in allen aktuellen Browsern. Prüfe die Unterstützung mit'PasswordCredential' in window, bevor du den Typ verwendest. - Die API steht nur in einem sicheren Kontext (HTTPS oder localhost) zur Verfügung. In Cross-Origin-iframes ist sie meist durch Berechtigungsrichtlinien (Permissions Policy) eingeschränkt.
navigator.credentials.get()kannnullliefern. Prüfe das Ergebnis, bevor du auftypezugreifst, sonst gibt es einenTypeError.- Verlass dich nicht nur auf
type. Mitinstanceofprüfst du den Typ genauer, und TypeScript kann ihn dadurch besser eingrenzen. - Eine Zuweisung an
typewird im nicht-strikten Modus stillschweigend ignoriert. Im strikten Modus löst sie einenTypeErroraus.