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 dalla versione desktop di Chrome.

WebOTP consente agli utenti di inserire un codice di verifica del numero di telefono su un sito web mobile in un solo tocco senza passare da un'app all'altra. Chrome 93 estende questa funzionalità a computer fisso. 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 per il passaggio dal computer ai dispositivi mobili, l'apertura degli SMS all'app, memorizzando e inserendo l'OTP sul sito web originale, di nuovo sul desktop crea un maggiore attrito. È facile commettere errori in questo modo ed è vulnerabile attacchi phishing.

L'API WebOTP offre ai siti web la possibilità di ottenere in modo programmatico la password monouso da un 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, quindi mitiga anche il rischio che i siti web di phishing rubino l'OTP.

L'API WebOTP in azione.

Un caso d'uso che deve essere ancora supportato in WebOTP ha come target il numero di telefono richieste di verifica da un computer fisso o un laptop, L'API funziona solo su dispositivi dotati di funzionalità di telefonia. L'API ora supporta l'ascolto di SMS ricevuti su altri dispositivi per assistere gli utenti nel completare la verifica del numero di telefono da computer in Chrome 93.

API WebOTP su computer.

Prova

Prerequisiti

Demo

Per provare personalmente questa procedura di verifica del numero di telefono da computer, segui questi passaggi:

  1. Vai a https://web-otp-demo.glitch.me/ su desktop. Fai clic sul pulsante Verifica.
  2. Invia l'esatto SMS presente sullo schermo da un secondo smartphone al Dispositivo Android.
  3. Quando l'SMS viene recapitato al dispositivo Android, viene visualizzata una finestra di dialogo che chiede se vuoi verificare il numero di telefono sul computer. Premi Invia per approvare.
  4. Su computer, il codice di verifica inviato al dispositivo Android dovrebbe essere compilate 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 @ seguito da OTP preceduta da #.

Quando arriva l'SMS, appare 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 il browser inoltra automaticamente l'OTP al sito e risolve il problema navigator.credentials.get(). Il sito web può quindi estrarre l'OTP e completare la procedura di verifica.

Per saperne di più, vedi 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 uso per dispositivi mobili dovrebbero essere applicabili ai computer.

L'utilizzo dell'API WebOTP su computer è lo stesso che su mobile, in modo che i siti web possano eseguire il deployment dello stesso codice su più piattaforme.

Supporto del browser e interoperabilità

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

Anche se i motori dei browser diversi da Chromium non implementano l'API WebOTP, Safari condivide lo stesso formato SMS con il relativo supporto input[autocomplete="one-time-code"]. In Safari, a condizione che l'utente ha attivato la sincronizzazione automatica di iMessage quando un SMS contiene un messaggio formato del codice monouso arriva con l'origine corrispondente su iOS o iPadOS, viene inoltrato a macOS. Se l'utente si concentra sul campo di immissione, Safari suggerisce l'OTP che l'utente può inserire.

Feedback

Il tuo feedback è inestimabile per migliorare l'API WebOTP. Prova e comunicacelo quello che pensi.

Foto di Luis Villasmil attivo Rimuovi schermo