À partir de Chrome 93, les sites Web peuvent valider les numéros de téléphone depuis Chrome pour ordinateur.
WebOTP aide les utilisateurs à saisir un code de validation de numéro de téléphone sur un site Web mobile en un seul geste, sans avoir à changer d'application. Chrome 93 étend cette fonctionnalité aux ordinateurs. Pour en savoir plus, poursuivez votre lecture !
Introduction
Les mots de passe à usage unique (OTP, one-time password) par SMS sont couramment utilisés pour valider un numéro de téléphone, par exemple comme deuxième étape de l'authentification ou pour valider des paiements sur le Web. Cependant, l'ensemble du processus de passage du bureau au mobile, d'ouverture de l'application de SMS, de mémorisation et de saisie du code OTP sur le site Web d'origine sur ordinateur ajoute des frictions. Il est facile de commettre des erreurs de cette manière, et ce système est vulnérable aux attaques par hameçonnage.
L'API WebOTP permet aux sites Web d'obtenir le mot de passe à usage unique à partir d'un message SMS de manière programmatique et de remplir automatiquement le formulaire pour les utilisateurs en un seul geste, sans changer d'application. Le SMS a un format spécifique et est associé à l'origine. Il réduit ainsi le risque que des sites Web de hameçonnage volent également le code OTP.
Un cas d'utilisation qui n'est pas encore pris en charge dans WebOTP est le ciblage des demandes de validation de numéro de téléphone à partir d'un appareil de bureau à distance ou d'un ordinateur portable. L'API ne fonctionne que sur les appareils dotés de fonctionnalités de téléphonie. L'API permet désormais d'écouter les SMS reçus sur d'autres appareils pour aider les utilisateurs à effectuer la validation du numéro de téléphone sur ordinateur dans Chrome 93.
Essayer
Prérequis
- Un ordinateur de bureau ou portable (Windows, Mac, Linux ou ChromeOS)
- Un téléphone Android avec les services Google Play version 20.30.12 ou ultérieure
- Chrome 93 ou version ultérieure, à la fois sur ordinateur de bureau ou portable, et sur appareil mobile. La version bêta de Chrome 93 est disponible depuis fin juillet 2021.
- Vous devez vous connecter au même compte Google dans Chrome pour ordinateur et dans Chrome pour mobile. (par exemple, via https://myaccount.google.com/ ou https://mail.google.com). Vous n'avez pas besoin d'activer la synchronisation.
- Sur votre appareil Android, vous devez vous connecter à Android via "Paramètres->Google".
- Chrome 93 doit être le navigateur par défaut sur l'appareil Android.
- Chrome 93 doit s'exécuter au premier plan ou en arrière-plan sur l'appareil Android.
Démo
Pour essayer vous-même ce processus de validation du numéro de téléphone fluide sur ordinateur, procédez comme suit:
- Accédez à https://web-otp-demo.glitch.me/ sur un ordinateur. Cliquez sur le bouton Valider.
- Envoyez le message exact qui s'affiche à l'écran depuis un deuxième téléphone vers l'appareil Android.
- Lorsque le SMS est envoyé à l'appareil Android, une boîte de dialogue s'affiche pour vous demander si vous souhaitez valider le numéro de téléphone sur l'ordinateur. Appuyez sur Envoyer pour approuver.
- Sur ordinateur, le code de validation envoyé à l'appareil Android doit être renseigné automatiquement dans le champ de saisie.
Fonctionnement de l'API WebOTP
Voyons comment fonctionne l'API WebOTP:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
if (otp.code) input.value = otp.code;
…
Le message SMS doit être mis en forme avec les codes à usage unique liés à l'origine.
Your OTP is: 123456.
@web-otp-demo.glitch.me #123456
Notez que la dernière ligne contient l'origine à lier, précédée d'un @, suivie de l'OTP précédé d'un #.
Lorsque le message arrive, une barre d'informations s'affiche et invite l'utilisateur à valider son numéro de téléphone. Une fois que l'utilisateur a cliqué sur le bouton Verify, le navigateur transfère automatiquement l'OTP vers le site et résout le navigator.credentials.get(). Le site Web peut ensuite extraire l'OTP et terminer le processus de validation.
Pour en savoir plus, consultez Valider des numéros de téléphone sur le Web avec l'API WebOTP.
Utiliser l'API WebOTP sur ordinateur
La validation d'un numéro de téléphone par SMS est largement utilisée et indépendante de la plate-forme. Tous les cas d'utilisation sur les appareils mobiles doivent s'appliquer aux ordinateurs.
L'utilisation de l'API WebOTP sur ordinateur est identique à celle sur mobile. Les sites Web peuvent donc déployer le même code sur toutes les plates-formes.
Compatibilité avec les navigateurs et interopérabilité
Cette fonctionnalité est basée sur la synchronisation Chrome. Elle ne fonctionne donc que dans Chrome pour le moment. La réception et la transmission de SMS sur iOS ou iPadOS dans Chrome ne sont pas prises en charge.
Bien que les moteurs de navigateur autres que Chromium n'implémentent pas l'API WebOTP, Safari partage le même format SMS avec sa prise en charge de input[autocomplete="one-time-code"]. Dans Safari, tant qu'un utilisateur a activé la synchronisation automatique d'iMessage, lorsqu'un SMS contenant un code à usage unique lié à l'origine arrive avec l'origine correspondante sur iOS ou iPadOS, le message est transféré vers macOS. Si l'utilisateur se concentre sur le champ de saisie, Safari lui suggère de saisir le code à usage unique.
Commentaires
Vos commentaires sont très utiles pour améliorer l'API WebOTP. Essayez-la et dîtes-nous ce que vous en pensez.
Photo de Luis Villasmil sur Unsplash