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 à un moment de connexion, par exemple lorsqu'ils cliquent 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 disponibles sur les plates-formes mobiles telles qu'Android et iOS. Lorsque des identifiants existent, le navigateur présente une boîte de dialogue de connexion immédiate à l'utilisateur. Sinon, il rejette la promesse en mode silencieux, ce qui vous permet de fournir 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 éléments suivants :
- Clés d'accès enregistrées dans un fournisseur de clés d'accès tel que Gestionnaire de mots de passe de Google, Windows Hello ou 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 pris en charge, revenez aux méthodes de connexion existantes, telles que les formulaires d'adresse e-mail et de mot de passe, la vérification du numéro de téléphone ou les connexions sociales.
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 WebAuthn Polyfills dépôt GitHub.
Demander des identifiants
Pour déclencher le flux de connexion immédiate, appelez navigator.credentials.get() avec le
uiMode champ 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 est compatible avec 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 le 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.
Se connecter avec un bouton
Fournissez un bouton de connexion dédié qui offre une expérience claire sans invites inattendues.
- L'utilisateur clique sur un bouton Se connecter.
- Votre site appelle
navigator.credentials.get()avecuiMode: "immediate". - Le navigateur recherche les identifiants locaux.
- Si le navigateur trouve des identifiants, il présente une boîte de dialogue de connexion immédiate permettant à l'utilisateur de sélectionner un compte.
- 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 un
NotAllowedError. - Si un
NotAllowedErrorest généré, votre site passe à sa page de connexion standard.
Se connecter avant de payer
Proposez des identifiants de manière proactive avant qu'un utilisateur effectue une action qui bénéficierait de l'authentification, par exemple lorsqu'il commence un processus de paiement sur une boutique en ligne.
Dans le commerce électronique, les utilisateurs invités choisissent souvent de se connecter à un compte existant ou de payer en tant qu'invité. Fournir une boîte de dialogue de connexion immédiate peut simplifier le processus de paiement pour les clients connus.
- L'utilisateur lance une action, par exemple en cliquant sur un bouton Payer lors d'un flux d'achat.
- Votre site appelle
navigator.credentials.get()avecuiMode: "immediate". - Si des identifiants existent, l'utilisateur en sélectionne un pour se connecter.
- Si aucun identifiant n'existe, 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, et vous pouvez rediriger l'utilisateur vers l'écran de paiement existant, qui peut proposer d'autres options de connexion ou un formulaire de paiement sans connexion.
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, tel qu'un clic, pour éviter toute analyse silencieuse. L'appel ne consomme pas l'activation.
- Restrictions du mode navigation privée : les requêtes dans les sessions de navigation privée ou incognito
génèrent toujours un
NotAllowedError. - Aucune liste d'autorisation : les requêtes avec une liste
allowCredentialsnon vide génèrent unNotAllowedErrorpour éviter le suivi inter-sessions. - Aucune annulation programmatique : vous ne pouvez pas utiliser le paramètre
signalpour fermer la boîte de dialogue de connexion immédiate de manière programmatique.