Valider des numéros de téléphone sur le Web avec l'API WebOTP

Aider les utilisateurs avec des mots de passe à usage unique reçus par SMS

Eiji Kitamura

Qu'est-ce que l'API WebOTP ?

De nos jours, la plupart des gens dans le monde possède un appareil mobile et les développeurs sont qui utilisent généralement des numéros de téléphone comme identifiant pour les utilisateurs de leurs services.

Il existe plusieurs méthodes pour valider un numéro de téléphone, Le mot de passe à usage unique (OTP) envoyé par SMS est l'un des plus courants. Envoi de ce code... au serveur du développeur démontre le contrôle du numéro de téléphone.

Cette idée est déjà mise en œuvre dans de nombreux scénarios pour obtenir:

• Numéro de téléphone comme identifiant de l'utilisateur. Lorsque vous souscrivez un nouvel service, certains sites Web demandent un numéro de téléphone au lieu d’une adresse e-mail et l'utiliser comme identifiant de compte.
• Validation en deux étapes : Lors de la connexion, un site Web vous demande un code à usage unique envoyés par SMS en plus d'un mot de passe ou d'un autre critère la sécurité.
• Confirmation du paiement. Lorsqu'un utilisateur effectue un paiement, demander un un code unique envoyé par SMS peut aider à vérifier l'intention de la personne.

Le processus actuel crée des frictions pour les utilisateurs. Rechercher un OTP dans un SMS il est fastidieux de le copier et de le coller dans le formulaire, les taux de conversion lors des parcours utilisateur critiques. Faciliter ce processus depuis longtemps pour le Web de la part de nombreux développeurs les plus importants au monde. Android dispose d'une API qui fait exactement cela. tout comme iOS et Safari

L'API WebOTP permet à votre application de recevoir des messages à une mise en forme spéciale liés à le domaine de votre application. Vous pouvez alors programmer l'obtention d'un mot de passe à usage unique à partir d'un SMS un message et valider un numéro de téléphone pour l'utilisateur plus facilement.

Démonstration

Imaginons qu'un utilisateur souhaite valider son numéro de téléphone sur un site Web. Le site Web envoie un SMS à l'utilisateur et celui-ci saisit l'OTP à partir du pour confirmer que ce numéro de téléphone vous appartient.

Avec l'API WebOTP, l'utilisateur peut effectuer ces étapes d'un simple geste, présentées dans la vidéo. Lorsque vous recevez un SMS, une bottom sheet s'affiche et invite l'utilisateur à valider son numéro de téléphone. Après avoir cliqué sur le bouton Valider sur la bottom sheet, le navigateur colle l'OTP dans le formulaire et le est envoyé sans que l'utilisateur ait besoin d'appuyer sur Continuer.

L'ensemble du processus est illustré dans l'image ci-dessous.

</ph> <ph type="x-smartling-placeholder">

Essayez la version de démonstration par vous-même. Il ne demande pas votre numéro de téléphone ou envoyer un SMS sur votre appareil, un autre appareil en copiant le texte affiché dans la démo. Cela fonctionne parce qu'il peu importe l'expéditeur lorsque vous utilisez l'API WebOTP.

1. Accédez à https://web-otp.glitch.me dans Chrome 84 ou sur un appareil Android.
2. Envoyez le SMS suivant à votre téléphone depuis l'autre téléphone.

Your OTP is: 123456.

@web-otp.glitch.me #12345

Avez-vous reçu le SMS et êtes-vous invité à saisir le code dans la zone de saisie ? C'est ainsi que l'API WebOTP fonctionne pour les utilisateurs.

L'utilisation de l'API WebOTP se compose de trois parties:

• Une balise <input> correctement annotée
• JavaScript dans votre application Web
• Texte mis en forme du message envoyé par SMS.

Voyons d'abord la balise <input>.

Annoter une balise <input>

WebOTP fonctionne sans annotation HTML, mais pour plusieurs navigateurs nous vous recommandons vivement d'ajouter autocomplete="one-time-code" la balise <input> où vous attendez de l'utilisateur à saisir un mot de passe à usage unique ;

Cela permet à Safari 14 ou version ultérieure de suggérer à l'utilisateur de saisir automatiquement <input> par un mot de passe à usage unique lorsqu'ils reçoivent un SMS au format décrit dans la section Mettre en forme le message SMS, même s'il n'est pas compatible avec WebOTP.

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

Utiliser l'API WebOTP

WebOTP étant un outil simple, il vous suffit de copier et de coller le code suivant d'un projet. Je vais vous expliquer ce qu'il se passe.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Détection de caractéristiques

La détection de caractéristiques est la même que pour de nombreuses autres API. Écouter L'événement DOMContentLoaded attend que l'arborescence DOM soit prête à être interrogée.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

Traiter l'OTP

L'API WebOTP en elle-même est suffisamment simple. Utilisez navigator.credentials.get() pour obtenir l'OTP. WebOTP ajoute une nouvelle option otp à cette méthode. Il ne contient Une propriété: transport, dont la valeur doit être un tableau comportant la chaîne 'sms'.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

Cela déclenche le flux d'autorisations du navigateur à la réception d'un SMS. Si l'autorisation est accordée, la promesse renvoyée se résout avec un objet OTPCredential.

Contenu de l'objet OTPCredential obtenu

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

Transmettez ensuite la valeur du mot de passe à usage unique au champ <input>. Envoyer directement le formulaire éliminera l'étape où l'utilisateur devra appuyer sur un bouton.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

Annuler le message

Si l'utilisateur saisit manuellement un mot de passe à usage unique et envoie le formulaire, vous pouvez annuler le get() à l'aide d'une instance AbortController dans l'objet options.

<ph type="x-smartling-placeholder"></ph> JavaScript

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

Mettre en forme le SMS

L'API elle-même doit sembler assez simple, mais il y a quelques choses que vous devez connaître avant de l'utiliser. Le message doit être envoyé après le navigator.credentials.get() est appelé et doit être reçu sur l'appareil. où get() a été appelé. Enfin, le message doit respecter les formatage:

• Le message commence par un texte (facultatif) intelligible qui contient entre quatre et dix Chaîne de caractères alphanumériques avec au moins un chiffre après la dernière ligne pour l'URL et le mot de passe à usage unique.
• La partie "domaine" de l'URL du site Web ayant appelé l'API doit être précédée d'ici le @.
• L'URL doit contenir un signe dièse ("#") suivi du mot de passe à usage unique.

Exemple :

Your OTP is: 123456.

@www.example.com #123456

Voici quelques exemples à éviter:

Démonstrations

Essayez différents messages pendant la démonstration: https://web-otp.glitch.me

Vous pouvez également la dupliquer et créer votre version: https://glitch.com/edit/#!/web-otp.

Utiliser WebOTP depuis un iFrame d'origine différente

La saisie d'un mot de passe à usage unique envoyé par SMS vers un iFrame d'origine différente est généralement utilisée pour le paiement s'affiche, en particulier avec 3D Secure. Avoir le format commun pour prendre en charge iFrame multi-origines, l'API WebOTP fournit des OTP liés à des origines imbriquées. Exemple :

• Un utilisateur se rend sur shop.example pour acheter une paire de chaussures avec une carte de crédit.
• Une fois le numéro de carte saisi, le fournisseur de services de paiement intégré affiche un formulaire à partir de bank.example dans un iFrame demandant à l'utilisateur de valider son numéro de téléphone pour régler vos achats rapidement.
• bank.example envoie à l'utilisateur un SMS contenant un mot de passe à usage unique pour qu'il puisse le saisir pour valider son identité.

Pour utiliser l'API WebOTP à partir d'un iFrame multi-origine, vous devez effectuer deux opérations:

• Annotez l'origine du cadre supérieur et l'origine de l'iFrame dans le texte du SMS. .
• Configurer une règle d'autorisations pour permettre à l'iFrame d'origine différente de recevoir l'OTP directement de l'utilisateur.

Vous pouvez essayer la version de démonstration à l'adresse https://web-otp-iframe-demo.stackblitz.io.

Annoter les origines liées dans le message SMS

Lorsque l'API WebOTP est appelée depuis un iFrame, le message SMS doit inclure l'origine du cadre supérieur précédée de @, suivie du mot de passe à usage unique précédé de # et l'origine de l'iFrame précédée de @ à la dernière ligne.

Your verification code is 123456

@shop.example #123456 @bank.exmple

Configurer une règle d'autorisation

Pour utiliser WebOTP dans un iFrame multi-origine, l'intégrateur doit accorder l'accès à ce API via la règle d'autorisation otp-credentials pour éviter toute action comportemental. En général, il existe deux façons d'atteindre cet objectif:

via un en-tête HTTP:

Permissions-Policy: otp-credentials=(self "https://bank.example")

Via l'attribut iFrame allow :

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Consultez d'autres exemples sur la spécification d'une règle d'autorisation .

Utiliser WebOTP sur ordinateur

Dans Chrome, WebOTP permet d'écouter les SMS reçus sur d'autres appareils pour : aider les utilisateurs à valider leur numéro de téléphone sur ordinateur.

Cette fonctionnalité nécessite que l'utilisateur se connecte au même compte Google sur les Chrome pour ordinateur et Chrome pour Android.

Les développeurs n'ont qu'à implémenter l'API WebOTP sur leur site Web de bureau, de la même façon que sur leur site Web pour mobile, mais pas d'astuces particulières. obligatoire.

Pour en savoir plus, consultez Valider un numéro de téléphone sur ordinateur à l'aide de l'API WebOTP.

Questions fréquentes

La boîte de dialogue ne s'affiche pas alors que le message est correctement formaté. Que se passe-t-il ?

Voici quelques mises en garde concernant le test de l'API:

• Si le numéro de téléphone de l'expéditeur figure dans la liste de contacts du destinataire, L'API ne se déclenchera pas en raison de la conception de l'API SMS User Consent sous-jacente.
• Si vous utilisez un profil professionnel sur votre appareil Android et que WebOTP l'utilise. ne fonctionnent pas, essayez plutôt d'installer et d'utiliser Chrome sur votre profil personnel (profil sur lequel vous recevez les SMS).

Vérifiez de nouveau son format pour voir si le format de votre SMS est correct.

Cette API est-elle compatible avec différents navigateurs ?

Chromium et WebKit se sont mis d'accord sur le format des SMS et Apple a annoncé la compatibilité de Safari à partir d'iOS 14 et macOS Big Sur. Safari ne prend pas en charge l'API JavaScript WebOTP. annoter l'élément input avec autocomplete=["one-time-code"], la valeur par défaut le clavier vous propose automatiquement de saisir le mot de passe à usage unique si le message SMS est conforme avec le format.

L'authentification par SMS est-elle sûre ?

L'OTP par SMS est utile pour valider un numéro de téléphone lorsqu'il est le premier fournie, la vérification du numéro de téléphone par SMS doit être utilisée avec précaution une nouvelle authentification, car les numéros de téléphone peuvent être piratés et recyclés par les opérateurs. WebOTP est un mécanisme de réauthentification et de récupération pratique, mais les services les combiner à d'autres facteurs, tels qu'un défi de connaissances, ou utiliser le API Web Authentication pour l'authentification forte.

Où puis-je signaler des bugs dans l'implémentation de Chrome ?

Avez-vous détecté un bug dans l'implémentation de Chrome ?

• Signaler un bug à l'adresse https://new.crbug.com. Fournissez autant de détails que possible, des instructions simples pour reproduire le problème, et définissez Composants sur Blink>WebOTP.

Comment puis-je contribuer à cette fonctionnalité ?

Prévoyez-vous d'utiliser l'API WebOTP ? Votre soutien public nous aide à prioriser et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge. Envoyez un tweet à @ChromiumDev en utilisant le hashtag. #WebOTP et n'hésitez pas à nous dire où et comment vous l'utilisez.

Ressources

• Bonnes pratiques concernant les formulaires OTP envoyés par SMS
• Valider un numéro de téléphone sur ordinateur à l'aide de l'API WebOTP
• Remplir des formulaires OTP dans des iFrames multi-origines avec l'API WebOTP
• Yahoo! L'authentification sans mot de passe de JAPAN a permis de réduire les demandes de 25 % et d'accélérer le temps de connexion de 2,6 fois.