Onmiddellijke UI-modus voor inloggegevens

Eiji Kitamura
José Luis Zapata

Gepubliceerd: 12 mei 2026

De UI-modus voor onmiddellijke weergave voor inlogpogingen is een webfunctie die is ontworpen om inlogtrajecten te stroomlijnen. Met deze functie kun je proactief toegangssleutels en beheerde wachtwoorden aanbieden aan je gebruikers als ze een inlogmoment bereiken, bijvoorbeeld als ze op de knop Inloggen of Afrekenen klikken.

Samenvatting

De modus voor de onmiddellijke UI biedt een modus die snel mislukt als er geen inloggegevens lokaal beschikbaar zijn. Dit gedrag komt overeen met preferImmediatelyAvailableCredentialsAPI's die je vindt op mobiele platforms zoals Android en iOS. Als er inloggegevens zijn, toont de browser de gebruiker meteen een inlogdialoogvenster. Anders wordt de belofte op de achtergrond geweigerd, zodat je alternatieve inlogmethoden kunt bieden, bijvoorbeeld een inlogformulier, zonder de gebruikerservaring te verstoren.

Vanaf mei 2026 is Chrome de enige browser die de onmiddellijke UI-modus ondersteunt.

Vereisten controleren

Als de gebruiker de modus voor onmiddellijke UI wil gebruiken, moet die al in aanmerking komende inloggegevens lokaal op het apparaat hebben. In Chrome zijn dit onder andere de volgende inloggegevens:

  • Toegangssleutels die zijn opgeslagen bij een toegangssleutelprovider, zoals Google Wachtwoordmanager, Windows Hello of iCloud Sleutelhanger.
  • Wachtwoorden die zijn opgeslagen in Google Wachtwoordmanager.

Als er geen lokale inloggegevens bestaan, wijst de API het verzoek af zonder het directe inlogvenster te tonen.

Functieondersteuning detecteren

Voordat je de modus voor onmiddellijke UI aanroept, verifieer je of de browser de mogelijkheid immediateGet ondersteunt met de methode PublicKeyCredential.getClientCapabilities(). Als het niet wordt ondersteund, val je terug op bestaande inlogmethoden, zoals e-mail- en wachtwoordformulieren, verificatie van telefoonnummers of inloggen via social media.

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);
  }
}

Gebruik voor bredere browserondersteuning de polyfill die beschikbaar is in de GitHub-repository WebAuthn Polyfills.

Inloggegevens aanvragen

Als je het directe inlogproces wilt activeren, roep je navigator.credentials.get() aan met het veld uiMode ingesteld op 'immediate'.

Als u password: true opneemt in uw verzoek, kunnen gebruikers deze functie gebruiken als de browser inloggegevens ondersteunt.

// 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();
    }
  }
});

Je moet de NotAllowedError in een catch-blok afhandelen om een alternatieve inlogmethode te bieden.

Inlogprocessen verwerken

U kunt de modus voor onmiddellijke UI implementeren voor 2 primaire scenario's. Ga naar UX-patronen voor de modus Onmiddellijke UI voor meer UX-richtlijnen en antipatronen die je moet vermijden.

Inloggen met een knop

Zorg voor een speciale inlogknop die een duidelijke functionaliteit biedt zonder onverwachte prompts.

  1. De gebruiker klikt op de knop Inloggen.
  2. Je site roept navigator.credentials.get() aan met uiMode: "immediate".
  3. De browser checkt op lokale inloggegevens.
  4. Als de browser inloggegevens vindt, wordt er meteen een inlogdialoogvenster getoond waarin de gebruiker een account kan selecteren.
  5. Als de browser geen inloggegevens vindt of als de gebruiker het onmiddellijke inlogdialoogvenster sluit, wordt er een NotAllowedError gegenereerd.
  6. Als er een NotAllowedError wordt gegenereerd, gaat uw site verder met de standaard inlogpagina.

Inloggen vóór het afrekenen

Bied proactief inloggegevens aan voordat een gebruiker een actie uitvoert waarvoor verificatie handig is, zoals een betaalproces starten in een online winkel.

In e-commerce kunnen gastgebruikers vaak kiezen of ze willen inloggen op een bestaand account of willen afrekenen als gast. Als u een onmiddellijk inlogdialoogvenster biedt, kunt u het betaalproces stroomlijnen voor terugkerende klanten.

  1. De gebruiker start een actie, zoals op de knop Betalen klikken tijdens een winkelproces.
  2. Je site roept navigator.credentials.get() aan met uiMode: "immediate".
  3. Als er inloggegevens zijn, selecteert de gebruiker er een om in te loggen.
  4. Als er geen inloggegevens bestaan, geeft de browser een foutmelding en wordt er geen direct inlogvenster getoond. De gebruikerservaring blijft ongewijzigd en je kunt de gebruiker naar het bestaande betaalscherm leiden, dat misschien andere inlogopties of een formulier voor betalen zonder account biedt.

Privacy- en beveiligingsmaatregelen controleren

De browser implementeert belangrijke maatregelen om de privacy van gebruikers te beschermen:

  • Vereiste voor gebruikersgebaar: Je moet de API-aanroep starten met een gebruikersgebaar, zoals een klik, om stille tests te voorkomen. Het gesprek verbruikt de activering niet.
  • Beperkingen voor de incognitomodus: Verzoeken in incognito- of privésessies geven altijd een NotAllowedError.
  • Geen toelatingslijsten: Verzoeken met een niet-lege allowCredentials-lijst genereren een NotAllowedError om tracking tussen sessies te voorkomen.
  • Geen programmatic annulering: Je kunt de parameter signal niet gebruiken om het dialoogvenster voor onmiddellijk inloggen programmatic te sluiten.