Bonnes pratiques concernant les formulaires OTP envoyés par SMS

Découvrez comment optimiser votre formulaire OTP envoyé par SMS et améliorer l'expérience utilisateur.

Eiji Kitamura

Demander à un utilisateur de fournir le mot de passe à usage unique (OTP) envoyé par SMS est un moyen courant de confirmer le numéro de téléphone d'un utilisateur. Voici quelques cas d'utilisation de l'OTP par SMS:

• Authentification à deux facteurs En plus du nom d'utilisateur et du mot de passe, l'OTP envoyé par SMS peut être utilisé comme un signal fort indiquant que le compte appartient à la personne qui a reçu l'OTP reçu par SMS.
• Validation du numéro de téléphone : Certains services utilisent un numéro de téléphone comme identifiant principal de l'utilisateur. Dans ces services, les utilisateurs peuvent saisir leur numéro de téléphone et l'OTP reçu par SMS pour prouver leur identité. Parfois, il est associé à un code pour constituer une authentification à deux facteurs.
• Récupération de compte. Lorsqu'un utilisateur perd l'accès à son compte, il doit pouvoir le récupérer. L'envoi d'un e-mail à son adresse e-mail enregistrée ou d'un mot de passe à usage unique par SMS à son numéro de téléphone sont des méthodes courantes de récupération de compte.
• Confirmation du paiement : dans les systèmes de paiement, certaines banques ou émetteurs de cartes de crédit demandent une authentification supplémentaire au payeur pour des raisons de sécurité. L’OTP par SMS est couramment utilisé à cette fin.

Cet article présente les bonnes pratiques à suivre pour créer un formulaire de mot de passe à usage unique envoyé par SMS pour les cas d'utilisation ci-dessus.

Checklist

Pour fournir la meilleure expérience utilisateur possible avec l'OTP envoyé par SMS, procédez comme suit:

• Utilisez l'élément <input> avec :
  • type="text"
  • inputmode="numeric"
  • autocomplete="one-time-code"
• Utilisez @BOUND_DOMAIN #OTP_CODE sur la dernière ligne du message SMS OTP.
• Utilisez l'API WebOTP.

Utiliser l'élément <input>

L'utilisation d'un formulaire avec un élément <input> est la bonne pratique la plus importante, car elle fonctionne dans tous les navigateurs. Même si les autres suggestions de cet article ne fonctionnent pas dans certains navigateurs, l'utilisateur pourra toujours saisir et envoyer l'OTP manuellement.

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

Voici quelques idées pour vous assurer qu'un champ de saisie exploite au mieux les fonctionnalités du navigateur.

type="text"

Étant donné que les mots de passe à usage unique sont généralement des nombres à cinq ou six chiffres, l'utilisation de type="number" pour un champ de saisie peut sembler intuitive, car elle ne fait que des chiffres sur le clavier mobile. Cette action n'est pas recommandée, car le navigateur s'attend à ce qu'un champ de saisie soit un nombre dénombrable plutôt qu'une séquence de plusieurs nombres, ce qui peut entraîner un comportement inattendu. L'utilisation de type="number" entraîne l'affichage de boutons Haut et Bas à côté du champ de saisie. Appuyer sur ces boutons incrémente ou décrémente le nombre et peut supprimer les zéros précédents.

Utilisez type="text" à la place. Le clavier mobile ne sera pas seulement des chiffres, mais cela ne pose pas de problème, car le prochain conseil concernant l'utilisation de inputmode="numeric" permet d'effectuer cette opération.

inputmode="numeric"

Utilisez inputmode="numeric" pour n'afficher que les chiffres dans le clavier mobile.

Certains sites Web utilisent type="tel" pour les champs de saisie OTP, car il ne fait que n'afficher que les chiffres du clavier mobile (y compris * et #) lorsqu'il est sélectionné. Ce piratage a été utilisé par le passé lorsque inputmode="numeric" n'était pas largement accepté. Depuis que Firefox a commencé à prendre en charge inputmode="numeric", il n'est plus nécessaire d'utiliser le hack type="tel" sémantiquement incorrect.

autocomplete="one-time-code"

L'attribut autocomplete permet aux développeurs de spécifier l'autorisation dont dispose le navigateur pour permettre la saisie semi-automatique et de l'informer du type d'informations attendues dans le champ.

Avec autocomplete="one-time-code", chaque fois qu'un utilisateur reçoit un SMS alors qu'un formulaire est ouvert, le système d'exploitation analyse le mot de passe à usage unique dans le SMS de manière heuristique, et le clavier suggère cet OTP à l'utilisateur. Il ne fonctionne que dans Safari 12 et les versions ultérieures sur iOS, iPadOS et macOS, mais nous vous recommandons vivement de l'utiliser, car il permet d'améliorer facilement l'expérience OTP SMS sur ces plates-formes.

autocomplete="one-time-code" améliore l'expérience utilisateur, mais vous pouvez faire davantage en vous assurant que le message SMS respecte le format du message lié à l'origine.

Mettre en forme le texte du SMS

Améliorez l'expérience utilisateur liée à la saisie d'un mot de passe à usage unique en l'alignant sur les codes à usage unique envoyés par SMS liés à l'origine.

La règle de mise en forme est simple: terminez le message SMS en faisant précéder le domaine du destinataire de @ et l'OTP précédé de #.

Exemple :

Your OTP is 123456

@web-otp.glitch.me #123456

L'utilisation d'un format standard pour les messages OTP facilite et rend l'extraction des codes plus fiable et plus facile. Il est plus difficile d'inciter les utilisateurs à fournir un code à des sites malveillants lorsque ces codes OTP sont associés à des sites Web.

Ce format offre plusieurs avantages:

• L'OTP sera lié au domaine. Si l'utilisateur se trouve sur un domaine autre que celui spécifié dans le SMS, la suggestion de mot de passe à usage unique ne s'affiche pas. Cela réduit également le risque d'attaques par hameçonnage et de piratage de compte potentiel.
• Le navigateur peut désormais extraire le mot de passe à usage unique de manière fiable sans dépendre d'heuristiques mystérieuses et irrégulières.

Lorsqu'un site Web utilise autocomplete="one-time-code", Safari avec iOS 14 ou une version ultérieure suggère l'OTP conformément aux règles ci-dessus.

Ce format de SMS profite également aux navigateurs autres que Safari. Chrome, Opera et Vivaldi sur Android sont également compatibles avec la règle des codes à usage unique liée à l'origine avec l'API WebOTP, mais pas via autocomplete="one-time-code".

Utiliser l'API WebOTP

L'API WebOTP permet d'accéder à l'OTP reçu dans un message SMS. En appelant navigator.credentials.get() avec le type otp (OTPCredential), où transport inclut sms, le site Web attend qu'un SMS conforme aux codes à usage unique lié à l'origine soit envoyé et auquel l'utilisateur puisse accéder. Une fois l'OTP transmis à JavaScript, le site web peut l'utiliser dans un formulaire ou le POST directement sur le serveur.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);

Pour savoir comment utiliser l'API WebOTP en détail, consultez Vérifier des numéros de téléphone sur le Web avec l'API WebOTP, ou copiez et collez l'extrait suivant. (Assurez-vous que les attributs action et method de l'élément <form> sont correctement définis.)

// Feature detection
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    // Cancel the WebOTP API if the form is submitted manually.
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        // Cancel the WebOTP API.
        ac.abort();
      });
    }
    // Invoke the WebOTP API
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      // Automatically submit the form when an OTP is obtained.
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Photo de Jason Leung sur Unsplash.