Best practice per il modulo OTP per gli SMS

Scopri come ottimizzare il modulo OTP per gli SMS e migliorare l'esperienza utente.

Un modo comune per confermare il numero di telefono dell'utente è chiedere a un utente di fornire la password unica (OTP) inviata tramite SMS. Esistono alcuni casi d'uso per la OTP via SMS:

• Autenticazione a due fattori. Oltre al nome utente e alla password, è possibile utilizzare la OTP tramite SMS per indicare chiaramente che l'account è di proprietà della persona che ha ricevuto la OTP tramite 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 loro identità. A volte viene 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 proprio indirizzo email registrato o di una OTP tramite SMS al suo 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. La OTP per SMS viene comunemente utilizzata a questo scopo.

Questo post spiega le best practice per la creazione di un modulo OTP per SMS per i casi d'uso precedenti.

Elenco di controllo

Per offrire la migliore esperienza utente con la OTP via SMS, procedi nel seguente modo:

• Utilizza l'elemento <input> con:
  • type="text"
  • inputmode="numeric"
  • autocomplete="one-time-code"
• Usa @BOUND_DOMAIN #OTP_CODE come 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 provenienti da questo post non funzionano in un browser, l'utente potrà comunque inserire e inviare la 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 in genere sono numeri a cinque o sei cifre, l'utilizzo di type="number" per un campo di immissione potrebbe sembrare intuitivo perché la tastiera del dispositivo mobile viene impostata solo su numeri. Questa opzione è sconsigliata perché il browser prevede che un campo di input sia un numero numerabile anziché una sequenza di più numeri, il che può causare comportamenti imprevisti. L'uso di type="number" consente di visualizzare i 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 si trasforma in soli numeri, ma va bene così, perché il prossimo suggerimento per l'uso di inputmode="numeric" funziona in questo modo.

inputmode="numeric"

Utilizza inputmode="numeric" per impostare la tastiera sul dispositivo mobile solo con numeri.

Alcuni siti web utilizzano type="tel" per i campi di immissione OTP perché, quando l'opzione è attiva, la tastiera del dispositivo mobile viene convertita solo in numeri (inclusi * e #). Questo hacker è stato utilizzato 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 l'autorizzazione concessa al browser per fornire assistenza per il completamento automatico e informa il browser del tipo di informazioni previste nel campo.

Con autocomplete="one-time-code", ogni volta che un utente riceve un messaggio SMS mentre un modulo è aperto, il sistema operativo analizzerà l'OTP nell'SMS in modo euristico e la tastiera suggerirà l'OTP da inserire. Funziona solo su Safari 12 e versioni successive su iOS, iPadOS e macOS, ma ti consigliamo vivamente di usarlo perché è un modo semplice per migliorare l'esperienza OTP per gli 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 la specifica ai codici una tantum associati all'origine inviati tramite SMS.

La regola di formattazione è semplice: completa il messaggio SMS con il dominio del destinatario preceduto da @ e la OTP preceduta da #.

Ad esempio:

Your OTP is 123456

@web-otp.glitch.me #123456

L'utilizzo di un formato standard per i messaggi OTP rende l'estrazione dei codici da questi messaggi più semplice e affidabile. Associare i codici OTP ai siti web rende più difficile indurre con l'inganno gli utenti a fornire un codice a siti dannosi.

L'utilizzo di questo formato offre due vantaggi:

• La OTP verrà associata 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 violazioni 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 è vantaggioso anche per i browser diversi da Safari. Chrome, Opera e Vivaldi su Android supportano anche la regola dei codici monouso associati 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 ricevuta in un messaggio SMS. Se chiami navigator.credentials.get() con il tipo otp (OTPCredential) dove transport include sms, il sito web attende che venga consegnato un SMS conforme ai codici monouso associati all'origine per essere recapitato e concesso l'accesso da parte dell'utente. Una volta passata l'OTP a JavaScript, il sito web può utilizzarla in un modulo o POSTA direttamente al 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. 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.