Scopri come ottimizzare il modulo per l'OTP via SMS e migliorare l'esperienza utente.
Chiedere a un utente di fornire l'OTP (password monouso) inviata tramite SMS è un modo comune per confermare il numero di telefono di un utente. Esistono alcuni casi d'uso per le OTP via SMS:
- Autenticazione a due fattori. Oltre al nome utente e alla password, l'OTP via SMS può essere impiegata come un indicatore affidabile che l'account è di proprietà della persona che ha ricevuto l'OTP via SMS.
- Verifica del numero di telefono. Alcuni servizi utilizzano un numero di telefono come identificatore principale dell'utente. In questi servizi, gli utenti possono inserire il proprio numero di telefono e la OTP ricevuta via SMS per dimostrare la propria identità. A volte viene combinato con un PIN per costituire un'autenticazione a due fattori.
- Recupero dell'account. Quando un utente perde l'accesso al proprio account, deve esserci un modo per recuperarlo. L'invio di un'email all'indirizzo email registrato o di un'OTP via SMS al numero di telefono sono metodi comuni di recupero dell'account.
- Conferma del pagamento Nei sistemi di pagamento, alcune banche o emittenti di carte di credito richiedono un'autenticazione aggiuntiva al pagatore per motivi di sicurezza. A questo scopo viene comunemente utilizzata l'OTP via SMS.
Questo post illustra le best practice per creare un modulo per l'OTP via SMS per i casi d'uso sopra indicati.
Elenco di controllo
Per offrire la migliore esperienza utente con l'OTP via SMS, segui questi passaggi:
- Utilizza l'elemento
<input>con:type="text"inputmode="numeric"autocomplete="one-time-code"
- Utilizza
@BOUND_DOMAIN #OTP_CODEcome ultima riga del messaggio SMS con il codice OTP. - Utilizza l'API WebOTP.
Utilizzare l'elemento <input>
L'utilizzo di un modulo con un elemento <input> è la best practice più importante che puoi seguire perché funziona in tutti i browser. Anche se altri suggerimenti di questo post non funzionano in alcuni browser, l'utente potrà comunque inserire e inviare manualmente l'OTP.
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
Di seguito sono riportate alcune idee per garantire che un campo di immissione ottenga il meglio dalla funzionalità del browser.
type="text"
Poiché le OTP sono in genere numeri di cinque o sei cifre, l'utilizzo di type="number" per un campo di immissione potrebbe sembrare intuitivo perché la tastiera del dispositivo mobile diventa solo numerica. Questa operazione non è consigliata perché il browser si aspetta che un campo di immissione sia un numero conteggiabile anziché una sequenza di più numeri, il che può causare un comportamento imprevisto. L'utilizzo di type="number" fa visualizzare i pulsanti su e giù accanto al campo di immissione. Premendo questi pulsanti, il numero viene aumentato o diminuito e gli zeri precedenti potrebbero essere rimossi.
Utilizza invece type="text". In questo modo la tastiera del dispositivo mobile non diventerà solo numerica, ma non importa perché il prossimo suggerimento sull'utilizzo di inputmode="numeric" lo farà.
inputmode="numeric"
Usa inputmode="numeric" per impostare la tastiera del dispositivo mobile solo su numeri.
Alcuni siti web utilizzano type="tel" per i campi di immissione delle OTP, poiché consente anche di impostare la tastiera del dispositivo mobile solo su numeri (inclusi * e #) quando è attivata. Questo hack è stato utilizzato in passato quando inputmode="numeric"
non era ampiamente supportato. Da quando Firefox ha iniziato a supportare
inputmode="numeric",
non è necessario utilizzare l'hack type="tel" semanticamente errato.
autocomplete="one-time-code"
L'attributo autocomplete consente agli sviluppatori di specificare l'autorizzazione di cui il browser deve disporre per fornire assistenza per il completamento automatico e lo informa sul tipo di informazioni previste nel campo.
Con autocomplete="one-time-code", ogni volta che un utente riceve un messaggio SMS con un modulo aperto, il sistema operativo analizzerà in modo euristico l'OTP nell'SMS e la tastiera suggerirà all'utente di inserire l'OTP. Funziona solo su Safari 12 e versioni successive su iOS, iPadOS e macOS, ma ti consigliamo vivamente di utilizzarlo, perché è un modo semplice per migliorare l'esperienza con le OTP via SMS su queste piattaforme.
autocomplete="one-time-code" migliora l'esperienza utente, ma puoi fare di più assicurandoti che il messaggio SMS sia conforme al formato del messaggio vincolato all'origine.
Formattare il testo dell'SMS
Migliora l'esperienza utente di inserimento di un'OTP allineandoti alla specifica relativa ai codici una tantum legati all'origine inviati tramite SMS.
La regola di formato è semplice: termina il messaggio SMS con il dominio del destinatario precedendolo con @ e l'OTP precedendolo con #.
Ad esempio:
Your OTP is 123456
@web-otp.glitch.me #123456
L'utilizzo di un formato standard per i messaggi OTP semplifica e rende più affidabile l'estrazione dei codici. L'associazione dei codici OTP ai siti web rende più difficile ingannare gli utenti e far loro fornire un codice a siti dannosi.
L'utilizzo di questo formato offre alcuni vantaggi:
- L'OTP verrà associata al dominio. Se l'utente si trova in domini diversi da quello specificato nel messaggio SMS, il suggerimento per l'OTP non viene visualizzato. In questo modo si riduce anche il rischio di attacchi di phishing e potenziali furti di account.
- Ora il browser potrà estrarre in modo affidabile l'OTP senza fare affidamento su metodi di individuazione di problemi misteriosi e inaffidabili.
Quando un sito web utilizza autocomplete="one-time-code", Safari con iOS 14 o versioni successive suggerirà l'OTP seguendo le regole riportate sopra.
Questo formato di messaggio SMS è vantaggioso anche per i browser diversi da Safari. Chrome, Opera e Vivaldi su Android supportano anche la regola dei codici una tantum legati all'origine con l'API WebOTP, anche se non tramite autocomplete="one-time-code".
Utilizzare l'API WebOTP
L'API WebOTP fornisce l'accesso all'OTP ricevuta in un messaggio SMS. Se chiami
navigator.credentials.get()
con il tipo otp (OTPCredential) in cui transport include sms, il sito web
attenderà che venga inviato un SMS conforme ai codici una tantum legati all'origine e che l'utente acceda. Una volta passata l'OTP a JavaScript, il sito web può utilizzarla in un modulo o inviarla tramite POST direttamente al server.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
Scopri come utilizzare l'API WebOTP in dettaglio in Verificare i numeri di telefono sul web con l'API WebOTP o copia e incolla il seguente snippet. Assicurati che l'elemento <form> abbia attributi action e method impostati correttamente.
// 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);
});
});
}
Foto di Jason Leung su Unsplash.