A API WebOTP agora pode receber OTPs de dentro de iframes.
As OTPs por SMS (senhas únicas) costumam ser usadas para confirmar números de telefone, por como uma segunda etapa de autenticação ou para verificar pagamentos na Web. No entanto, é possível alternar entre o navegador e o app de SMS para copiar e colar ou manualmente inserir a OTP facilita cometer erros e acrescenta atrito à experiência do usuário.
A API WebOTP (link em inglês) oferece aos sites a capacidade de obter a senha única de uma mensagem SMS e inseri-la automaticamente no formulário para os usuários com apenas um toque, sem alternar o app. O SMS é formatado especialmente e vinculado à origem, por isso reduz mais chances de sites de phishing roubarem a OTP.
Um caso de uso que ainda não tinha suporte no WebOTP foi segmentar uma origem em um iframe. Isso normalmente é usado para confirmação de pagamento, especialmente com o 3D Secure. Ter a tática para dar suporte a origens cruzadas iframes, a API WebOTP agora oferece OTPs vinculadas a origens aninhadas a partir do Chrome 91.
Como a API WebOTP funciona
A API WebOTP é simples o suficiente:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
A mensagem SMS precisa ser formatada com o prefixo único de origem de código aberto.
Your OTP is: 123456.
@web-otp.glitch.me #12345
Observe que, na última linha, ele 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.
Conheça as noções básicas do WebOTP em Verificar números de telefone na Web com o API WebOTP.
Casos de uso de iframes de origem cruzada
Inserir uma OTP em um formulário de iframe de origem cruzada é comum em pagamentos. diferentes. Alguns emissores de cartão de crédito exigem uma etapa de verificação adicional para verificar a autenticidade do pagador. Isso é chamado de 3D Secure e o formulário é geralmente expostos em um iframe na mesma página, como se fosse parte do fluxo de pagamento.
Exemplo:
- Um usuário visita
shop.example
para comprar um par de sapatos com um cartão de crédito. - Depois de inserir o número do cartão de crédito, o provedor de pagamento integrado mostrará um
formulário de
bank.example
em um iframe solicitando que o usuário verifique a número de telefone para agilizar o pagamento. - O
bank.example
envia um SMS com uma OTP ao usuário para que ele possa inseri-lo para confirmar sua identidade.
Como usar a API WebOTP de um iframe de origem cruzada
Para usar a API WebOTP em um iframe de origem cruzada, você precisa fazer duas etapas: coisas:
- Anotar a origem do frame superior e a origem do iframe no texto do SMS mensagem.
- Configurar a política de permissões para permitir que o iframe de origem cruzada receba OTP diretamente do usuário.
Você pode testar a demonstração em https://web-otp-iframe-demo.stackblitz.io.
Anotar origens vinculadas à mensagem de texto SMS
Quando a API WebOTP é chamada de dentro de um iframe, a mensagem de texto SMS deve
inclua a origem do frame superior precedida por @
seguida pela OTP precedida por #
seguida pela origem do iframe precedida por @
.
@shop.example #123456 @bank.exmple
Configurar política de permissões
Para usar o WebOTP em um iframe de origem cruzada, o incorporador precisa conceder acesso a esse API via política de permissões otp-credentials para evitar problemas do seu modelo. Em geral, há duas maneiras de atingir esse objetivo:
- via cabeçalho HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- pelo atributo iframe
allow
:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
Veja mais exemplos sobre como especificar uma política de permissões
Advertências
Níveis de aninhamento
No momento, o Chrome só oferece suporte a chamadas de API WebOTP de iframes de origem cruzada que tenham no máximo uma origem exclusiva na cadeia de ancestral. Na cenários a seguir:
- a.com -> b.com
- a.com -> b.com -> b.com
- a.com -> a.com -> b.com
- a.com -> b.com -> c.com
é possível usar WebOTP em b.com, mas não em c.com.
O cenário a seguir também não é suportado devido à falta de demanda e complexidades de UX.
- a.com -> b.com -> a.com (chama API WebOTP)
Interoperabilidade
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, assim que um
O SMS com formato de código de uso único vinculado à origem chega com
o teclado sugere inserir a OTP no campo de entrada.
Desde abril de 2021, o Safari oferece suporte a iframe com um formato exclusivo de SMS usando
%
.
No entanto, como a discussão sobre especificações concluiu com @
, esperamos que a
de suporte do formato SMS convergirão.
Feedback
Seu feedback é inestimável para melhorar a API WebOTP. Não deixe de testar! e nos avise o que você acha.
Recursos
- Verificar números de telefone na Web com a OTP da Web API
- Práticas recomendadas para formulário de OTP por SMS
- API WebOTP
- Códigos únicos vinculados à origem entregues por SMS
Foto de rupixen.com no Unsplash (links em inglês)