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 senhas únicas por SMS são usadas geralmente 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 oferece suporte à 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 desktop ou laptop (Windows, Mac, Linux ou ChromeOS).
- Um smartphone Android com a versão 20.30.12 ou mais recente do Google Play Services.
- 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 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 é enviado ao dispositivo Android, uma caixa de diálogo aparece 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 o 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.
O uso da API WebOTP no computador é igual ao uso em dispositivos móveis, para que os sites possam implantar o mesmo código em várias plataformas.
Suporte a navegadores e interoperabilidade
Esse recurso é fornecido pela sincronização do Chrome e, por isso, só funciona no Chrome 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 a 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
vai sugerir que o usuário insira o OTP.
Feedback
Seu feedback é muito importante para melhorar a API WebOTP. Teste e nos diga o que você achou.
Foto de Luis Villasmil no Unsplash (em inglês)