PublicKeyCredential.isConditionalMediationAvailable() — Methode · JavaScript-Referenz

Signatur

PublicKeyCredential.isConditionalMediationAvailable()

Beschreibung

Die statische Methode PublicKeyCredential.isConditionalMediationAvailable() prüft, ob der Browser bedingte Vermittlung (engl. conditional mediation) für WebAuthn unterstützt. Gemeint ist die Anzeige gespeicherter Passkeys direkt im Autofill-Menü eines Eingabefelds. Das Feld muss dafür das Attribut autocomplete="username webauthn" tragen.

Mit dieser Prüfung erkennt man die Funktion, bevor man navigator.credentials.get() mit mediation: "conditional" aufruft. Bei true kann die Anmeldeanfrage gleich beim Laden der Seite im Hintergrund starten. Der Browser zeigt dem Nutzer dann seine Passkeys an, sobald er in das Benutzername-Feld klickt. Bei false bleibt es beim klassischen Ablauf: ein eigener „Mit Passkey anmelden“-Button, der ein modales WebAuthn-Dialogfenster öffnet.

Die Methode wird direkt auf dem Konstruktor aufgerufen, nicht auf einer Instanz. Sie steht nur in sicheren Kontexten (HTTPS oder localhost) zur Verfügung.

Rückgabewert

Typ

Promise<boolean>

Beschreibung

Ein Promise, das mit true erfüllt wird, wenn bedingte Vermittlung verfügbar ist, und sonst mit false.

Beispiele

Einfache Funktionserkennung

const conditionalSupported = async () => {
  // Ältere Browser kennen die Methode nicht – vorher prüfen
  if (
    window.PublicKeyCredential &&
    typeof PublicKeyCredential.isConditionalMediationAvailable === 'function'
  ) {
    return PublicKeyCredential.isConditionalMediationAvailable();
  }
  return false;
};

conditionalSupported().then((ok) => {
  console.log('Passkey-Autofill verfügbar:', ok);
});

Passkey-Autofill verfügbar: true

Passkey-Autofill beim Laden der Login-Seite starten

// HTML: <input type="text" name="username" autocomplete="username webauthn">
const startConditionalLogin = async () => {
  if (!(await PublicKeyCredential.isConditionalMediationAvailable?.())) {
    return; // Rückfall auf klassischen Login-Button
  }

  // Challenge vom Server holen
  const { challenge } = await fetch('/webauthn/challenge').then((r) => r.json());

  const credential = await navigator.credentials.get({
    mediation: 'conditional',
    publicKey: {
      challenge: Uint8Array.from(atob(challenge), (c) => c.charCodeAt(0)),
      rpId: location.hostname,
      userVerification: 'preferred',
      allowCredentials: [] // leer: Browser bietet alle passenden Passkeys an
    }
  });

  // Assertion zur Prüfung an den Server schicken
  await fetch('/webauthn/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(credential.toJSON())
  });
  console.log('Angemeldet mit Passkey', credential.id);
};

startConditionalLogin().catch((err) => console.warn('Passkey-Login abgebrochen:', err.name));

Bedingte Anfrage abbrechen, wenn der Nutzer den modalen Weg wählt

let conditionalAbort;

const initAutofill = async () => {
  if (!(await PublicKeyCredential.isConditionalMediationAvailable?.())) return;
  conditionalAbort = new AbortController();
  try {
    await navigator.credentials.get({
      mediation: 'conditional',
      signal: conditionalAbort.signal,
      publicKey: { challenge: crypto.getRandomValues(new Uint8Array(32)) }
    });
  } catch (err) {
    if (err.name === 'AbortError') console.log('Autofill-Anfrage abgebrochen');
  }
};

document.querySelector('#passkey-button').addEventListener('click', () => {
  // Es darf nur eine laufende WebAuthn-Anfrage geben
  conditionalAbort?.abort();
  // ... danach modalen navigator.credentials.get() starten
});

initAutofill();

Autofill-Anfrage abgebrochen

// Wichtig · Fallstricke

Kompatibilität: Unterstützt in Chrome/Edge ab 108, Safari ab 16 und Firefox ab 119. Ältere Browser kennen die Methode nicht. Deshalb vorher mit typeof … === 'function' oder optionaler Verkettung (?.()) prüfen, sonst gibt es einen TypeError.
Das Eingabefeld braucht autocomplete="username webauthn" (webauthn als letztes Token). Ohne dieses Attribut erscheint kein Passkey im Autofill, obwohl die Methode true liefert.
Es darf immer nur eine WebAuthn-Anfrage gleichzeitig laufen. Die bedingte Anfrage vor einem modalen Aufruf per AbortController abbrechen.
Ein true bedeutet nur, dass der Browser die Funktion unterstützt. Es sagt nichts darüber, ob der Nutzer für diese Seite tatsächlich einen Passkey gespeichert hat.
Die Methode ist nur in sicheren Kontexten (HTTPS) verfügbar. Die Challenge muss immer auf dem Server erzeugt und dort geprüft werden, nie nur im Client.
Neuere Browser bieten zusätzlich PublicKeyCredential.getClientCapabilities(), das mehrere Fähigkeiten auf einmal abfragt (u. a. conditionalGet).

Siehe auch

Credential.isConditionalMediationAvailable() PublicKeyCredential.getClientCapabilities() PublicKeyCredential.parseCreationOptionsFromJSON() PublicKeyCredential.signalCurrentUserDetails() PublicKeyCredential.signalUnknownCredential()