Scopri come ottimizzare il modulo OTP tramite SMS e migliorare l'esperienza utente.
Chiedere a un utente di fornire la OTP (password unica) inviata tramite SMS è un modo comune per confermare il numero di telefono dell'utente. Esistono alcuni casi d'uso per l'OTP SMS:
- Autenticazione a due fattori. Oltre al nome utente e alla password, l'OTP SMS può essere utilizzata per segnalare in modo chiaro che l'account è di proprietà della persona che ha ricevuto l'OTP 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 l'OTP ricevuto tramite SMS per dimostrare la propria identità. A volte è combinata con un PIN per costituire un'autenticazione a due fattori.
- Recupero dell'account. Quando un utente perde l'accesso al proprio account, deve esistere un modo per recuperarlo. L'invio di un'email al loro indirizzo email registrato o di una OTP via SMS al loro numero di telefono sono metodi comuni di recupero dell'account.
- Conferma di pagamento Nei sistemi di pagamento, alcune banche o emittenti di carte di credito richiedono un'autenticazione aggiuntiva al pagatore per motivi di sicurezza. L'OTP SMS viene comunemente utilizzata a questo scopo.
Questo post illustra le best practice per creare un modulo OTP SMS per i casi d'uso precedenti.
Elenco di controllo
Per offrire un'esperienza utente ottimale con l'OTP SMS, procedi nel seguente modo:
- Utilizza l'elemento
<input>con:type="text"inputmode="numeric"autocomplete="one-time-code"
- Usa
@BOUND_DOMAIN #OTP_CODEcome ultima riga del messaggio SMS OTP. - Utilizza l'API WebOTP.
Utilizza 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 l'OTP manualmente.
<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 sfrutti al meglio le 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 mobile viene impostata solo su numeri. Questo non è consigliato perché il browser si aspetta che un campo di input sia un numero conteggiabile anziché una sequenza di più numeri, il che può causare comportamenti imprevisti. L'uso di type="number" comporta la visualizzazione dei pulsanti su e giù accanto al campo di immissione; la pressione di questi pulsanti aumenta o diminuisce il numero e potrebbe rimuovere gli zeri precedenti.
Usa invece il criterio type="text". La tastiera del dispositivo mobile non verrà convertita in numeri,
ma va bene, perché il prossimo suggerimento per l'uso di inputmode="numeric"
lo fa.
inputmode="numeric"
Utilizza inputmode="numeric" per impostare la tastiera per dispositivi mobili sui soli numeri.
Alcuni siti web utilizzano type="tel" per i campi di immissione OTP poiché, quando attivo, la tastiera mobile viene impostata solo su numeri (inclusi * e #). Questa compromissione è stata utilizzata in passato quando inputmode="numeric"
non era ampiamente supportato. Da quando Firefox ha iniziato a supportare inputmode="numeric", non è necessario utilizzare la compromissione type="tel" semanticamente errata.
autocomplete="one-time-code"
L'attributo autocomplete consente agli sviluppatori di specificare quale autorizzazione dispone del browser per fornire assistenza per il completamento automatico e indica al browser il tipo di informazioni previste nel campo.
Con autocomplete="one-time-code" ogni volta che un utente riceve un SMS mentre è aperto un modulo, il sistema operativo analizzerà l'OTP nell'SMS in modo euristico e la tastiera suggerirà l'OTP che l'utente dovrà inserire. Funziona solo su Safari 12 e versioni successive su iOS, iPadOS e macOS, ma consigliamo vivamente di utilizzarlo, perché è un modo semplice per migliorare l'esperienza OTP tramite SMS su queste piattaforme.
autocomplete="one-time-code" migliora l'esperienza utente, ma puoi fare di più assicurando che il messaggio SMS sia conforme al formato del messaggio associato all'origine.
Formatta il testo dell'SMS
Migliora l'esperienza utente nell'inserimento di una OTP allineando il tuo annuncio ai codici monouso legati all'origine inviati tramite SMS.
La regola di formattazione è semplice: termina l'SMS con il dominio del destinatario
che precede @ e l'OTP preceduto da #.
Ad esempio:
Your OTP is 123456
@web-otp.glitch.me #123456
L'uso di un formato standard per i messaggi OTP rende l'estrazione dei codici più semplice e affidabile. Se associ i codici OTP ai siti web, è più difficile indurre con l'inganno gli utenti a fornire un codice a siti dannosi.
L'utilizzo di questo formato offre due vantaggi:
- L'OTP verrà associato al dominio. Se l'utente si trova in domini diversi da quello specificato nel messaggio SMS, il suggerimento OTP non verrà visualizzato. Inoltre, riduce il rischio di attacchi di phishing e potenziali compromissioni dell'account.
- Il browser sarà ora in grado di estrarre in modo affidabile l'OTP senza dipendere da euristiche misteriose e instabili.
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 messaggi SMS è utile anche per i browser diversi da Safari. Chrome, Opera e Vivaldi su Android supportano anche la regola dei codici monouso legati all'origine con l'API WebOTP, ma non tramite autocomplete="one-time-code".
Utilizzare l'API WebOTP
L'API WebOTP consente di accedere all'OTP
ricevuto in un messaggio SMS. Se chiami navigator.credentials.get() con il tipo otp (OTPCredential), dove transport include sms, il sito web attenderà che un SMS conforme ai codici una tantum associati all'origine venga consegnato e concesso all'utente l'accesso. Una volta passata l'OTP a JavaScript, il sito web può utilizzarla in un modulo o PUBBLICArla direttamente sul server.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
Per scoprire come utilizzare l'API WebOTP in dettaglio, consulta Verificare i numeri di telefono sul web con l'API WebOTP oppure copia e incolla il seguente snippet. (Assicurati
che gli attributi action e method dell'elemento <form> siano 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.