Découvrez comment optimiser votre formulaire OTP envoyé par SMS et améliorer l'expérience utilisateur.
Demander à un utilisateur de fournir le mot de passe à usage unique (OTP, OTP) envoyé par SMS est une pratique courante moyen 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 par SMS peut être sert de signal fort indiquant que le compte appartient à la personne qui a reçu le Mot de passe à usage unique envoyé par SMS.
- Validation du numéro de téléphone. Certains services utilisent un numéro de téléphone identifiant principal. Avec ces services, les utilisateurs peuvent saisir leur numéro de téléphone et le Mot de passe à usage unique reçu par SMS pour prouver son 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, est un moyen de le récupérer. en envoyant un e-mail à leur adresse e-mail enregistrée ou un SMS OTP à leur 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 certaines cartes de crédit les émetteurs demandent une authentification supplémentaire de la part du payeur pour des raisons de sécurité. L’OTP par SMS est généralement utilisé à cette fin.
Cet article présente les bonnes pratiques à suivre pour créer un formulaire de récupération de mot de passe à usage unique envoyé par SMS pour l'utilisation ci-dessus. cas d'utilisation.
Checklist
Pour offrir une expérience utilisateur optimale avec l'OTP par SMS, procédez comme suit:
- Utilisez l'élément
<input>avec: <ph type="x-smartling-placeholder">- </ph>
type="text"inputmode="numeric"autocomplete="one-time-code"
- Indiquez
@BOUND_DOMAIN #OTP_CODEsur la dernière ligne du 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
peut suivre, car elle fonctionne
dans tous les navigateurs. Même si d'autres suggestions de
ce post ne fonctionne pas dans certains navigateurs, l'utilisateur pourra toujours saisir et envoyer le mot de passe à usage unique
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 tirer pleinement parti d'un champ de saisie le fonctionnement du navigateur.
type="text"
Étant donné que les OTP sont
généralement des nombres à cinq ou six chiffres, en utilisant
type="number" pour un champ de saisie peut sembler intuitif, car il modifie la
clavier numérique uniquement. Cette opération n'est pas recommandée, car le navigateur attend un
champ d'entrée soit un nombre dénombrable plutôt qu'une séquence de plusieurs nombres,
ce qui peut provoquer
un comportement inattendu. L'utilisation de type="number" provoque des augmentations et des diminutions
les boutons à afficher à 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 converti en chiffres
mais ce n'est pas un problème, car le prochain conseil d'utilisation de inputmode="numeric"
ce travail.
inputmode="numeric"
Utiliser inputmode="numeric"
pour remplacer le clavier de l'appareil mobile par des chiffres uniquement.
Certains sites Web utilisent type="tel" pour les champs de saisie OTP, car il
remplace le clavier mobile par des chiffres uniquement (y compris * et #) lorsque
concentré. Ce piratage a déjà été utilisé lorsque inputmode="numeric"
n'était pas largement accepté. Depuis que Firefox a
commencé à prendre en charge
inputmode="numeric",
il n'est pas nécessaire d'utiliser le hack type="tel" sémantiquement incorrect.
autocomplete="one-time-code"
autocomplete
permet aux développeurs de spécifier l'autorisation que le navigateur
doit fournir une assistance à la saisie semi-automatique et informe le navigateur de la
le type d'information attendu sur 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
analysera l'OTP dans le SMS de manière heuristique et
le clavier suggère à l'utilisateur
l'OTP à saisir. Elle ne fonctionne que sur Safari 12 et
plus tard sur iOS, iPadOS et macOS, mais nous vous recommandons vivement de l'utiliser, car il s'agit
un moyen simple d'améliorer l'expérience
de l'OTP par SMS sur ces plateformes.
autocomplete="one-time-code" améliore l'expérience utilisateur, mais vous n'allez pas en revenir
en vérifiant que le message SMS est conforme aux exigences
format.
Mettre en forme le texte du SMS
Améliorez l'expérience utilisateur lors de la saisie d'un mot de passe à usage unique en vous alignant sur Les codes à usage unique liés à l'origine envoyés par SMS spécifique.
La règle de mise en forme est simple: terminez le SMS avec le domaine du destinataire
précédé de @ et le mot de passe à usage unique 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 l'extraction de codes qu'ils fournissent plus facilement et plus fiable. Associer des codes OTP à sites Web rend plus difficile d’inciter les utilisateurs à fournir un code à des sites malveillants.
Ce format présente plusieurs avantages:
- L'OTP sera lié au domaine. Si l'utilisateur se trouve sur un domaine autre que celle indiquée dans le SMS, la suggestion de mot de passe à usage unique n'apparaîtra pas. Cela réduit également le risque d'attaques par hameçonnage et de piratages de comptes potentiels.
- Le navigateur pourra désormais extraire l'OTP de manière fiable sans dépendre des méthodes heuristiques mystérieuses et irrégulières.
Lorsqu'un site Web utilise autocomplete="one-time-code", Safari avec iOS 14 ou version ultérieure
suggère l'OTP selon les règles ci-dessus.
Ce format de SMS est également utile dans 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 à l'OTP
reçu par SMS. En appelant
navigator.credentials.get()
de type otp (OTPCredential), où transport inclut sms, le site Web ;
attendra qu'un SMS conforme aux codes à usage unique liés à l'origine
et accordé l'accès
par l'utilisateur. Une fois l'OTP
transmis en JavaScript,
le site web peut l'utiliser dans un formulaire ou
le publier directement sur le serveur.
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 et collez l'extrait suivant. (Marque
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 prise le Unsplash.