Best practice per il modulo OTP per gli SMS

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

Eiji Kitamura

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 specifici. 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"" in azione.

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);
L'API WebOTP in azione.

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.