Veröffentlicht: 12. Mai 2026
Der Sofort-UI-Modus für Anmeldungen ist eine Webfunktion, die Anmeldevorgänge vereinfachen soll. 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 im Browser sofort ein Anmeldedialogfeld angezeigt. Andernfalls wird das Promise im Hintergrund abgelehnt. So können Sie alternative Anmeldemethoden wie ein Anmeldeformular anbieten, ohne die Nutzerfreundlichkeit zu beeinträchtigen.
Seit Mai 2026 ist Chrome der einzige Browser, der den sofortigen UI-Modus unterstützt.
Voraussetzungen überprüfen
Um den sofortigen UI-Modus zu verwenden, muss der Nutzer bereits berechtigte Anmeldedaten lokal auf seinem Gerät haben. In Chrome umfassen diese Anmeldedaten:
- Passkeys, die in einem Passkey-Anbieter wie dem Google Passwortmanager, Windows Hello oder dem iCloud-Schlüsselbund gespeichert sind.
- Im Google Passwortmanager gespeicherte Passwörter
Wenn keine lokalen Anmeldedaten vorhanden sind, lehnt die API die Anfrage ab, ohne das Dialogfeld für die sofortige Anmeldung anzuzeigen.
Unterstützung von Funktionen erkennen
Bevor Sie den sofortigen UI-Modus aufrufen, prüfen Sie mit der Methode PublicKeyCredential.getClientCapabilities(), ob der Browser die Funktion immediateGet unterstützt. Wenn sie nicht unterstützt wird, greifen Sie auf vorhandene Anmeldemethoden zurück, z. B. E‑Mail- und Passwortformulare, Bestätigung der Telefonnummer oder soziale Logins.
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);
}
}
Wenn Sie eine breitere Browserunterstützung benötigen, verwenden Sie das Polyfill, das im GitHub-Repository „WebAuthn Polyfills“ verfügbar ist.
Anmeldedaten anfordern
Um den sofortigen Anmeldevorgang auszulösen, rufen Sie navigator.credentials.get() auf und setzen Sie das Feld uiMode auf 'immediate'.
Wenn Sie password: true in Ihre Anfrage einbeziehen, können Nutzer von dieser Funktion profitieren, sofern der Browser Anmeldedaten für Passwörter 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 NotAllowedError in einem catch-Block verarbeiten, um eine alternative Anmeldefunktion bereitzustellen.
Anmeldeabläufe verarbeiten
Sie können den sofortigen UI-Modus für zwei primäre Szenarien implementieren. Weitere UX-Anleitungen und Antipatterns, die Sie vermeiden sollten, finden Sie unter UX-Muster für den Immediate UI-Modus.
Mit einem Button anmelden
Stellen Sie eine spezielle Anmeldeschaltfläche bereit, die eine übersichtliche Nutzung ohne unerwartete Aufforderungen ermöglicht.
- Der Nutzer klickt auf einen Anmelden-Button.
- Ihre Website ruft
navigator.credentials.get()mituiMode: "immediate"auf. - Der Browser sucht nach lokalen Anmeldedaten.
- Wenn der Browser Anmeldedaten findet, wird sofort ein Anmeldedialogfeld angezeigt, in dem der Nutzer ein Konto auswählen kann.
- Wenn der Browser keine Anmeldedaten findet oder der Nutzer das sofortige Anmeldedialogfeld schließt, wird eine
NotAllowedErrorausgelöst. - Wenn eine
NotAllowedErrorausgelöst wird, wird auf Ihrer Website die standardmäßige Anmeldeseite angezeigt.
Vor dem Bezahlen anmelden
Bieten Sie Anmeldedaten proaktiv an, bevor ein Nutzer eine Aktion ausführt, die von der Authentifizierung profitieren würde, z. B. wenn er den Bezahlvorgang in einem Onlineshop startet.
Im E‑Commerce haben Gastnutzer oft die Wahl, sich in einem bestehenden Konto anzumelden oder als Gast zu bezahlen. Wenn Sie ein sofortiges Anmeldedialogfeld bereitstellen, können Sie den Bezahlvorgang für wiederkehrende Kunden optimieren.
- Der Nutzer initiiert eine Aktion, z. B. indem er während eines Einkaufs auf die Schaltfläche Zur Kasse klickt.
- Ihre Website ruft
navigator.credentials.get()mituiMode: "immediate"auf. - Wenn Anmeldedaten vorhanden sind, wählt der Nutzer eine aus, um die Anmeldung abzuschließen.
- Wenn keine Anmeldedaten vorhanden sind, gibt der Browser einen Fehler aus und zeigt kein sofortiges Anmeldedialogfeld an. Die Nutzerfreundlichkeit bleibt unverändert. Sie können den Nutzer zum vorhandenen Zahlungsbildschirm weiterleiten, auf dem möglicherweise andere Anmeldeoptionen oder ein Gast-Zahlungsformular 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 Silent Probing zu verhindern. Der Anruf verbraucht die Aktivierung nicht.
- Einschränkungen für den Inkognitomodus: Bei Anfragen in Inkognito- oder privaten Sitzungen wird immer ein
NotAllowedErrorzurückgegeben. - Keine Zulassungslisten: Bei Anfragen mit einer nicht leeren
allowCredentials-Liste wird einNotAllowedErrorausgelöst, um sitzungsübergreifendes Tracking zu verhindern. - Keine programmatische Kündigung: Sie können den Parameter
signalnicht verwenden, um das Dialogfeld für die sofortige Anmeldung programmatisch zu schließen.