Valider un numéro de téléphone sur un ordinateur avec l'API WebOTP

À partir de Chrome 93, les sites Web peuvent valider les numéros de téléphone depuis Chrome pour ordinateur.

Yi Gu
Eiji Kitamura

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 de bureau. 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, le passage de l'ordinateur de bureau au mobile, l'ouverture de l'application SMS, la mémorisation et la saisie de l'OTP sur le site Web d'origine sur ordinateur complique la tâche. 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 lié à l'origine. Il réduit ainsi le risque que des sites Web de hameçonnage volent également le code OTP.

API WebOTP en action.

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.

API WebOTP sur ordinateur.

Essayer

Prérequis

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:

  1. Accédez à https://web-otp-demo.glitch.me/ sur votre ordinateur. Cliquez sur le bouton Valider.
  2. Envoyez le message exact qui s'affiche à l'écran depuis un deuxième téléphone vers l'appareil Android.
  3. 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.
  4. 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 formaté 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 @ suivi du mot de passe à usage unique 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 un ordinateur de bureau

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 sélectionne le champ de saisie, Safari lui suggère l'OTP à saisir.

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