Mode UI immédiat pour les connexions

Eiji Kitamura
José Luis Zapata

Publié le : 12 mai 2026

Le mode UI immédiat pour les connexions est une fonctionnalité Web conçue pour simplifier les flux de connexion. Cette fonctionnalité vous permet de proposer de manière proactive des clés d'accès et des mots de passe gérés directement à vos utilisateurs lorsqu'ils arrivent au moment de la connexion, par exemple en cliquant sur un bouton Se connecter ou Payer.

Extrait

Le mode UI immédiat fournit un mode qui échoue rapidement si aucun identifiant n'est disponible localement. Ce comportement reflète les API preferImmediatelyAvailableCredentials trouvées sur les plates-formes mobiles telles qu'Android et iOS. Lorsque des identifiants existent, le navigateur présente immédiatement une boîte de dialogue de connexion à l'utilisateur. Sinon, elle rejette la promesse en mode silencieux, ce qui vous permet de proposer d'autres méthodes de connexion (par exemple, un formulaire de connexion) sans perturber l'expérience utilisateur.

Depuis mai 2026, Chrome est le seul navigateur compatible avec le mode UI immédiat.

Vérifier les conditions préalables

Pour utiliser le mode UI immédiat, l'utilisateur doit déjà disposer d'identifiants éligibles disponibles localement sur son appareil. Dans Chrome, ces identifiants incluent :

  • Les clés d'accès enregistrées dans un fournisseur de clés d'accès tel que le Gestionnaire de mots de passe de Google, Windows Hello ou le Trousseau iCloud.
  • Mots de passe enregistrés dans le Gestionnaire de mots de passe de Google.

Si aucun identifiant local n'existe, l'API rejette la requête sans afficher la boîte de dialogue de connexion immédiate.

Détecter la compatibilité des fonctionnalités

Avant d'appeler le mode UI immédiat, vérifiez si le navigateur est compatible avec la fonctionnalité immediateGet à l'aide de la méthode PublicKeyCredential.getClientCapabilities(). Si ce n'est pas le cas, revenez aux méthodes de connexion existantes, telles que les formulaires d'adresse e-mail et de mot de passe, la validation du numéro de téléphone ou les connexions via les réseaux sociaux.

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

Pour une compatibilité plus large avec les navigateurs, utilisez le polyfill disponible dans le dépôt GitHub WebAuthn Polyfills.

Demander des identifiants

Pour déclencher le flux de connexion immédiate, appelez navigator.credentials.get() avec le champ uiMode défini sur 'immediate'.

En incluant password: true dans votre requête, les utilisateurs peuvent bénéficier de cette expérience si le navigateur prend en charge les identifiants de mot de passe.

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

Vous devez gérer NotAllowedError dans un bloc catch pour fournir une expérience de connexion de secours.

Gérer les flux de connexion

Vous pouvez implémenter le mode UI immédiat pour deux scénarios principaux. Pour obtenir d'autres conseils sur l'UX et les antipatrons à éviter, consultez Modèles UX pour le mode UI immédiat.

Se connecter avec un bouton

Fournissez un bouton de connexion dédié qui offre une expérience fluide sans invites inattendues.

  1. L'utilisateur clique sur un bouton Se connecter.
  2. Votre site appelle navigator.credentials.get() avec uiMode: "immediate".
  3. Le navigateur recherche les identifiants locaux.
  4. Si le navigateur trouve des identifiants, il affiche immédiatement une boîte de dialogue de connexion pour que l'utilisateur puisse sélectionner un compte.
  5. Si le navigateur ne trouve aucun identifiant ou si l'utilisateur ferme la boîte de dialogue de connexion immédiate, il génère une erreur NotAllowedError.
  6. Si une erreur NotAllowedError est générée, votre site passe à sa page de connexion standard.

Se connecter avant de passer à la caisse

Proposez des identifiants de manière proactive avant qu'un utilisateur effectue une action qui bénéficierait d'une authentification, par exemple en commençant un processus de paiement sur une boutique en ligne.

Dans l'e-commerce, les utilisateurs invités choisissent souvent de se connecter à un compte existant ou de finaliser leur commande en tant qu'invités. L'affichage immédiat d'une boîte de dialogue de connexion peut simplifier le processus de paiement pour les clients connus.

  1. L'utilisateur lance une action, par exemple en cliquant sur un bouton Payer lors d'un parcours d'achat.
  2. Votre site appelle navigator.credentials.get() avec uiMode: "immediate".
  3. Si des identifiants existent, l'utilisateur en sélectionne un pour se connecter.
  4. Si les identifiants n'existent pas, le navigateur génère une erreur et n'affiche aucune boîte de dialogue de connexion immédiate. L'expérience utilisateur reste inchangée. Vous pouvez rediriger l'utilisateur vers l'écran de paiement existant, qui peut proposer d'autres options de connexion ou un formulaire de paiement en tant qu'invité.

Examiner les mesures de confidentialité et de sécurité

Le navigateur met en œuvre des mesures essentielles pour protéger la confidentialité des utilisateurs :

  • Exigence de geste de l'utilisateur : vous devez lancer l'appel d'API avec un geste de l'utilisateur, comme un clic, pour éviter les sondages silencieux. L'appel ne consomme pas l'activation.
  • Restrictions du mode navigation privée : les requêtes dans les sessions privées ou en mode navigation privée génèrent toujours une erreur NotAllowedError.
  • Aucune liste d'autorisation : les requêtes avec une liste allowCredentials non vide génèrent une erreur NotAllowedError pour empêcher le suivi multisession.
  • Aucune annulation programmatique : vous ne pouvez pas utiliser le paramètre signal pour fermer par programmation la boîte de dialogue de connexion immédiate.