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.

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. Lisez la suite pour en savoir plus.

Introduction

Les mots de passe à usage unique envoyés par SMS sont généralement utilisés pour valider un numéro de téléphone, par exemple comme deuxième étape d'authentification ou pour valider des paiements sur le Web. Toutefois, le passage complet de l'ordinateur de bureau au mobile, l'ouverture de l'application de SMS, la mémorisation et la saisie du mot de passe à usage unique sur le site Web d'origine sur ordinateur ajoutent des frictions. Il est facile de faire des erreurs de cette manière et est vulnérable aux attaques par hameçonnage.

L'API WebOTP permet aux sites Web d'obtenir automatiquement le mot de passe à usage unique à partir d'un SMS et de remplir automatiquement le formulaire pour les utilisateurs d'un simple geste sans changer d'application. Le SMS présente un format spécifique et est lié à l'origine. Il réduit donc également le risque que des sites Web d'hameçonnage volent l'OTP.

L'API WebOTP en action.

Un cas d'utilisation qui n'a pas encore été pris en charge dans WebOTP consiste à cibler les demandes de validation de numéro de téléphone provenant d'un ordinateur 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 afin d'aider les utilisateurs à valider leur numéro de téléphone sur ordinateur dans Chrome 93.

API WebOTP sur ordinateur.

Essayer

Prérequis

Démonstration

Pour essayer vous-même cette procédure simple de validation du numéro de téléphone sur ordinateur, procédez comme suit:

  1. Accédez à https://web-otp-demo.glitch.me/ sur un ordinateur. Cliquez sur le bouton Valider.
  2. Envoyer le SMS exact affiché à l'écran d'un deuxième téléphone à 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 le bureau. Appuyez sur Envoyer pour approuver la demande.
  4. Sur l'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 devant être précédée d'un @ suivi du mot de passe à usage unique précédé d'un #.

À la réception du SMS, 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 au site et résout l'navigator.credentials.get(). Le site Web peut alors extraire le mot de passe à usage unique 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

La validation des numéros de téléphone par SMS est très répandue et compatible avec toutes les plates-formes. Tous les cas d'utilisation sur les appareils mobiles doivent s'appliquer aux ordinateurs de bureau.

L'utilisation de l'API WebOTP sur ordinateur est la même que sur mobile. Les sites Web peuvent donc déployer le même code sur plusieurs plates-formes.

Compatibilité et interopérabilité des navigateurs

Cette fonctionnalité repose sur la synchronisation Chrome et ne fonctionne donc que dans Chrome pour le moment. La réception et la transmission de SMS sur iOS ou iPad OS 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 de SMS avec sa compatibilité input[autocomplete="one-time-code"]. Dans Safari, tant qu'un utilisateur a activé la synchronisation automatique d'iMessage, lorsqu'un SMS contenant un format de 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 suggère l'OTP à saisir.

Commentaires

Vos commentaires nous sont très utiles pour améliorer l'API WebOTP. Essayez-la et dites-nous ce que vous en pensez.

Photo de Luis Villasmil sur Unsplash