É comum pedir que um usuário forneça uma senha de uso único (OTP) para confirmar a identidade dele enviando um SMS. Alguns casos de uso para o OTP por SMS incluem:
- Autenticação de dois fatores. Além do nome de usuário e da senha, o OTP por SMS pode ser usado como um sinal forte 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 o identificador principal do usuário. Nesses serviços, os usuários podem inserir o número de telefone e o OTP recebido por SMS para provar a identidade. Às vezes, ele é combinado com um PIN para constituir uma autenticação de dois fatores.
- Recuperação de conta. Quando um usuário perde o acesso à conta, é necessário haver uma maneira de recuperá-la. Enviar um e-mail para o endereço registrado ou um OTP por SMS para o 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 emissores de cartão de crédito pedem autenticação adicional do pagador por motivos de segurança. O OTP por SMS é usado com frequência para essa finalidade.
Continue lendo para conferir as práticas recomendadas de criação de formulários de OTP por SMS para esses casos de uso.
Lista de verificação
Para oferecer a melhor experiência do usuário com o 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 com o OTP. - Use a API WebOTP.
Usar o elemento <input>
Usar um formulário com um elemento <input> é a prática recomendada mais importante que você pode seguir porque funciona em todos os navegadores. Mesmo que outras sugestões desta postagem não funcionem em alguns navegadores, o usuário ainda poderá inserir e enviar a senha única manualmente.
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
Confira algumas ideias para garantir que um campo de entrada aproveite ao máximo a funcionalidade do navegador.
type="text"
Como os OTPs geralmente são números de cinco ou seis dígitos, usar
type="number" para um campo de entrada pode parecer intuitivo porque muda o teclado
do dispositivo móvel para apenas números. Isso não é recomendado porque o navegador espera que um campo de entrada seja um número contável, e não uma sequência de vários números, o que pode causar um comportamento inesperado. Usar type="number" faz com que os botões para cima e para baixo sejam mostrados ao lado do campo de entrada. Ao pressionar esses botões, o número aumenta ou diminui, e os zeros à esquerda podem ser removidos.
Use type="text". Isso não vai transformar o teclado móvel em números
apenas, mas não tem problema porque a próxima dica para usar inputmode="numeric" faz
esse trabalho.
inputmode="numeric"
Use inputmode="numeric"
para mudar o teclado do dispositivo móvel para apenas números.
Alguns sites usam type="tel" para campos de entrada de OTP, já que ele também
transforma o teclado do dispositivo móvel em apenas números (incluindo * e #) quando
focado. Essa gambiarra era usada no passado quando inputmode="numeric"
não era amplamente compatível. Como o Firefox começou a oferecer suporte ao
inputmode="numeric",
não é necessário usar o hack type="tel" semanticamente incorreto.
autocomplete="one-time-code"
O atributo autocomplete
permite que os desenvolvedores especifiquem qual permissão o navegador
tem para oferecer assistência de preenchimento automático e informa ao navegador sobre o
tipo de informação esperado no campo.
Com o autocomplete="one-time-code", sempre que um usuário receber uma mensagem SMS enquanto um
formulário estiver aberto, o sistema operacional vai analisar heuristicamente o OTP no SMS e
o teclado vai sugerir o OTP para o usuário inserir. Ele funciona apenas no Safari 12 e
versões mais recentes do iOS, iPadOS e macOS, mas recomendamos muito o uso dele, porque é
uma maneira melhor de melhorar a experiência de OTP por SMS nessas plataformas.
autocomplete="one-time-code" em ação.
autocomplete="one-time-code" melhora a experiência do usuário, mas você pode fazer mais garantindo que a mensagem SMS esteja em conformidade com o formato de mensagem vinculada à origem.
Atributos opcionais
Atributos opcionais incluem:
patternespecifica o formato que a senha única inserida precisa corresponder. Use expressões regulares para especificar o padrão de correspondência. Por exemplo,\d{6}restringe a senha única a uma string de seis dígitos. Leia Usar JavaScript para validação em tempo real mais complexa para saber mais sobrepattern.requiredindica que um usuário precisa preencher o campo.
Leia nossas práticas recomendadas para formulários de login e confira mais dicas.
Formatar o texto do SMS
Melhore a experiência do usuário ao inserir uma senha única alinhando-se à especificação de códigos únicos vinculados à origem entregues por SMS.
Basicamente, a regra de formato é a seguinte: termine a mensagem SMS com o domínio do
destinatário precedido por @ e o OTP precedido por #.
Exemplo:
Your OTP is 123456
@web-otp.glitch.me #123456
O formato padrão das mensagens de senha única facilita e torna mais confiável a extração. Associar códigos OTP a sites dificulta o truque para que os usuários forneçam um código a sites maliciosos.
Regras de formatação precisas
As regras precisas são:
- A mensagem começa com um texto legível (opcional) que contém uma string alfanumérica de quatro a dez caracteres com pelo menos um número, deixando a última linha para o URL e o OTP.
- A parte do domínio do URL do site que invocou a API precisa ser
precedida por
@. - O URL precisa conter um
#, seguido pelo OTP. O número de caracteres precisa ser 140 ou menos.
Usar esse formato oferece alguns benefícios:
- A senha única será vinculada ao domínio. Se o usuário estiver em domínios diferentes do especificado na mensagem SMS, a sugestão de senha única não vai aparecer. Isso também reduz o risco de ataques de phishing e possíveis invasões de conta.
- Agora o navegador pode extrair o OTP de forma confiável sem depender de heurísticas misteriosas e instáveis.
Quando um site usa autocomplete="one-time-code", o Safari com iOS 14 ou versões mais recentes
sugere o OTP seguindo estas regras.
Esse formato de mensagem SMS também beneficia outros navegadores além do Safari. O Chrome, o Opera e o Vivaldi no Android também são compatíveis com a regra de códigos únicos vinculados à origem com a API WebOTP, mas não pelo autocomplete="one-time-code".
Usar a API WebOTP
A API WebOTP fornece acesso ao OTP
recebido em uma mensagem SMS. Ao chamar
navigator.credentials.get()
com o tipo otp (OTPCredential), em que transport inclui sms, o site
aguardará a entrega de um SMS que esteja em conformidade com os códigos únicos vinculados à origem e o acesso concedido pelo usuário. Depois que a senha única é transmitida para o JavaScript,
o site pode usá-la em um formulário ou enviá-la 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. Defina um atributo action e
method no seu <form>.
// 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);
});
});
}