Saiba como otimizar seu formulário de OTP por SMS e melhorar a experiência do usuário.
Pedir ao usuário para fornecer a senha única (OTP, na sigla em inglês) entregue por SMS é algo comum para confirmar o número de telefone de um usuário. Existem alguns casos de uso para OTP por SMS:
- Autenticação de dois fatores. Além do nome de usuário e da senha, a OTP por SMS pode ser usado como um forte indicador de que a conta pertence à pessoa que recebeu o OTP por SMS.
- Confirmação do número de telefone. Alguns serviços usam um número de telefone como identificador principal. Nesses serviços, os usuários podem inserir seu número de telefone e o OTP recebida por SMS para comprovar a identidade. Às vezes, ele é combinado com um PIN para constituir a autenticação de dois fatores.
- Recuperação de conta. Quando um usuário perde o acesso à conta, é necessário para recuperá-los. Enviando um e-mail para o endereço de e-mail registrado ou uma OTP por SMS ao número de telefone são métodos comuns de recuperação de conta.
- Confirmação de pagamento Em sistemas de pagamento, alguns bancos ou cartão de crédito os emissores solicitam autenticação adicional do pagador por motivos de segurança. A OTP por SMS costuma ser usada para essa finalidade.
Esta postagem explica as práticas recomendadas para criar um formulário de OTP por SMS para o uso acima. casos de uso diferentes.
Lista de verificação
Para oferecer a melhor experiência ao usuário com a OTP por SMS, siga estas etapas:
- Use o elemento
<input>com:type="text"inputmode="numeric"autocomplete="one-time-code"
- Use
@BOUND_DOMAIN #OTP_CODEcomo a última linha da mensagem SMS de OTP. - Use a API WebOTP.
Usar o elemento <input>
Usar um formulário com um elemento <input> é a prática recomendada mais importante.
pode seguir porque funciona em todos os navegadores. Mesmo que outras sugestões
esta postagem não funcionar em algum navegador, o usuário ainda poderá inserir e enviar a OTP
manualmente.
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
Confira a seguir algumas ideias para garantir que um campo de entrada aproveite ao máximo funcionalidade do navegador.
type="text"
Como as OTPs geralmente são números de cinco ou seis dígitos,
O type="number" para um campo de entrada pode parecer intuitivo porque ele muda a configuração
apenas números. Isso não é recomendado porque o navegador espera uma
campo de entrada seja um número contável em vez de uma sequência de vários números,
o que pode causar um comportamento inesperado. O uso de type="number" causa o aumento e a diminuição
botões a serem exibidos ao lado do campo de entrada. ao pressionar esses botões
aumenta ou diminui o número e pode remover zeros anteriores.
Use type="text" Isso não transforma o teclado do dispositivo móvel em números
mas isso não é um problema, porque a próxima dica para usar inputmode="numeric"
esse trabalho.
inputmode="numeric"
Usar inputmode="numeric"
para alterar o teclado móvel para apenas números.
Alguns sites usam type="tel" nos campos de entrada da OTP, já que ela também
transforma o teclado móvel em apenas números (incluindo * e #) quando
focada. Esta invasão já foi usada quando inputmode="numeric"
não era amplamente suportado. Desde que o Firefox começou a oferecer suporte a
inputmode="numeric",
não há necessidade de usar a invasão de type="tel" semanticamente incorreta.
autocomplete="one-time-code"
autocomplete
permite que os desenvolvedores especifiquem qual permissão o navegador
precisa fornecer assistência de preenchimento automático e informar o navegador sobre a
o tipo das informações esperadas no campo.
Com autocomplete="one-time-code", sempre que um usuário recebe uma mensagem SMS enquanto um
estiver aberto, o sistema operacional analisará a OTP de forma heurística e
o teclado vai sugerir a OTP para o usuário inserir. Ele funciona apenas no Safari 12 e
mais tarde no iOS, iPadOS e macOS, mas é altamente recomendável usá-lo, porque é uma
uma maneira fácil de melhorar a experiência de OTP por SMS nessas plataformas.
O autocomplete="one-time-code" melhora a experiência do usuário, mas você tem muito mais
pode fazer garantindo que a mensagem SMS esteja em conformidade com a mensagem
formato.
Formatar o texto SMS
Melhore a experiência do usuário ao inserir uma OTP alinhada ao códigos de uso único vinculados à origem entregues por SMS especificação.
A regra de formatação é simples: conclua a mensagem SMS com o domínio do destinatário
precedido por @ e a OTP precedida por #.
Exemplo:
Your OTP is 123456
@web-otp.glitch.me #123456
Usar um formato padrão para mensagens OTP facilita a extração de códigos mais fácil e confiável. Como associar códigos OTP a nos sites, é mais difícil enganar os usuários para que eles forneçam um código a sites maliciosos.
O uso desse formato oferece alguns benefícios:
- A OTP será vinculada ao domínio. Se o usuário estiver em domínios que não sejam a que está especificada na mensagem SMS, a sugestão de OTP não será exibida. Isso também reduz o risco de ataques de phishing e possíveis invasões de conta.
- O navegador agora poderá extrair a OTP de forma confiável sem depender heurística misteriosa e instável.
Quando um site usa o autocomplete="one-time-code", o Safari com o iOS 14 ou mais recente
vai sugerir a OTP seguindo as regras acima.
Esse formato de mensagem SMS também é útil para outros navegadores além do Safari. Chrome, Opera e
e Vivaldi no Android também oferecem suporte à regra de códigos únicos ligados à origem, com
pela API WebOTP, mas não pelo autocomplete="one-time-code".
Usar a API WebOTP
A API WebOTP fornece acesso à OTP.
recebidas em uma mensagem SMS. Ligando para
navigator.credentials.get()
com o tipo otp (OTPCredential), em que transport inclui sms, o site
aguardará um SMS compatível com os códigos de uso único vinculados à origem ser
fornecido e concedido acesso pelo usuário. Depois que a OTP for passada para o JavaScript,
o site pode usá-lo em um formulário ou POST diretamente para o servidor.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
Saiba como usar a API WebOTP em detalhes em Verificar números de telefone na Web.
com a API WebOTP ou copie e cole o snippet a seguir. (Fazer
se o elemento <form> tem os atributos action e method definidos corretamente.
// Feature detection
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
// Cancel the WebOTP API if the form is submitted manually.
const ac = new AbortController();
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
// Cancel the WebOTP API.
ac.abort();
});
}
// Invoke the WebOTP API
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
input.value = otp.code;
// Automatically submit the form when an OTP is obtained.
if (form) form.submit();
}).catch(err => {
console.log(err);
});
});
}
Foto de Jason Leung em Abrir a página.