Scopri come ottimizzare il modulo per la OTP via SMS e migliorare l'esperienza utente.
Chiedere a un utente di fornire la OTP (password monouso) recapitata tramite SMS è una pratica comune per confermare il numero di telefono di un utente. Esistono alcuni casi d'uso per la OTP via SMS:
- Autenticazione a due fattori. Oltre al nome utente e alla password, l'OTP per SMS può essere utilizzato per indicare chiaramente che l'account è di proprietà della persona che ha ricevuto il OTP via SMS.
- Verifica del numero di telefono. Alcuni servizi utilizzano un numero di telefono come identificatore principale. In questi servizi, gli utenti possono inserire il proprio numero di telefono OTP ricevuta tramite SMS per dimostrare la sua identità. A volte è combinato con un PIN l'autenticazione a due fattori.
- Recupero dell'account. Quando un utente perde l'accesso al proprio account, devono in modo da poterlo recuperare. L'invio di un'email all'indirizzo email registrato oppure una OTP via SMS inviata al numero di telefono sono metodi comuni per il recupero dell'account.
- Conferma di pagamento Nei sistemi di pagamento, alcune banche o carte di credito gli emittenti richiedono un'autenticazione aggiuntiva al pagatore per motivi di sicurezza. La OTP via SMS viene comunemente utilizzata a questo scopo.
Questo post illustra le best practice per creare un modulo OTP via SMS da utilizzare in precedenza d'uso diversi.
Elenco di controllo
Per offrire la migliore esperienza utente con la OTP via SMS:
- Utilizza l'elemento
<input>
con:type="text"
inputmode="numeric"
autocomplete="one-time-code"
- Usa
@BOUND_DOMAIN #OTP_CODE
come ultima riga dell'SMS OTP. - Utilizza l'API WebOTP.
Utilizzare l'elemento <input>
L'utilizzo di un modulo con un elemento <input>
è la best practice più importante che
può seguire perché funziona su tutti i browser. Anche se altri suggerimenti
questo post non funziona 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 assicurarsi che un campo di immissione sfrutti al meglio le funzionalità del browser.
type="text"
Poiché le OTP sono di solito numeri a cinque o sei cifre, utilizzando
type="number"
per un campo di immissione può sembrare intuitivo perché cambia il tipo di dispositivo mobile
da tastiera a numeri. Questa opzione è sconsigliata perché il browser prevede
campo di immissione in modo che sia un numero contabile piuttosto che una sequenza di più numeri,
che possono causare comportamenti imprevisti. L'uso di type="number"
aumenta e diminuisce
pulsanti da visualizzare accanto al campo di immissione; premendo questi pulsanti
aumenta o diminuisce il numero e possono rimuovere gli zeri precedenti.
Usa invece il criterio type="text"
. La tastiera del dispositivo mobile non verrà convertita in numeri
ma va bene così perché il prossimo suggerimento per usare inputmode="numeric"
quel lavoro.
inputmode="numeric"
Utilizza inputmode="numeric"
per usare la tastiera del dispositivo mobile
solo numeri.
Alcuni siti web utilizzano type="tel"
per i campi di immissione OTP perché
trasforma la tastiera del dispositivo mobile solo in numeri (inclusi *
e #
) quando
concentrato. Questa compromissione è stata utilizzata in passato quando inputmode="numeric"
non era ampiamente supportato. Da quando Firefox ha iniziato a supportare
inputmode="numeric"
,
non è necessario usare l'hack di type="tel"
semanticamente errato.
autocomplete="one-time-code"
autocomplete
consente agli sviluppatori di specificare
l'autorizzazione a cui il browser
deve fornire assistenza per il completamento automatico e informa il browser della
tipo di informazioni previste nel campo.
Con autocomplete="one-time-code"
, ogni volta che un utente riceve un SMS durante una
è aperto, il sistema operativo analizzerà l'OTP nell'SMS in modo euristico
la tastiera suggerirà l'OTP che l'utente dovrà inserire. Funziona solo su Safari 12 e
in seguito su iOS, iPadOS e macOS, ma consigliamo vivamente di usarlo, dato che si tratta di
un modo semplice per migliorare l'esperienza OTP via SMS su quelle piattaforme.
autocomplete="one-time-code"
migliora l'esperienza utente, ma c'è molto di più
che puoi eseguire verificando che il messaggio SMS sia conforme a quello associato all'origine
standard.
Formattare il testo dell'SMS
Migliora l'esperienza utente di inserimento di una OTP allineandoti con i codici monouso associati all'origine consegnati tramite SMS e la specifica del prodotto.
La regola di formattazione è semplice: completa il messaggio SMS con il dominio del destinatario
preceduta da @
e l'OTP preceduta da #
.
Ad esempio:
Your OTP is 123456
@web-otp.glitch.me #123456
Se utilizzi un formato standard per i messaggi OTP, l'estrazione di codice in modo più semplice e affidabile. L'associazione dei codici OTP a rende più difficile ingannare gli utenti inducendoli a fornire un codice a siti dannosi.
L'utilizzo di questo formato offre due vantaggi:
- L'OTP verrà associata al dominio. Se l'utente si trova in domini diversi da quella specificata nell'SMS, il suggerimento OTP non verrà visualizzato. In questo modo ridurrai anche il rischio di attacchi di phishing e di potenziali compromissioni dell'account.
- Il browser sarà ora in grado di estrarre in modo affidabile l’OTP senza dover dipendere euristica instabile e misteriosa.
Quando un sito web utilizza autocomplete="one-time-code"
, Safari con iOS 14 o versioni successive
ti suggerirà l'OTP seguendo le regole sopra indicate.
Questo formato SMS è inoltre vantaggioso 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 alla OTP
ricevuto in un SMS. Chiamando
navigator.credentials.get()
con tipo otp
(OTPCredential
), dove transport
include sms
, il sito web
attenderà che venga inviato un SMS conforme ai codici monouso legati all'origine
fornito e concesso l'accesso da parte dell'utente. Una volta passata l'OTP in JavaScript,
il sito web può utilizzarlo in un modulo o PUBBLICArlo direttamente sul server.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
Scopri in dettaglio come utilizzare l'API WebOTP in Verificare i numeri di telefono sul web
con l'API WebOTP oppure copia e incolla il seguente snippet. (Rendi
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 Rimuovi schermo.