Capacités du client WebAuthn

WebAuthn est la norme moderne qui sous-tend les passkeys. Au lieu de s'appuyer sur les mots de passe traditionnels, elle exploite la cryptographie à clé publique, permettant aux utilisateurs de s'authentifier avec des passkeys, qui peuvent inclure des données biométriques (comme les empreintes digitales ou la reconnaissance faciale) ou des clés de sécurité physiques. Ce changement améliore non seulement la sécurité, mais aussi l'expérience utilisateur en éliminant le besoin de gérer des mots de passe.

La norme WebAuthn de niveau 3 introduit de nouvelles capacités client (qui peuvent être récupérées via l'API du navigateur getClientCapabilities()), visant à offrir aux développeurs et aux plateformes plus de contrôle et de flexibilité lors de l'implémentation des passkeys. Ces mises à jour apportent des améliorations qui simplifient le processus d'intégration des passkeys sur les appareils, les navigateurs et les plateformes, garantissant un parcours utilisateur plus fluide et cohérent.

Dans cet article de blog, nous répondrons aux questions suivantes :

1. Que sont les capacités client WebAuthn ?
2. Quelles sont les capacités client WebAuthn existantes ?
3. Comment les capacités client WebAuthn améliorent-elles les implémentations de passkeys ?
4. Pourquoi les capacités client WebAuthn sont-elles importantes pour les développeurs et les chefs de produit ?

D'ici la fin, vous comprendrez comment ces fonctionnalités peuvent vous aider à créer des flux d'authentification fluides et sécurisés qui correspondent aux attentes des utilisateurs modernes.

Les capacités client WebAuthn sont un ensemble de fonctionnalités qui permettent aux navigateurs et aux plateformes de communiquer les types de fonctionnalités WebAuthn qu'ils prennent en charge. En termes simples, elles agissent comme une « liste de contrôle des fonctionnalités » qui informe les sites web des méthodes et des paramètres d'authentification disponibles sur l'appareil d'un utilisateur. Cela permet aux développeurs d'adapter les flux d'authentification en fonction des capacités du client, garantissant une expérience utilisateur plus fluide et plus sécurisée.

Par exemple, si un navigateur signale qu'il prend en charge l'authentification biométrique (comme Touch ID), les développeurs peuvent concevoir leurs flux de connexion pour offrir aux utilisateurs la possibilité de se connecter avec une empreinte digitale. Inversement, si le navigateur ne prend pas en charge certaines fonctionnalités, les développeurs peuvent proposer des options de secours, comme un mot de passe ou un OTP par SMS.

La norme WebAuthn de niveau 3 introduit plusieurs nouvelles capacités client qui rendent les implémentations de passkeys plus polyvalentes et conviviales. Le premier support pour l'appel d'API getClientCapabilities() a été introduit dans Safari 17.4.

Pour détecter le support dans le navigateur, le snippet suivant peut être utile :

// Check if PublicKeyCredential is supported in the current browser
if (typeof PublicKeyCredential === "undefined") {
    console.log("PublicKeyCredential is not supported in this browser.");
}
 
// Check if getClientCapabilities method exists on PublicKeyCredential
if (typeof PublicKeyCredential.getClientCapabilities === "function") {
    try {
        let capabilities = await PublicKeyCredential.getClientCapabilities();
        console.log(capabilities);
    } catch (error) {
        console.error("Error getting client capabilities:", error);
    }
} else {
    console.log("getClientCapabilities is not supported in this browser");
}

getClientCapabilities() permet aux sites web et aux applications d'interroger le client (par exemple, le navigateur ou l'appareil) pour déterminer quelles fonctionnalités WebAuthn il prend en charge. En comprenant les capacités du client, les développeurs peuvent optimiser les flux d'authentification pour tirer parti des fonctionnalités disponibles, comme l'authentification biométrique, et fournir des méthodes alternatives si certaines capacités sont absentes.

Subscribe to our Passkeys Substack for the latest news.

Subscribe

Voici un aperçu plus détaillé des capacités client WebAuthn et de leur impact sur l'intégration des passkeys :

conditionalCreate permet la création automatique de passkeys en fonction de conditions spécifiques. Une application peut utiliser cette capacité pour créer automatiquement un passkey lors du remplissage automatique de mot de passe si le gestionnaire de mots de passe dispose du support correspondant. Cette fonctionnalité aide à stimuler l'adoption des passkeys et leur utilisation ultérieure en faisant passer automatiquement les utilisateurs des mots de passe aux passkeys.

Similaire à conditionalCreate, conditionalGet déclenche automatiquement les connexions par passkey. C'est utile dans les scénarios où la meilleure expérience utilisateur de passkey doit être activée, rendant la connexion non seulement sans mot de passe mais aussi sans nom d'utilisateur (les utilisateurs cliquent simplement sur le passkey sélectionné dans une modale / un menu déroulant et peuvent s'authentifier). En utilisant cette capacité, les développeurs peuvent s'assurer que l'authentification par passkey ne se produit que lorsque c'est approprié, minimisant les invites inutiles et améliorant l'expérience utilisateur.

hybridTransport garantit que les passkeys peuvent être utilisés sur différents appareils, permettant une authentification inter-appareils transparente (via des codes QR et Bluetooth). Par exemple, un utilisateur pourrait utiliser un passkey stocké sur son smartphone pour se connecter à un service sur son ordinateur de bureau. Cette capacité permet aux utilisateurs de s'authentifier en toute sécurité sans avoir à transférer manuellement les passkeys ou à compter sur des méthodes de connexion conventionnelles pour chaque appareil, favorisant une expérience d'authentification unifiée.

Les authentificateurs de plateforme, comme Windows Hello, Face ID ou Touch ID, sont directement intégrés aux appareils et offrent une expérience de passkey plus rapide, plus fluide et plus sécurisée en permettant aux utilisateurs de s'authentifier avec la biométrie ou une autre méthode native de l'appareil (par exemple, un schéma de code PIN).

Become part of our Passkeys Community for updates & support.

Join

userVerifyingPlatformAuthenticator garantit que l'authentification par passkey implique une vérification de l'utilisateur, comme une analyse active des empreintes digitales ou une reconnaissance faciale, fournissant une couche de sécurité supplémentaire.

La capacité relatedOrigins permet une authentification transparente sur différents domaines appartenant à la même organisation (par exemple, amazon.com et amazon.de). Par exemple, si une entreprise gère plusieurs domaines ou a différents sous-domaines, les utilisateurs peuvent se connecter une seule fois et accéder à toutes les propriétés sans se ré-authentifier sur chacune. Cette capacité rationalise l'expérience utilisateur, réduit les frictions et est particulièrement précieuse pour les entreprises dans des environnements internationaux ou avec des plateformes multi-services.

La méthode signalAllAcceptedCredentials(options) fournit la liste complète des ID de credential WebAuthn pour un utilisateur donné. Les parties de confiance (Relying Parties) WebAuthn devraient utiliser cette méthode plutôt que signalUnknownCredential() lorsque l'utilisateur est authentifié, car il n'y a aucun risque de fuite de données confidentielles. Cette méthode offre un aperçu complet des informations d'identification à clé publique d'un utilisateur, y compris les changements récents qui n'ont peut-être pas été mis à jour sur les authentificateurs actuellement connectés.

Examinons un exemple. Un utilisateur (userId: A) possède 2 passkeys avec des ID de credential qui, encodés en Base64URL, donnent X et Y. Ensuite, l'utilisateur supprime le passkey X dans les paramètres de son compte sur le service web (example.com) (la clé publique est donc supprimée). Maintenant, exécutez le snippet suivant :

PublicKeyCredential.signalAllAcceptedCredentials({
    rpId: "example.com",
    userId: "A", // WebAuthn User Handle, Base64URL.
    allAcceptedCredentialIds: ["Y"],
});

Si l'authentificateur est disponible au moment de l'exécution du code ci-dessus, alors l'authentificateur supprime ou masque le passkey X des futures cérémonies d'authentification. Cependant, l'authentificateur peut ne pas être connecté au moment de l'exécution, il est donc recommandé que les parties de confiance exécutent périodiquement ce code, par exemple à chaque connexion.

Les passkeys non présents dans allAcceptedCredentialIds seront supprimés ou masqués, potentiellement de manière irréversible. Il est donc important que les parties de confiance veillent à ce que les ID de credential WebAuthn valides ne soient jamais retirés de la liste. Si un ID de credential valide a été accidentellement supprimé, la partie de confiance doit l'inclure immédiatement dans un autre appel signalAllAcceptedCredentials(options) dès que possible pour « démasquer » le passkey. Si le passkey n'est pas masqué mais supprimé, il n'y a pas grand-chose à faire pour corriger la situation.

Want to experiment with passkey flows? Try our Passkeys Debugger.

Try for Free

La méthode signalCurrentUserDetails(options) signale le nom actuel de l'utilisateur et son nom d'affichage WebAuthn. Lorsque signalCurrentUserDetails(options) est appelée, le client suit un ensemble d'étapes définies pour exécuter cette action.

Voyons un exemple. Un utilisateur avec l'ID utilisateur WebAuthn A met à jour son nom dans les paramètres de son compte sur un site web (example.com). La partie de confiance peut alors exécuter le code suivant :

PublicKeyCredential.signalCurrentUserDetails({
    rpId: "example.com",
    userId: "A", // user ID, Base64URL.
    name: "New user name",
    displayName: "New display name",
});

L'authentificateur mettrait alors à jour les métadonnées du passkey enregistré localement. Le grand avantage est que lors des futures demandes d'interface utilisateur conditionnelle (Conditional UI) / de remplissage automatique de passkey, le menu de sélection / déroulant de l'interface utilisateur conditionnelle affiche le nom et le nom d'affichage WebAuthn mis à jour.

La méthode signalUnknownCredential(options) signale qu'un ID de credential WebAuthn n'est pas reconnu par la partie de confiance WebAuthn, par exemple, si le passkey a été supprimé par l'utilisateur. Contrairement à signalAllAcceptedCredentials(options), cette méthode ne nécessite pas de fournir la liste complète des ID de credential acceptés ni le handle utilisateur WebAuthn, évitant ainsi les fuites potentielles de données confidentielles vers des appelants non authentifiés.

Voyons un exemple. Un utilisateur supprime un passkey avec l'ID de credential X dans les paramètres de son compte sur un site web (example.com) (la clé publique est donc supprimée). Cependant, la clé privée est toujours disponible sur l'appareil de l'utilisateur. Cela signifie que lors des futures demandes de connexion avec interface utilisateur conditionnelle / remplissage automatique de passkey (avec une liste allowCredentials vide), le passkey peut toujours être sélectionné. La tentative de connexion échouera cependant, car la clé publique est déjà supprimée, donc la partie de confiance devrait exécuter :

PublicKeyCredential.signalUnknownCredential({
    rpId: "example.com",
    credentialId: "X", // credential ID the user just tried, Base64URL
});

L'authentificateur supprimerait ou masquerait alors le passkey avec l'ID de credential X des futures cérémonies d'authentification.

Comme la norme WebAuthn de niveau 3 est encore à l'état de projet, l'adoption de ces nouvelles capacités client n'est pas encore totalement répandue. Différents navigateurs ont progressivement implémenté ces fonctionnalités, mais le support varie. Voici un aperçu actualisé de la disponibilité sur les principaux navigateurs mentionnés ci-dessus :

Le rythme d'adoption s'accélérera probablement à mesure que le niveau 3 mûrira et que de plus en plus de navigateurs proposeront ces fonctionnalités. Si vous voulez voir combien d'utilisateurs peuvent profiter de getClientCapabilities() dès maintenant, vous pouvez consulter des données réelles en utilisant le Passkeys Analyzer gratuit. Gardez un œil sur les notes de version des navigateurs et la documentation pertinente pour planifier une compatibilité plus large à mesure qu'elle évolue.

Are your users passkey-ready?

Test Passkey-Readiness

En tant que développeur, vous vous demandez peut-être ce que cette nouvelle détection des capacités client WebAuthn signifie pour vous et comment vous devriez l'utiliser dans votre application. Vous trouverez ci-dessous des recommandations pour les utiliser.

Cependant, sachez que tous les navigateurs ne prennent pas encore en charge l'appel d'API getClientCapabilities() (en novembre 2024). Un polyfill est disponible ici, qui peut être utilisé jusqu'à ce que tous les navigateurs rattrapent leur retard.

Utilisez getClientCapabilities() tôt dans votre code pour détecter les fonctionnalités prises en charge par le client au début du chargement de la page / du flux d'authentification. Cela vous permettra de personnaliser l'expérience de manière dynamique et de fournir les fonctionnalités de passkey qui fonctionnent sur l'appareil / le navigateur, par exemple en poussant à l'authentification de plateforme lorsqu'elle est prise en charge ou en offrant des méthodes alternatives (par exemple, des OTP par SMS ou des clés de sécurité matérielles) si ce n'est pas le cas.

Si vous ajoutez des passkeys à un site web / une application qui utilise actuellement des mots de passe, la fonctionnalité conditionalCreate peut être un véritable moteur pour votre adoption des passkeys. En arrière-plan, lors d'un remplissage automatique de mot de passe avec un gestionnaire d'identifiants approprié (uniquement Mots de passe Apple en octobre 2024), un passkey est automatiquement généré et sera privilégié lors des futurs remplissages automatiques.

Pour avoir non seulement une forte adoption des passkeys, mais aussi une utilisation élevée des connexions par passkey, essayez de vérifier si l'appareil / le navigateur peut utiliser l'interface utilisateur conditionnelle / le remplissage automatique de passkey en vérifiant conditionalGet. De cette façon, vous inciterez les utilisateurs à utiliser le passkey créé pour les connexions, car il est suggéré de manière proactive par le système d'exploitation / le navigateur et nécessite encore moins d'efforts que le remplissage automatique d'un mot de passe.

Utilisez hybridTransport pour permettre l'authentification inter-appareils (via un code QR et Bluetooth), permettant aux utilisateurs de se connecter de manière transparente depuis leur smartphone, même s'ils accèdent à votre service sur un ordinateur de bureau.

Les capacités client WebAuthn représentent une avancée significative pour combler les lacunes actuelles des passkeys. Dans cet article de blog, nous avons abordé des questions clés sur les capacités client WebAuthn :

1. Que sont les capacités client WebAuthn ? Nous avons expliqué comment ces fonctionnalités permettent aux navigateurs et aux plateformes de signaler leur prise en charge de fonctionnalités spécifiques, donnant aux développeurs plus de contrôle sur les flux d'authentification.
2. Quelles sont les capacités client WebAuthn existantes ? Nous avons fourni un aperçu des nouvelles capacités introduites dans la norme de niveau 3, y compris getClientCapabilities, conditionalCreate, hybridTransport, et plus encore.
3. Comment les capacités client WebAuthn améliorent-elles les implémentations de passkeys ? Nous avons discuté de la manière dont ces capacités rationalisent l'intégration, améliorent l'utilisation inter-appareils et renforcent la sécurité.
4. Pourquoi les capacités client WebAuthn sont-elles importantes pour les développeurs ? Ces fonctionnalités aident à créer des expériences d'authentification fluides et sécurisées qui correspondent aux attentes des utilisateurs modernes, rendant l'implémentation plus facile et plus efficace.

Nous vous encourageons à explorer les nouvelles fonctionnalités de WebAuthn de niveau 3 et à rester informé de leur adoption par les navigateurs. Si vous cherchez à implémenter des passkeys et à tirer parti de ces capacités avancées, contactez-nous pour des conseils et un soutien d'experts.