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

À partir de Chrome 93, les sites Web peuvent valider des numéros de téléphone à partir de 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 d'un simple geste sans avoir à changer d'application. Chrome 93 étend cette fonctionnalité aux pour ordinateur. Pour en savoir plus, poursuivez votre lecture !

Introduction

Les OTP (mots de passe à usage unique) envoyés par SMS sont couramment 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. Cependant, le passage de l'ordinateur au mobile l'application, la mémorisation et la saisie du mot de passe à usage unique sur le site Web d'origine sur un ordinateur de bureau ajoute des frictions. Il est facile de faire des erreurs de cette façon et il est vulnérable à par hameçonnage.

L'API WebOTP permet aux sites Web de : obtenir par programmation le mot de passe à usage unique à partir d'un SMS et qui remplissent automatiquement le formulaire d'un simple geste, sans changer d'application. Le SMS a un format spécifique et est lié à l'origine, ce qui atténue le risque le risque que des sites d’hameçonnage volent également le mot de passe à usage unique.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">.
L'API WebOTP en action.

WebOTP ne prend pas encore en charge le ciblage des numéros de téléphone, à partir 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 maintenant prend en charge l'écoute des SMS reçus sur d'autres appareils afin d'aider les utilisateurs à terminer la validation du numéro de téléphone sur ordinateur dans Chrome 93.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> API WebOTP sur ordinateur

Essayer

Prérequis

Démo

Pour tester vous-même ce processus de validation simple du numéro de téléphone sur ordinateur, suivez procédez comme suit:

  1. Accédez à https://web-otp-demo.glitch.me/ sur ordinateur. Cliquez sur le bouton Valider.
  2. Envoyez le SMS exact qui s'affiche à l'écran d'un deuxième téléphone vers le un 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.
  4. Sur le bureau, le code de validation envoyé à l'appareil Android doit être saisi automatiquement dans le champ de saisie.

Fonctionnement de l'API WebOTP

Examinons le fonctionnement de 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é de #.

Lorsque vous recevez un SMS, une barre d'informations s'affiche et invite l'utilisateur à valider son numéro de téléphone. Lorsque l'utilisateur clique sur le bouton Verify, le navigateur redirige automatiquement le mot de passe à usage unique vers le site et résout le navigator.credentials.get() Le site Web peut alors extraire l'OTP et remplir la procédure 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 du numéro de téléphone par SMS est très utilisée et ne dépend pas de la plate-forme. Toute utilisation sur les appareils mobiles doivent s'appliquer aux ordinateurs de bureau.

L'utilisation de l'API WebOTP sur ordinateur fonctionne de la même manière que sur mobile. afin que les sites Web puissent déployer le même code sur toutes les plateformes.

Prise en charge et interopérabilité des navigateurs

Cette fonctionnalité s'appuie 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 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. compatible avec input[autocomplete="one-time-code"]. Dans Safari, tant qu'un l'utilisateur a activé la synchronisation automatique d'iMessage lorsqu'il reçoit un SMS contenant format de code à usage unique arrive avec l'origine correspondante sur iOS ou iPadOS, est transféré vers macOS. Si l'utilisateur sélectionne le champ de saisie, proposera à l'utilisateur le mot de passe à usage unique à saisir.

Commentaires

Vos commentaires nous seront très utiles pour améliorer l'API WebOTP. Essayer et contactez-nous ce que vous pensez.

Photo de Luis Villasmil sur Désactiver