Verificare un numero di telefono sul computer utilizzando l'API WebOTP

A partire da Chrome 93, i siti web possono verificare i numeri di telefono da Chrome per computer.

Yi Gu

Eiji Kitamura

WebOTP aiuta gli utenti a inserire un codice di verifica del numero di telefono su un sito web mobile con un solo tocco senza dover cambiare app. Chrome 93 estende questa funzionalità anche ai computer. Per saperne di più, continua a leggere quanto segue.

Introduzione

Le OTP via SMS (password monouso) vengono comunemente utilizzate per verificare un numero di telefono, ad esempio come secondo passaggio per l'autenticazione o per verificare i pagamenti sul web. Tuttavia, l'intero flusso di passaggio dal computer al dispositivo mobile, l'apertura dell'app SMS, la memorizzazione e l'inserimento dell'OTP sul sito web originale di nuovo sul computer aumenta le difficoltà. In questo modo è facile commettere errori ed è vulnerabile agli attacchi di phishing.

L'API WebOTP consente ai siti web di ottenere in modo programmatico la password monouso da un messaggio SMS e compilare automaticamente il modulo per gli utenti con un solo tocco senza cambiare app. L'SMS ha un formato specifico ed è associato all'origine, pertanto riduce il rischio che i siti web di phishing rubino anche l'OTP.

Un caso d'uso che non è ancora supportato in WebOTP è il targeting delle richieste di verifica del numero di telefono da un dispositivo di desktop remoto o un laptop. L'API funziona solo su dispositivi con funzionalità di telefonia. Ora l'API supporta l'ascolto degli SMS ricevuti su altri dispositivi per aiutare gli utenti a completare la verifica del numero di telefono su computer in Chrome 93.

Prova

Prerequisiti

• Un computer desktop o un laptop (Windows, Mac, Linux o ChromeOS).
• Uno smartphone Android con Google Play Services 20.30.12 o versioni successive.
• Chrome 93 o versioni successive, sia su computer o laptop che su dispositivi mobili. Chrome 93 Beta è disponibile da fine luglio 2021.
• Devi accedere allo stesso Account Google sia su Chrome per computer sia su Chrome per il mobile. Ad esempio, tramite https://myaccount.google.com/ o https://mail.google.com. Non è necessario attivare la sincronizzazione.
• Sul dispositivo Android, devi accedere ad Android tramite "Impostazioni->Google".
• Chrome 93 deve essere il browser predefinito sul dispositivo Android.
• Chrome 93 deve essere in esecuzione in primo piano o in background sul dispositivo Android.

Demo

Per provare questo flusso di verifica del numero di telefono senza problemi su computer, segui questi passaggi:

1. Vai alla pagina https://web-otp-demo.glitch.me/ su computer. Fai clic sul pulsante Verifica.
2. Invia il messaggio esatto visualizzato sullo schermo da un secondo smartphone al dispositivo Android.
3. Quando l'SMS viene inviato al dispositivo Android, viene visualizzata una finestra di dialogo che ti chiede se vuoi verificare il numero di telefono sul computer. Premi Invia per approvare.
4. Sul computer, il codice di verifica inviato al dispositivo Android dovrebbe essere inserito automaticamente nel campo di immissione.

Come funziona l'API WebOTP

Vediamo come funziona l'API WebOTP:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

Il messaggio SMS deve essere formattato con i codici una tantum legati all'origine.

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

Tieni presente che l'ultima riga contiene l'origine da associare preceduta da un @ followed by the OTP preceded by a #.

Quando arriva il messaggio, viene visualizzata una barra delle informazioni che chiede all'utente di verificare il proprio numero di telefono. Dopo che l'utente fa clic sul pulsante Verify, il browser inoltra automaticamente l'OTP al sito e risolve il navigator.credentials.get(). Il sito web può quindi estrarre l'OTP e completare la procedura di verifica.

Scopri di più su come verificare i numeri di telefono sul web con l'API WebOTP.

Come utilizzare l'API WebOTP su computer

La verifica del numero di telefono tramite SMS è ampiamente utilizzata e indipendente dalla piattaforma. Tutti i casi d'uso su dispositivi mobili devono essere applicabili ai computer.

L'utilizzo dell'API WebOTP su computer è lo stesso che su dispositivo mobile, pertanto i siti web possono implementare lo stesso codice su più piattaforme.

Supporto dei browser e interoperabilità

Questa funzionalità è basata sulla Sincronizzazione Chrome, quindi al momento funziona solo su Chrome. La ricezione e la trasmissione di SMS su iOS o iPadOS in Chrome non sono supportate.

Sebbene i motori dei browser diversi da Chromium non implementino l'API WebOTP, Safari condivide lo stesso formato SMS con il supporto di input[autocomplete="one-time-code"]. In Safari, se un utente ha attivato la sincronizzazione automatica di iMessage, quando arriva un SMS contenente un formato di codice monouso associato all'origine su iOS o iPadOS, il messaggio viene inoltrato a macOS. Se l'utente si concentra sul campo di immissione, Safari suggerirà la OTP da inserire.

Feedback

Il tuo feedback è fondamentale per migliorare l'API WebOTP. Provalo e facci sapere cosa ne pensi.

Foto di Luis Villasmil su Unsplash