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 o código de verificação do número de telefone em um site móvel no um toque sem trocar de app. O Chrome 93 estende essa funcionalidade para computador. Continue lendo para saber mais.
Introdução
As OTPs por SMS (senhas únicas) costumam ser usadas para confirmar um número de telefone, por como uma segunda etapa de autenticação ou para verificar pagamentos na Web. No entanto, todo o fluxo de mudar do computador para o celular, abrir a mensagem app, memorizando e inserindo a OTP no site original no computador gera mais atrito. É fácil cometer erros assim, e isso é vulnerável a phishing.
Com a API WebOTP, os sites podem obter programaticamente a senha única de uma mensagem SMS e preencher automaticamente o formulário para os usuários com apenas um toque, sem trocar de app. O SMS tem um formato específico e está vinculado à origem, ou seja, atenua a o risco de sites de phishing roubarem a OTP.
Um caso de uso que ainda não tem suporte no WebOTP é a segmentação por número de telefone de verificação a partir de um dispositivo desktop remoto ou um laptop, o A API só funciona em dispositivos com recursos de telefonia. A API agora suporta a detecção de mensagens SMS recebidas em outros dispositivos para auxiliar os usuários a concluir a verificação de 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 no computador, laptop ou dispositivo móvel 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 Google Chrome para dispositivos móveis. Por exemplo, via 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 sendo executado em primeiro ou segundo plano no Android dispositivo.
Demonstração
Para testar esse fluxo contínuo de verificação do número de telefone no computador, siga estas etapas:
- Acesse https://web-otp-demo.glitch.me/ em computador. Clique no botão Verificar.
- Envie a mensagem de texto exata que apareceu 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ê deseja confirmar o número de telefone no computador. Pressione Enviar para e aprovar.
- No computador, o código de verificação enviado para o dispositivo Android deve ser serão preenchidas automaticamente no campo de entrada.
Como a API WebOTP funciona
Vejamos 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
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
confirmar o número de telefone. Depois que o usuário clicar no botão Verify, a
navegador encaminha automaticamente a OTP para o site e resolve a
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 via SMS é amplamente utilizada e não depende de nenhuma plataforma. Qualquer uso os casos em dispositivos móveis devem ser aplicáveis aos computadores.
Usar a API WebOTP no computador é o mesmo que em dispositivos móveis, para que os sites possam implantar o mesmo código em todas as plataformas.
Suporte e interoperabilidade do navegador
Esse recurso usa a tecnologia da Sincronização do Chrome, então só funciona no momento. O recebimento e a transmissão de SMS no sistema operacional iOS ou iPad não são compatíveis com o Chrome.
Embora os outros mecanismos de navegador, além do 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 ativou a sincronização automática do iMessage quando um SMS que contém uma string de origem
o formato de código de uso único chega com a origem correspondente no iOS ou iPadOS,
é encaminhada para o macOS. Se o usuário focar no campo de entrada, o Safari
sugere a OTP para o usuário inserir.
Feedback
Seu feedback é inestimável para melhorar a API WebOTP. Faça um teste e nos avise o que você acha.
Foto de Luis Villasmil ativado Abrir