Directe gebruikersinterface-modus voor aanmeldingen

Eiji Kitamura

José Luis Zapata

Gepubliceerd: 12 mei 2026

De 'Immediate UI mode' voor aanmeldingen is een webfunctionaliteit die is ontworpen om aanmeldingsprocessen te stroomlijnen. Met deze functie kunt u proactief toegangscodes en beheerde wachtwoorden rechtstreeks aan uw gebruikers aanbieden wanneer ze zich moeten aanmelden, bijvoorbeeld door op een 'Aanmelden' of 'Afrekenen' -knop te klikken.

Abstract

De modus 'Immediate UI' biedt een modus die direct een foutmelding geeft als er geen inloggegevens lokaal beschikbaar zijn. Dit gedrag is vergelijkbaar met preferImmediatelyAvailableCredentials API's die te vinden zijn op mobiele platforms zoals Android en iOS. Wanneer er inloggegevens aanwezig zijn, toont de browser direct een inlogdialoogvenster aan de gebruiker. Anders wordt de belofte stilzwijgend afgewezen, waardoor u alternatieve inlogmethoden kunt aanbieden, bijvoorbeeld een inlogformulier, zonder de gebruikerservaring te verstoren.

Vanaf mei 2026 is Chrome de enige browser die de directe gebruikersinterfacemodus ondersteunt.

Controleer de vereisten

Om de directe gebruikersinterface te gebruiken, moet de gebruiker al over de juiste inloggegevens beschikken die lokaal op het apparaat beschikbaar zijn. In Chrome zijn dit onder andere de volgende inloggegevens:

• Wachtwoorden die zijn opgeslagen bij een wachtwoordprovider zoals Google Password Manager , Windows Hello of iCloud Keychain .
• Wachtwoorden opgeslagen in Google Password Manager.

Als er geen lokale inloggegevens beschikbaar zijn, wijst de API het verzoek af zonder het inlogvenster weer te geven.

Detecteer functieondersteuning

Voordat u de directe UI-modus oproept, controleert u of de browser de immediateGet functionaliteit ondersteunt met behulp van de ` PublicKeyCredential.getClientCapabilities() -methode. Als dit niet het geval is, gebruikt u bestaande aanmeldmethoden, zoals e-mail- en wachtwoordformulieren, telefoonnummerverificatie of inloggen via sociale 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);
  }
}

Voor bredere browserondersteuning kunt u de polyfill gebruiken die beschikbaar is in de WebAuthn Polyfills GitHub-repository .

Inloggegevens aanvragen

Om de directe inlogprocedure te starten, roep je navigator.credentials.get() aan met het veld uiMode ingesteld op 'immediate' .

Door password: true in je verzoek op te nemen, kunnen gebruikers van deze functionaliteit profiteren als de browser wachtwoordreferenties 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 afhandelen in een catch blok om een ​​alternatieve aanmeldprocedure te bieden.

Beheer aanmeldingsprocessen

Je kunt de directe UI-modus implementeren voor twee belangrijke scenario's.

Aanmelden met een knop

Zorg voor een speciale aanmeldknop die een prettige gebruikerservaring biedt zonder onverwachte meldingen.

1. De gebruiker klikt op een 'Inloggen'- knop.
2. Uw site roept navigator.credentials.get() aan met uiMode: "immediate" .
3. De browser controleert op lokale inloggegevens.
4. Als de browser inloggegevens vindt, verschijnt er direct een inlogvenster waarin de gebruiker een account kan selecteren.
5. Als de browser geen inloggegevens vindt of als de gebruiker het inlogvenster sluit, wordt een NotAllowedError gegenereerd.
6. Als er een NotAllowedError wordt gegenereerd, gaat uw site verder met de standaard aanmeldpagina.

Meld u aan voordat u afrekent.

Bied inloggegevens proactief aan voordat een gebruiker een actie uitvoert waarbij authenticatie nuttig is, zoals het starten van een afrekenproces in een webwinkel.

In de e-commerce kiezen gastgebruikers vaak tussen inloggen op een bestaand account of afrekenen als gast. Een direct inlogvenster kan het afrekenproces voor terugkerende klanten stroomlijnen.

1. De gebruiker initieert een actie, zoals het klikken op een 'Afrekenen'- knop tijdens het winkelproces.
2. Uw site roept navigator.credentials.get() aan met uiMode: "immediate" .
3. Als er inloggegevens beschikbaar zijn, selecteert de gebruiker er één om de aanmelding te voltooien.
4. Als er geen inloggegevens aanwezig zijn, geeft de browser een foutmelding en wordt er geen inlogvenster weergegeven. De gebruikerservaring blijft ongewijzigd en u kunt de gebruiker doorverwijzen naar het bestaande afrekenscherm, waar mogelijk andere inlogopties of een gastformulier beschikbaar zijn.

Evalueer de privacy- en beveiligingsmaatregelen.

De browser implementeert essentiële maatregelen om de privacy van gebruikers te beschermen:

• Vereiste gebruikersactie : U moet de API-aanroep initiëren met een gebruikersactie, zoals een klik, om stille controles te voorkomen. De aanroep verbruikt de activering niet.
• Beperkingen in de incognitomodus : Verzoeken in incognito- of privésessies geven altijd een NotAllowedError .
• Geen whitelists : Verzoeken met een niet-lege allowCredentials -lijst genereren een NotAllowedError om het volgen van gebruikers tussen sessies te voorkomen.
• Geen programmatische annulering : U kunt de parameter signal niet gebruiken om het directe inlogdialoogvenster programmatisch te sluiten.