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.