PublicKeyCredential.getClientCapabilities() — Methode · JavaScript-Referenz

Signatur

PublicKeyCredential.getClientCapabilities()

Beschreibung

PublicKeyCredential.getClientCapabilities() ist eine statische Methode der WebAuthn-API. Mit einem einzigen Aufruf erfährst du, welche Funktionen rund um Passkeys und Public-Key-Anmeldedaten der aktuelle Client unterstützt. Bisher brauchte man dafür mehrere Einzelprüfungen wie isConditionalMediationAvailable() oder isUserVerifyingPlatformAuthenticatorAvailable().

Das aufgelöste Objekt ordnet Fähigkeitsnamen jeweils einem boolean zu. Typische Schlüssel sind:

conditionalCreate: automatisches Anlegen eines Passkeys ohne eigenen Dialog (bedingte Erstellung)
conditionalGet: Passkey-Vorschläge im Autofill-Menü (bedingte Vermittlung, mediation: "conditional")
hybridTransport: Anmeldung über ein anderes Gerät, z. B. ein Smartphone per QR-Code
passkeyPlatformAuthenticator: ein Plattform-Authentifikator für Passkeys ist verfügbar, direkt oder über Hybrid
userVerifyingPlatformAuthenticator: ein Plattform-Authentifikator mit Nutzerverifizierung, z. B. Touch ID oder Windows Hello
relatedOrigins: Anfragen über verwandte Ursprünge (Related Origin Requests)
signalAllAcceptedCredentials, signalCurrentUserDetails, signalUnknownCredential: Unterstützung der Signal-API
extension:…: unterstützte Erweiterungen, z. B. extension:prf, extension:largeBlob oder extension:credProps

Nutze die Methode beim Laden einer Login- oder Registrierungsseite, um die Oberfläche anzupassen. Du kannst dann zum Beispiel einen „Mit Passkey anmelden“-Button nur zeigen, wenn es sinnvoll ist, oder Passkey-Autofill aktivieren. Wichtig: Fehlt ein Schlüssel im Ergebnis, heißt das nicht automatisch false. Der Client kann über die Fähigkeit schlicht keine Aussage machen. Prüfe deshalb ausdrücklich auf === true.

Rückgabewert

Typ

Promise<Record<string, boolean>>

Beschreibung

Ein Promise, das mit einem einfachen Objekt aufgelöst wird. Die Schlüssel sind Fähigkeitsnamen (z. B. conditionalGet oder extension:prf), die Werte sind true oder false. Fähigkeiten, über die der Client nichts weiß, fehlen im Objekt.

Beispiele

Alle Fähigkeiten des Clients ausgeben

const zeigeFaehigkeiten = async () => {
  // Prüfen, ob die Methode überhaupt existiert
  if (typeof PublicKeyCredential?.getClientCapabilities !== 'function') {
    console.log('getClientCapabilities() wird nicht unterstützt');
    return;
  }

  const caps = await PublicKeyCredential.getClientCapabilities();
  for (const [name, wert] of Object.entries(caps)) {
    console.log(`${name}: ${wert}`);
  }
};

zeigeFaehigkeiten();

conditionalCreate: true conditionalGet: true hybridTransport: true passkeyPlatformAuthenticator: true userVerifyingPlatformAuthenticator: true relatedOrigins: true extension:prf: true … (je nach Browser und Gerät)

Passkey-Button und Autofill abhängig von den Fähigkeiten aktivieren

const initLogin = async () => {
  const button = document.querySelector('#passkey-login');
  let caps = {};

  try {
    caps = await PublicKeyCredential.getClientCapabilities();
  } catch (err) {
    console.warn('Fähigkeiten nicht ermittelbar:', err);
  }

  // Fehlende Schlüssel bedeuten "unbekannt", deshalb strikt auf true prüfen
  button.hidden = caps.passkeyPlatformAuthenticator !== true;

  if (caps.conditionalGet === true) {
    // Passkey-Vorschläge im Autofill (input benötigt autocomplete="username webauthn")
    const credential = await navigator.credentials.get({
      mediation: 'conditional',
      publicKey: {
        challenge: crypto.getRandomValues(new Uint8Array(32)), // in der Praxis vom Server
        rpId: location.hostname
      }
    });
    console.log('Angemeldet mit', credential.id);
  }
};

initLogin();

Fallback auf ältere Einzelprüfungen

const unterstuetztPlattformAuth = async () => {
  if (!window.PublicKeyCredential) return false;

  if (typeof PublicKeyCredential.getClientCapabilities === 'function') {
    const caps = await PublicKeyCredential.getClientCapabilities();
    if ('userVerifyingPlatformAuthenticator' in caps) {
      return caps.userVerifyingPlatformAuthenticator;
    }
  }

  // Älterer Weg für Browser ohne getClientCapabilities()
  return PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
};

unterstuetztPlattformAuth().then((ok) => console.log('Plattform-Authentifikator:', ok));

Plattform-Authentifikator: true

// Wichtig · Fallstricke

Sicherer Kontext nötig: Die WebAuthn-API gibt es nur über HTTPS (oder localhost). Auf HTTP-Seiten ist PublicKeyCredential nicht definiert.
Fehlende Schlüssel: Ist eine Fähigkeit nicht im Ergebnis enthalten, ist sie unbekannt und nicht zwingend nicht vorhanden. Prüfe mit === true oder in, statt dich auf einen falsy-Wert zu verlassen.
Browser-Kompatibilität: Die Methode ist recht neu (Safari 17.4, Chromium 133, Firefox 135). Welche Schlüssel geliefert werden, ist je nach Browser unterschiedlich. Erkenne die Methode immer zuerst per Feature-Erkennung und sieh einen Fallback auf isConditionalMediationAvailable() bzw. isUserVerifyingPlatformAuthenticatorAvailable() vor.
Kein Sicherheitsnachweis: Das Ergebnis dient nur dazu, die Oberfläche passend zu gestalten. Sicherheitsentscheidungen gehören auf den Server, der die Attestation bzw. Assertion prüft.
Die Methode ist statisch. Rufe sie auf PublicKeyCredential auf, nicht auf einer Instanz.

Siehe auch

PublicKeyCredential PublicKeyCredential.isConditionalMediationAvailable() PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() CredentialsContainer.get() CredentialsContainer.create() PublicKeyCredential.signalUnknownCredential() PaymentRequest.getSecurePaymentConfirmationCapabilities()