Práticas recomendadas de formulário OTP de SMS
Aprenda como otimizar seu formulário OTP de SMS e melhorar a experiência do usuário.
Solicitar a um usuário que forneça a OTP (senha descartável) fornecida por SMS é uma forma comum de confirmar o número de telefone de um usuário. Existem alguns casos de uso para SMS OTP:
- Autenticação de dois fatores. Além do nome de usuário e da senha, o SMS OTP pode ser usado como um forte sinal de que a conta pertence à pessoa que recebeu o SMS OTP.
- Verificaçã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, o usuário pode inserir seu número de telefone e a OTP recebida por SMS para comprovar sua 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 à sua conta, deve haver uma maneira de recuperá-la. Enviar um e-mail para o endereço de e-mail registrado ou um SMS OTP 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 solicitam autenticação adicional do pagador por motivos de segurança. O SMS OTP é comumente usado para esse fim.
Esta postagem explica as práticas recomendadas para construir um formulário SMS OTP para os casos de uso acima.
Lista de controle #
Para fornecer a melhor experiência do usuário com o SMS OTP, siga estas etapas:
- Use o
<input>com:type="text"inputmode="numeric"autocomplete="one-time-code"
- Use
@BOUND_DOMAIN #OTP_CODEcomo a última linha da mensagem SMS OTP. - Use a API WebOTP.
Use o elemento <input> #
Usar um formulário com um <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 algum navegador, o usuário ainda poderá inserir e enviar o OTP manualmente.
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>A seguir estão algumas idéias para garantir que um campo de entrada obtenha o melhor da funcionalidade do navegador.
type="text" #
Como os OTPs são geralmente números de cinco ou seis dígitos, usar type="number" para um campo de entrada pode parecer intuitivo porque altera o teclado 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 em vez de 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 exibidos ao lado do campo de entrada; pressionar esses botões aumenta ou diminui o número e pode remover os zeros anteriores.
Em vez disso, use type="text". Isso não transformará o teclado móvel em apenas números, mas não há problemas já que a próxima dica para usar inputmode="numeric" faz esse trabalho.
inputmode="numeric" #
Use inputmode="numeric" para alterar o teclado do celular apenas para números.
Alguns sites usam type="tel" para campos de entrada OTP, uma vez que também transforma o teclado do celular apenas em números (incluindo * e #) quando focado. Este hack foi usado no passado quando inputmode="numeric" não era amplamente compatível. Uma vez que o Firefox começou a oferecer suporte para inputmode="numeric", não é necessário usar o hack type="tel"
autocomplete="one-time-code" #
autocomplete atributo autocomplete permite que os desenvolvedores especifiquem qual permissão o navegador tem para fornecer assistência ao autocomplete e informa o navegador sobre o tipo de informação esperada no campo.
Com autocomplete="one-time-code" sempre que um usuário recebe uma mensagem SMS enquanto um formulário está aberto, o sistema operacional irá analisar o OTP no SMS heuristicamente e o teclado irá sugerir o OTP para o usuário inserir. Funciona apenas no Safari 12 e posterior no iOS, iPadOS e macOS, mas é altamente recomendável usá-lo, porque é uma maneira fácil de melhorar a experiência de SMS OTP nessas plataformas.
O autocomplete="one-time-code" melhora a experiência do usuário, mas você pode fazer mais garantindo que a mensagem SMS está em conformidade com o formato de mensagem vinculado à origem.
Formate o texto SMS #
Aprimore a experiência do usuário ao entrar em uma OTP alinhando-se aos códigos únicos vinculados à origem entregues por meio de especificação de SMS.
A regra de formatação é simples: termine a mensagem SMS com o domínio do destinatário precedido de @ e o OTP precedido de #.
Por exemplo:
Your OTP is 123456
@web-otp.glitch.me #123456Usar um formato padrão para mensagens OTP torna a extração de códigos delas mais fácil e confiável. A associação de códigos OTP a sites torna mais difícil enganar os usuários para que forneçam um código a sites maliciosos.
Usar este formato oferece alguns benefícios:
- O OTP será vinculado ao domínio. Se o usuário estiver em domínios diferentes do especificado na mensagem SMS, a sugestão de OTP não aparecerá. Isso também reduz o risco de ataques de phishing e possíveis sequestros de contas.
- O navegador agora será capaz de extrair o OTP de maneira 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 posterior irá sugerir o OTP seguindo as regras acima.
Este formato de mensagem SMS também beneficia outros navegadores além do Safari. Chrome, Opera e Vivaldi no Android também oferecem suporte para a regra de códigos únicos vinculados à origem com a API WebOTP, embora não por meio de autocomplete="one-time-code".
Use 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) onde o transport inclui sms, o site aguardará que um SMS que está em conformidade com os códigos únicos vinculados à origem seja entregue e tenha acesso concedido pelo usuário. Depois que o OTP é passado para o JavaScript, o site pode usá-lo em um formulário ou POST diretamente no servidor.navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
Aprenda a usar a API WebOTP detalhadamente em Verificar números de telefone na web com a API WebOTP ou copie e cole o seguinte snippet. (Certifique-se de que o <form> tenha um action e method devidamente definido.)
// 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 no Unsplash.