A partir do Chrome 93, os sites podem verificar números de telefone no Chrome para computadores.
A 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, abrir o app de SMS, memorizar e inserir a OTP no site original de volta no computador é um desafio. É fácil cometer erros dessa forma, e ela é vulnerável a ataques de phishing.
A API WebOTP oferece aos sites a capacidade de conseguir a senha única de uma mensagem SMS de forma programática e preencher 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 a OTP.
Um caso de uso que ainda não tem suporte no WebOTP é segmentar solicitações de verificação de número de telefone de um computador ou laptop remoto. A API só funciona em dispositivos com recursos de telefonia. A API agora oferece suporte para detectar SMSs recebidos em outros dispositivos para ajudar os usuários a concluir a verificação do número de telefone no computador no Chrome 93.
Testar
Pré-requisitos
- Um computador desktop 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 versão mais recente, tanto em computadores quanto em laptops e dispositivos móveis. O Chrome 93 Beta está disponível no final de julho de 2021.
- Você precisa fazer login na mesma Conta do Google no Chrome para computador e 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 seu dispositivo Android, é necessário fazer login 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.
- Envie 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 confirmar o número de telefone no computador. Pressione Enviar para aprovar.
- No computador, o código de verificação enviado ao 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 precedida por um @
seguido pela OTP precedida 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 a 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 do número de telefone via SMS é amplamente usada e não depende de nenhuma plataforma. Todos os casos de uso em dispositivos móveis devem ser aplicáveis a computadores.
O uso da API WebOTP no computador é igual ao usado em dispositivos móveis, então os sites podem implantar o mesmo código em todas as plataformas.
Compatibilidade e interoperabilidade com navegadores
Como esse recurso usa a Sincronização do Chrome, ele só funciona no momento. O recebimento e a transmissão de SMS no SO iOS ou iPad não estão disponíveis no Chrome.
Embora os mecanismos de navegador 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, se um usuário tiver ativado a sincronização automática do iMessage, quando um SMS que contenha 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 a OTP para o usuário inserir.
Feedback
Seu feedback é muito importante para melhorar a API WebOTP. Faça um teste e comente o que achou.
Foto de Luis Villasmil no Unsplash (links em inglês)