Découvrez comment optimiser votre formulaire de code secret par SMS et améliorer l'expérience utilisateur.
Demander à un utilisateur de fournir le mot de passe à usage unique (OTP) envoyé par SMS est une méthode courante pour confirmer son numéro de téléphone. Voici quelques cas d'utilisation de l'OTP par SMS:
- Authentification à deux facteurs En plus du nom d'utilisateur et du mot de passe, le code OTP par SMS peut être utilisé comme un signal fort indiquant que le compte appartient à la personne qui a reçu le code OTP par SMS.
- Valider votre 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 le code OTP reçu par SMS pour prouver leur identité. Il est parfois combiné à 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 à l'adresse e-mail enregistrée ou d'un code secret à usage unique par SMS au 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é. Les codes OTP par SMS sont couramment utilisés à cette fin.
Cet article décrit les bonnes pratiques à suivre pour créer un formulaire d'OTP par SMS pour les cas d'utilisation ci-dessus.
Checklist
Pour offrir une expérience utilisateur optimale avec le code secret par SMS, procédez comme suit:
- Utilisez l'élément
<input>avec :type="text"inputmode="numeric"autocomplete="one-time-code"
- Utilisez
@BOUND_DOMAIN #OTP_CODEcomme dernière ligne du message SMS contenant le code à usage unique. - 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 à suivre, car il fonctionne dans tous les navigateurs. Même si d'autres suggestions de cet article ne fonctionnent pas dans certains navigateurs, l'utilisateur pourra toujours saisir et envoyer manuellement le code OTP.
<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 tire le meilleur parti des fonctionnalités du navigateur.
type="text"
Étant donné que les codes OTP 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 transforme le clavier mobile en chiffres uniquement. Cette pratique 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" affiche des boutons de haut en bas à côté du champ de saisie. Appuyer sur ces boutons permet d'augmenter ou de diminuer le nombre et peut supprimer les zéros précédents.
Utilisez type="text" à la place. Cela ne transforme pas le clavier mobile en chiffres uniquement, mais ce n'est pas grave, car le prochain conseil d'utilisation de inputmode="numeric" s'en charge.
inputmode="numeric"
Utilisez inputmode="numeric" pour passer au clavier mobile en chiffres uniquement.
Certains sites Web utilisent type="tel" pour les champs de saisie de code secret, car il permet également de passer au clavier numérique uniquement (y compris * et #) lorsque le focus est activé. Ce hack était utilisé par le passé lorsque inputmode="numeric" n'était pas largement compatible. Depuis que Firefox est compatible avec 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 fournir une assistance de saisie semi-automatique et informe le navigateur du type d'informations attendues dans le champ.
Avec autocomplete="one-time-code", chaque fois qu'un utilisateur reçoit un message SMS alors qu'un formulaire est ouvert, le système d'exploitation analyse de manière heuristique le code OTP dans le SMS et le clavier suggère le code OTP à l'utilisateur. Elle ne fonctionne que sur Safari 12 et versions ultérieures sur iOS, iPadOS et macOS, mais nous vous recommandons vivement de l'utiliser, car elle permet d'améliorer facilement l'expérience de l'OTP par SMS sur ces plates-formes.
autocomplete="one-time-code" améliore l'expérience utilisateur, mais vous pouvez faire plus en vous assurant que le message SMS est conforme au format de message lié à l'origine.
Mettre en forme le texte du SMS
Améliorez l'expérience utilisateur lors de la saisie d'un code à usage unique en vous conformant aux spécifications des codes à usage unique liés à l'origine envoyés par SMS.
La règle de format est simple: terminez le message SMS avec le domaine du destinataire précédé de @ et le code 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 plus fiable l'extraction des codes. En associant des codes OTP à des sites Web, il est plus difficile de duper les utilisateurs pour qu'ils fournissent un code à des sites malveillants.
L'utilisation de ce format présente plusieurs avantages:
- Le code OTP sera associé au domaine. Si l'utilisateur se trouve sur des domaines autres que celui spécifié dans le message SMS, la suggestion d'OTP ne s'affiche pas. Cela réduit également le risque d'attaques par hameçonnage et de piratage de compte potentiel.
- Le navigateur pourra désormais extraire de manière fiable le code OTP sans dépendre d'heuristiques mystérieuses et fragiles.
Lorsqu'un site Web utilise autocomplete="one-time-code", Safari avec iOS 14 ou version ultérieure suggère le code secret en suivant les règles ci-dessus.
Ce format de message SMS est également bénéfique pour les navigateurs autres que Safari. Chrome, Opera et Vivaldi sur Android sont également compatibles avec la règle des codes à usage unique liés à l'origine avec l'API WebOTP, mais pas via autocomplete="one-time-code".
Utiliser l'API WebOTP
L'API WebOTP permet d'accéder au code 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és à l'origine soit envoyé et que l'utilisateur accorde l'accès. Une fois l'OTP transmis à JavaScript, le site Web peut l'utiliser dans un formulaire ou l'envoyer directement au serveur via POST.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
Découvrez comment utiliser l'API WebOTP en détail dans Valider des numéros de téléphone sur le Web avec l'API WebOTP ou copiez-collez l'extrait de code suivant. (Assurez-vous que l'élément <form> dispose d'attributs action et method 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.