Sofortiger UI-Modus für Log-ins

Eiji Kitamura

José Luis Zapata

Veröffentlicht am 12. Mai 2026

Der Immediate UI-Modus für Anmeldungen ist eine Webfunktion, mit der Anmeldeabläufe optimiert werden können. Mit dieser Funktion können Sie Ihren Nutzern proaktiv Passkeys und verwaltete Passwörter anbieten, wenn sie sich anmelden möchten, z. B. wenn sie auf die Schaltfläche Anmelden oder Zur Kasse klicken.

Zusammenfassung

Der Immediate UI-Modus bietet einen Modus, der sofort fehlschlägt, wenn keine Anmeldedaten lokal verfügbar sind. Dieses Verhalten entspricht den preferImmediatelyAvailableCredentials-APIs auf mobilen Plattformen wie Android und iOS. Wenn Anmeldedaten vorhanden sind, wird dem Nutzer ein sofortiges Anmeldedialogfeld angezeigt. Andernfalls wird das Promise im Hintergrund abgelehnt, sodass Sie alternative Anmeldemethoden anbieten können, z. B. ein Anmeldeformular, ohne die Nutzerfreundlichkeit zu beeinträchtigen.

Ab Mai 2026 ist Chrome der einzige Browser, der den Immediate UI-Modus unterstützt.

Voraussetzungen überprüfen

Um den Immediate UI-Modus zu verwenden, müssen dem Nutzer bereits entsprechende Anmeldedaten lokal auf seinem Gerät zur Verfügung stehen. In Chrome sind das:

• Passkeys, die in einem Passkey-Anbieter wie dem Google Passwortmanager, Windows Hello oder dem iCloud-Schlüsselbund gespeichert sind.
• Passwörter, die im Google Passwortmanager gespeichert sind.

Wenn keine lokalen Anmeldedaten vorhanden sind, lehnt die API die Anfrage ab, ohne das sofortige Anmeldedialogfeld anzuzeigen.

Unterstützung für Funktionen erkennen

Bevor Sie den Immediate UI-Modus aufrufen, prüfen Sie mit der Methode PublicKeyCredential.getClientCapabilities(), ob der Browser die Funktion immediateGet unterstützt. Wenn dies nicht unterstützt wird, greifen Sie auf vorhandene Anmeldemethoden zurück, z. B. E-Mail- und Passwortformulare, Bestätigung der Telefonnummer oder soziale Anmeldungen.

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

Für eine breitere Browserunterstützung können Sie das Polyfill verwenden, das im WebAuthn Polyfills GitHub-Repository verfügbar ist.

Anmeldedaten anfordern

Rufen Sie navigator.credentials.get() auf und legen Sie für das uiMode Feld den Wert 'immediate' fest, um den sofortigen Anmeldeablauf auszulösen.

Wenn Sie password: true in Ihre Anfrage einfügen, können Nutzer diese Funktion nutzen, wenn der Browser Passwort Anmeldedaten unterstützt.

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

Sie müssen den NotAllowedError in einem catch-Block verarbeiten, um eine alternative Anmeldemöglichkeit anzubieten.

Anmeldeabläufe verarbeiten

Sie können den Immediate UI-Modus für zwei Hauptszenarien implementieren.

Anmeldung mit einer Schaltfläche

Bieten Sie eine spezielle Anmeldeschaltfläche an, die eine übersichtliche Nutzung ohne unerwartete Aufforderungen ermöglicht.

1. Der Nutzer klickt auf die Schaltfläche Anmelden.
2. Ihre Website ruft navigator.credentials.get() mit uiMode: "immediate" auf.
3. Der Browser prüft, ob lokale Anmeldedaten vorhanden sind.
4. Wenn der Browser Anmeldedaten findet, wird dem Nutzer ein sofortiges Anmeldedialogfeld angezeigt, in dem er ein Konto auswählen kann.
5. Wenn der Browser keine Anmeldedaten findet oder der Nutzer das sofortige Anmeldedialogfeld schließt, wird ein NotAllowedError ausgelöst.
6. Wenn ein NotAllowedError ausgelöst wird, wird auf Ihrer Website die Standardanmeldeseite aufgerufen.

Vor dem Bezahlen anmelden

Bieten Sie Anmeldedaten proaktiv an, bevor ein Nutzer eine Aktion ausführt, die von der Authentifizierung profitiert, z. B. wenn er den Bezahlvorgang in einem Onlineshop startet.

Im E-Commerce können Gastnutzer oft zwischen der Anmeldung in einem bestehenden Konto und dem Bezahlen als Gast wählen. Ein sofortiges Anmeldedialogfeld kann den Bezahlvorgang für wiederkehrende Kunden optimieren.

1. Der Nutzer initiiert eine Aktion, z. B. indem er während eines Einkaufs auf die Schaltfläche Zur Kasse klickt.
2. Ihre Website ruft navigator.credentials.get() mit uiMode: "immediate" auf.
3. Wenn Anmeldedaten vorhanden sind, wählt der Nutzer eine aus, um die Anmeldung abzuschließen.
4. Wenn keine Anmeldedaten vorhanden sind, löst der Browser einen Fehler aus und zeigt kein sofortiges Anmeldedialogfeld an. Die Nutzerfreundlichkeit bleibt unverändert und Sie können den Nutzer zum vorhandenen Bildschirm für den Bezahlvorgang weiterleiten, auf dem möglicherweise andere Anmeldeoptionen oder ein Formular für den Bezahlvorgang als Gast verfügbar sind.

Datenschutz- und Sicherheitsmaßnahmen überprüfen

Der Browser implementiert wichtige Maßnahmen zum Schutz der Privatsphäre der Nutzer:

• Nutzergeste erforderlich: Sie müssen den API-Aufruf mit einer Nutzergeste wie einem Klick initiieren, um eine stille Prüfung zu verhindern. Der Aufruf verbraucht die Aktivierung nicht.
• Einschränkungen im Inkognitomodus: Bei Anfragen in Inkognito- oder privaten Sitzungen wird immer ein NotAllowedError ausgelöst.
• Keine Zulassungslisten: Bei Anfragen mit einer nicht leeren allowCredentials Liste wird ein NotAllowedError ausgelöst, um das sitzungsübergreifende Tracking zu verhindern.
• Keine programmatische Abbrechen: Sie können den signal Parameter nicht verwenden, um das sofortige Anmeldedialogfeld programmatisch zu schließen.