Verifica i numeri di telefono sul web con l'API WebOTP

Aiuta gli utenti con OTP ricevute tramite SMS

Eiji Kitamura

Che cos'è l'API WebOTP?

Al giorno d'oggi la maggior parte delle persone nel mondo possiede un dispositivo mobile e gli sviluppatori che in genere utilizzano i numeri di telefono come identificatori per gli utenti dei loro servizi.

Esistono diversi modi per verificare i numeri di telefono, ma viene generata automaticamente una chiamata La password monouso (OTP) inviata tramite SMS è una delle più comuni. Invio del codice in corso... al server dello sviluppatore dimostri di avere il controllo del numero di telefono.

Questa idea è già stata implementata in molti scenari per raggiungere i seguenti obiettivi:

  • Numero di telefono come identificatore dell'utente. Quando ti registri per un nuovo alcuni siti web chiedono un numero di telefono anziché un indirizzo email e come identificatore dell'account.
  • Verifica in due passaggi. Quando accedi, un sito web chiede un codice monouso inviati tramite SMS oltre a una password o ad altri fattori di conoscenza per extra sicurezza.
  • Conferma del pagamento. Quando un utente effettua un pagamento, chiedendo un il codice monouso inviato tramite SMS può aiutare a verificare l'intento della persona.

Il processo attuale crea attriti per gli utenti. Ricerca di una OTP tramite SMS di questo messaggio, quindi copiarlo e incollarlo nel modulo è complicato, tassi di conversione nei percorsi critici degli utenti. L'adozione di questa strategia è da tempo per il web da parte di molti dei più grandi sviluppatori globali. Android dispone di un'API che fa esattamente questo. Anche le altre iOS e Safari.

L'API WebOTP consente alla tua app di ricevere messaggi con formattazione speciale associati a il dominio dell'app. che ti consente di ricevere in modo programmatico una OTP da un SMS e verificare più facilmente un numero di telefono per l'utente.

Guarda come funziona

Supponiamo che un utente voglia verificare il proprio numero di telefono con un sito web. Il sito web invia un SMS all'utente tramite SMS e l'utente inserisce l'OTP dal per verificare la proprietà del numero di telefono.

Con l'API WebOTP, questi passaggi sono semplici: basta un tocco per l'utente, dimostrato nel video. Quando arriva l'SMS, viene visualizzato un riquadro inferiore e chiede all'utente di verificare il proprio numero di telefono. Dopo aver fatto clic sul pulsante Verifica, nel riquadro inferiore, il browser incolla la OTP nel modulo e viene inviato senza che l'utente debba premere Continua.

L'intero processo è illustrato nel diagramma nell'immagine seguente.

. Diagramma dell'API WebOTP

Prova anche la demo. Non richiede il tuo numero di telefono o inviare un SMS al tuo dispositivo, ma puoi inviarne uno da su un altro dispositivo copiando il testo visualizzato nella demo. Funziona perché non importa chi sia il mittente quando si utilizza l'API WebOTP.

  1. Vai a https://web-otp.glitch.me in Chrome 84 oppure in un secondo momento su un dispositivo Android.
  2. Invia al tuo telefono il seguente SMS da un altro telefono.
Your OTP is: 123456.

@web-otp.glitch.me #12345

Hai ricevuto l'SMS e ti è stato chiesto di inserire il codice nell'area di immissione? Ecco come funziona l'API WebOTP per gli utenti.

L'utilizzo dell'API WebOTP è costituito da tre parti:

  • Un tag <input> annotato correttamente
  • JavaScript nell'app web
  • Testo formattato per il messaggio inviato tramite SMS.

Tratterò prima il tag <input>.

Annota un tag <input>

WebOTP funziona senza annotazioni HTML, ma per più browser compatibilità, ti consiglio vivamente di aggiungere autocomplete="one-time-code" Il tag <input> nel quale prevedi che l'utente inserisca una OTP.

In questo modo, Safari 14 o versioni successive può suggerire all'utente di compilare automaticamente <input> con una OTP quando ricevono un SMS nel formato descritto in Formattare il messaggio SMS, anche se non supporta WebOTP.

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

Utilizzare l'API WebOTP

Poiché WebOTP è semplice, è sufficiente copiare e incollare il seguente codice un lavoro. Ti illustrerò comunque quello che succede.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Rilevamento delle caratteristiche

Il rilevamento delle caratteristiche è lo stesso di molte altre API. In ascolto di L'evento DOMContentLoaded attenderà che l'albero DOM sia pronto per la query.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

Elabora l'OTP

L'API WebOTP stessa è abbastanza semplice. Utilizza le funzionalità di navigator.credentials.get() per trovare l'OTP. WebOTP aggiunge una nuova opzione otp a questo metodo. Ha solo una proprietà: transport, il cui valore deve essere un array con la stringa 'sms'.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

Questo attiva il flusso di autorizzazioni del browser quando arriva un messaggio SMS. Se l'autorizzazione è concesso, la promessa restituita si risolve con un oggetto OTPCredential.

Contenuto dell'oggetto OTPCredential ottenuto

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

Dopodiché, passa il valore dell'OTP al campo <input>. Inviare il modulo direttamente eliminerà il passaggio che richiede all'utente di toccare un pulsante.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

Interruzione del messaggio

Se l'utente inserisce manualmente una OTP e invia il modulo, puoi annullare la Chiamata get() utilizzando un'istanza AbortController nell'oggetto options.

JavaScript .

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

Formattare il messaggio SMS

L'API stessa dovrebbe essere sufficientemente semplice, ma devi: conosci prima di usarlo. Il messaggio deve essere inviato dopo il giorno navigator.credentials.get() viene chiamato e deve essere ricevuto sul dispositivo dove è stato chiamato get(). Infine, il messaggio deve rispettare quanto segue formattazione:

  • Il messaggio inizia con un testo (facoltativo) leggibile da una persona che contiene un numero di quattro o dieci stringa alfanumerica di caratteri con almeno un numero che lascia l'ultima riga per l'URL e l'OTP.
  • La parte del dominio dell'URL del sito web che ha richiamato l'API deve essere preceduta entro il giorno @.
  • L'URL deve contenere il simbolo del cancelletto ("#") seguito dalla OTP.

Ad esempio:

Your OTP is: 123456.

@www.example.com #123456

Ecco alcuni esempi non validi:

Esempio di testo SMS non valido Perché non funziona
Here is your code for @example.com #123456 @ deve essere il primo carattere dell'ultima riga.
Your code for @example.com is #123456 @ deve essere il primo carattere dell'ultima riga.
Your verification code is 123456

@example.com\t#123456		 È previsto un singolo spazio tra @host e #code.
Your verification code is 123456

@example.com  #123456		 È previsto un singolo spazio tra @host e #code.
Your verification code is 123456

@ftp://example.com #123456		 Non è possibile includere lo schema dell'URL.
Your verification code is 123456

@https://example.com #123456		 Non è possibile includere lo schema dell'URL.
Your verification code is 123456

@example.com:8080 #123456		 La porta non può essere inclusa.
Your verification code is 123456

@example.com/foobar #123456		 Impossibile includere il percorso.
Your verification code is 123456

@example .com #123456		 Nessuno spazio vuoto nel dominio.
Your verification code is 123456

@domain-forbiden-chars-#%/:<>?@[] #123456		 Nessun carattere vietato nel dominio.
@example.com #123456

Mambo Jumbo		 @host e #code dovrebbero essere l'ultima riga.
@example.com #123456

App hash #oudf08lkjsdf834		 @host e #code dovrebbero essere l'ultima riga.
Your verification code is 123456

@example.com 123456		 # mancante.
Your verification code is 123456

example.com #123456		 @ mancante.
Hi mom, did you receive my last text @ e # mancanti.

Demo

Prova vari messaggi con la demo: https://web-otp.glitch.me

Puoi anche creare un fork e creare la tua versione: https://glitch.com/edit/#!/web-otp.

Utilizza WebOTP da un iframe multiorigine

L'inserimento di una OTP via SMS a un iframe multiorigine viene generalmente utilizzato per i pagamenti la conferma, specialmente con 3D Secure. Disporre del formato comune da supportare iframe multiorigine, l'API WebOTP fornisce OTP associate a origini nidificate. Ad esempio:

  • Un utente visita shop.example per acquistare un paio di scarpe con una carta di credito.
  • Dopo aver inserito il numero della carta di credito, il fornitore di servizi di pagamento integrato mostrerà modulo da bank.example all'interno di un iframe che chiede all'utente di verificare la sua numero di telefono per un pagamento rapido.
  • bank.example invia all'utente un SMS contenente una OTP in modo che possa inseriscilo per verificare la sua identità.

Per utilizzare l'API WebOTP da un iframe multiorigine, devi fare due cose:

  • Annota sia l'origine del frame superiore sia l'origine dell'iframe nel testo dell'SMS .
  • Configura le norme relative alle autorizzazioni per consentire all'iframe multiorigine di ricevere OTP direttamente dall'utente.
di Gemini Advanced.
l'API WebOTP all'interno di un iframe in azione.

Puoi provare la demo all'indirizzo https://web-otp-iframe-demo.stackblitz.io.

Annota le origini associate nel messaggio SMS

Quando l'API WebOTP viene richiamata dall'interno di un iframe, il messaggio di testo SMS deve Includono l'origine del frame superiore preceduta da @ seguita dalla OTP preceduta da # e l'origine dell'iframe, preceduta da @ nell'ultima riga.

Your verification code is 123456

@shop.example #123456 @bank.exmple

Configura criterio di autorizzazione

Per utilizzare WebOTP in un iframe multiorigine, l'incorporamento deve concedere l'accesso a questo API mediante i criteri di autorizzazione delle credenziali otp per evitare comportamento degli utenti. In generale, ci sono due modi per raggiungere questo obiettivo:

tramite un'intestazione HTTP:

Permissions-Policy: otp-credentials=(self "https://bank.example")

tramite l'attributo allow iframe:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Consulta altri esempi su come specificare un criterio di autorizzazione .

Utilizzare WebOTP su computer

In Chrome, WebOTP supporta l'ascolto di SMS ricevuti su altri dispositivi per aiutare gli utenti a completare la verifica del numero di telefono su computer.

API WebOTP su computer.

Questa funzionalità richiede che l'utente acceda allo stesso Account Google su entrambi Chrome per computer desktop e Chrome per Android.

Gli sviluppatori devono solo implementare l'API WebOTP sul proprio sito web esattamente come avviene sul sito web per dispositivi mobili, ma non esistono trucchi speciali obbligatorio.

Per saperne di più, vedi Verificare un numero di telefono da computer utilizzando l'API WebOTP.

Domande frequenti

La finestra di dialogo non viene visualizzata anche se invio un messaggio formattato correttamente. Che sta succedendo?

Quando testi l'API, è necessario fare un paio di avvertenze:

  • Se il numero di telefono del mittente è incluso nell'elenco contatti del destinatario, L'API non verrà attivata a causa della progettazione dell'API SMS User Consent sottostante.
  • Se utilizzi un profilo di lavoro sul tuo dispositivo Android e WebOTP non funziona, prova a installare e utilizzare Chrome sul tuo profilo personale (ovvero lo stesso profilo in cui ricevi gli SMS).

Ricontrolla il formato per verificare che il formato dell'SMS sia corretto.

Questa API è compatibile con browser diversi?

Chromium e WebKit hanno concordato il formato dei messaggi SMS e Apple ha annunciato il supporto di Safari per questo formato a partire da iOS 14 e macOS Big Sur. Safari non supporta l'API WebOTP JavaScript, tuttavia è possibile Aggiunta di un'annotazione input con autocomplete=["one-time-code"], impostazione predefinita la tastiera suggerisce automaticamente di inserire la OTP se il messaggio SMS è conforme con il formato.

È sicuro utilizzare gli SMS come metodo di autenticazione?

Mentre la OTP via SMS è utile per verificare un numero di telefono quando il numero viene fornita, la verifica del numero di telefono tramite SMS deve essere utilizzata con attenzione per riautenticazione poiché i numeri di telefono possono essere compromessi e riciclati dagli operatori. WebOTP è un comodo meccanismo di riautenticazione e recupero, ma i servizi dovrebbero combinarla con altri fattori, ad esempio una sfida di conoscenze, o utilizzare API Web Authentication per l'autenticazione avanzata.

Dove posso segnalare i bug nell'implementazione di Chrome?

Hai trovato un bug nell'implementazione di Chrome?

  • Segnala un bug a https://new.crbug.com. Includi il maggior numero di dettagli possibile, semplici istruzioni per la riproduzione e imposta Componenti su Blink>WebOTP.

Come posso aiutarti a questa funzionalità?

Intendi utilizzare l'API WebOTP? Il tuo supporto pubblico ci aiuta a dare la priorità funzionalità di sicurezza e mostra ad altri fornitori di browser quanto sia fondamentale supportarli. Invia un tweet a @ChromiumDev utilizzando l'hashtag #WebOTP: e facci sapere dove e come lo utilizzi.

Risorse