A partir do Chrome 93, os sites podem verificar números de telefone no Chrome para computador.
O WebOTP ajuda os usuários a inserir um código de verificação de número de telefone em um site para dispositivos móveis com um toque, sem alternar entre apps. O Chrome 93 também estende essa funcionalidade para computadores. Continue lendo para saber mais.
Introdução
As OTPs por SMS (senhas únicas) geralmente são usadas para verificar um número de telefone, por exemplo, como uma segunda etapa de autenticação ou para verificar pagamentos na Web. No entanto, todo o fluxo de mudança do computador para o dispositivo móvel, a abertura do app de SMS, a memorização e a entrada do OTP no site original de volta no computador adiciona atrito. É fácil cometer erros dessa forma, e isso deixa o sistema vulnerável a ataques de phishing.
A API WebOTP permite que os sites obtenham a senha única de uma mensagem SMS de forma programática e preencham automaticamente o formulário para os usuários com apenas um toque, sem mudar de app. O SMS tem um formato específico e está vinculado à origem, o que reduz o risco de sites de phishing roubarem o OTP.
Um caso de uso que ainda não tem suporte no WebOTP é o direcionamento de solicitações de verificação de número de telefone de um dispositivo de área de trabalho remota ou de um laptop. A API só funciona em dispositivos com recursos de telefonia. A API agora é compatível com a detecção de SMS recebidos em outros dispositivos para ajudar os usuários a concluir a verificação do número de telefone no computador no Chrome 93.
Faça um teste
Pré-requisitos
- Um computador ou laptop (Windows, Mac, Linux ou ChromeOS).
- Um smartphone Android com o Google Play Services versão 20.30.12 ou mais recente.
- Chrome 93 ou mais recente, em computadores e laptops e dispositivos móveis. O Chrome 93 Beta está disponível desde o final de julho de 2021.
- É necessário fazer login na mesma Conta do Google no Chrome para computador e no Chrome para dispositivos móveis. Por exemplo, em https://myaccount.google.com/ ou https://mail.google.com. Não é necessário ativar a sincronização.
- No dispositivo Android, faça login no Android em "Configurações->Google".
- O Chrome 93 precisa ser o navegador padrão no dispositivo Android.
- O Chrome 93 precisa estar em execução em primeiro ou segundo plano no dispositivo Android.
Demonstração
Para testar esse fluxo contínuo de verificação de número de telefone no computador, siga estas etapas:
- Acesse https://web-otp-demo.glitch.me/ no computador. Clique no botão Verificar.
- Enviar a mensagem de texto exata que estava na tela de um segundo smartphone para o dispositivo Android.
- Quando o SMS for entregue ao dispositivo Android, uma caixa de diálogo será exibida perguntando se você quer verificar o número de telefone no computador. Pressione Enviar para aprovar.
- No computador, o código de verificação enviado para o dispositivo Android precisa ser preenchido automaticamente no campo de entrada.
Como a API WebOTP funciona
Vamos conferir como a API WebOTP funciona:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
if (otp.code) input.value = otp.code;
…
A mensagem SMS precisa ser formatada com os códigos de uso único vinculados à origem.
Your OTP is: 123456.
@web-otp-demo.glitch.me #123456
Observe que a última linha contém a origem a ser vinculada precedida por um @
seguido pelo OTP precedido por um #.
Quando a mensagem de texto chega, uma barra de informações aparece e solicita que o usuário
verifique o número de telefone. Depois que o usuário clica no botão Verify, o
navegador encaminha automaticamente o OTP para o site e resolve o
navigator.credentials.get(). O site pode extrair a OTP e concluir o processo de verificação.
Saiba mais em Verificar números de telefone na Web com a API WebOTP.
Como usar a API WebOTP no computador
A verificação de número de telefone por SMS é amplamente usada e não depende da plataforma. Todos os casos de uso em dispositivos móveis precisam ser aplicáveis a computadores.
Usar a API WebOTP no computador é o mesmo que em dispositivos móveis, ou seja, os sites podem implantar o mesmo código em todas as plataformas.
Suporte a navegadores e interoperabilidade
Esse recurso usa a tecnologia da Sincronização do Chrome, então só funciona no momento. Não é possível receber e transmitir SMS no iOS ou iPadOS no Chrome.
Embora os mecanismos de navegadores que não sejam o Chromium não implementem a API WebOTP,
o Safari compartilha o mesmo formato de SMS
com o suporte input[autocomplete="one-time-code"]. No Safari, desde que um
usuário tenha ativado a sincronização automática do iMessage, quando um SMS que contém um formato de código único
vinculado à origem chegar com a origem correspondente no iOS ou iPadOS, a
mensagem será encaminhada para o macOS. Se o usuário focar no campo de entrada, o Safari
sugere a OTP para ele.
Feedback
Seu feedback é inestimável para melhorar a API WebOTP. Teste e nos diga o que você achou.
Foto de Luis Villasmil no Unsplash (links em inglês)