A partire dalla versione 93 di Chrome, i siti web possono verificare i numeri di telefono dalla versione desktop di Chrome.
WebOTP consente agli utenti di inserire con un solo tocco un codice di verifica del numero di telefono su un sito web per dispositivi mobili senza passare da un'app all'altra. Chrome 93 estende questa funzionalità anche ai computer. Continua a leggere per saperne di più.
Introduzione
Le OTP (password monouso) SMS vengono comunemente utilizzate per verificare un numero di telefono, ad esempio come secondo passaggio nell'autenticazione o per verificare i pagamenti sul web. Tuttavia, l'intero flusso di passaggio dal computer al dispositivo mobile, dall'apertura dell'app SMS, dalla memorizzazione e dall'inserimento dell'OTP sul sito web originale su computer, è un ulteriore problema. 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 unica da un messaggio SMS e di compilare automaticamente il modulo per gli utenti con un solo tocco, senza passare ad altre app. L'SMS ha un formato specifico ed è associato all'origine, quindi riduce il rischio che anche siti web di phishing rubano l'OTP.
Un caso d'uso non ancora supportato in WebOTP è il targeting delle richieste di verifica del numero di telefono da un dispositivo desktop remoto o da un laptop: l'API funziona solo su dispositivi con funzionalità di telefonia. L'API ora 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).
- Un telefono Android con Google Play Services 20.30.12 o versioni successive.
- Chrome 93 o versioni successive, sia su computer che laptop e dispositivi mobili. Chrome 93 beta è disponibile a partire da fine luglio 2021.
- Devi accedere allo stesso Account Google sia su Chrome desktop sia su Chrome mobile. ad esempio tramite https://myaccount.google.com/ o https://mail.google.com. Non è necessario attivare la sincronizzazione.
- Sul tuo 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 in autonomia questo flusso di verifica del numero di telefono senza interruzioni su computer, segui questi passaggi:
- Vai a https://web-otp-demo.glitch.me/ sul computer. Fai clic sul pulsante Verifica.
- Invia l'esatto messaggio visualizzato sullo schermo da un secondo smartphone al dispositivo Android.
- Quando l'SMS viene recapitato 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.
- Sul computer, il codice di verifica inviato al dispositivo Android dovrebbe essere compilato 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 monouso associati 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 @ seguito dall'OTP preceduta da un #.
All'arrivo dell'SMS, viene visualizzata una barra delle informazioni che chiede all'utente di verificare il numero di telefono. Dopo che l'utente fa clic sul pulsante Verify, il browser inoltra automaticamente l'OTP al sito e risolve la navigator.credentials.get(). Il sito web può quindi estrarre l'OTP e completare la procedura di verifica.
Scopri di più nella pagina 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. Qualsiasi caso d'uso sui dispositivi mobili deve essere applicabile ai computer.
L'utilizzo dell'API WebOTP su desktop è uguale a quello sui dispositivi mobili, pertanto i siti web possono eseguire il deployment dello stesso codice su più piattaforme.
Supporto del browser e interoperabilità
Questa funzionalità si basa sulla funzionalità Sincronizzazione Chrome, quindi al momento funziona solo con Chrome. La ricezione e la trasmissione di SMS su iOS o iPad OS in Chrome non sono supportate.
Sebbene motori di browser diversi da Chromium non implementano l'API WebOTP, Safari condivide lo stesso formato SMS con il suo supporto input[autocomplete="one-time-code"]. In Safari, a condizione che un utente abbia attivato la sincronizzazione automatica di iMessage, su iOS o iPadOS arriva un SMS che contiene un formato di codice monouso vincolato all'origine, il messaggio viene inoltrato a macOS. Se l'utente si concentra sul campo di immissione, Safari suggerirà l'OTP da inserire.
Feedback
Il tuo feedback è inestimabile per migliorare l'API WebOTP. Provalo e facci sapere cosa ne pensi.
Foto di Luis Villasmil su Unsplash