Obtén información para optimizar tu formulario de OTP por SMS y mejorar la experiencia del usuario.
Pedirle a un usuario que proporcione la OTP (contraseña de un solo uso) que se envía por SMS es una forma común de confirmar el número de teléfono de un usuario. Estos son algunos casos de uso de las OTP por SMS:
- Autenticación de dos factores. Además del nombre de usuario y la contraseña, la OTP por SMS se puede usar como un indicador sólido de que la cuenta pertenece a la persona que recibió la OTP por SMS.
- Verificación del número de teléfono. Algunos servicios usan un número de teléfono como identificador principal del usuario. En esos servicios, los usuarios pueden ingresar su número de teléfono y la OTP que recibieron por SMS para probar su identidad. A veces, se combina con un PIN para constituir una autenticación de dos factores.
- Recuperación de la cuenta. Cuando un usuario pierde el acceso a su cuenta, debe haber una forma de recuperarla. Enviar un correo electrónico a su dirección de correo electrónico registrada o una OTP por SMS a su número de teléfono son métodos comunes de recuperación de cuentas.
- Confirmación del pago En los sistemas de pago, algunos bancos o entidades emisoras de tarjetas de crédito solicitan una autenticación adicional al pagador por motivos de seguridad. Por lo general, se usa una OTP por SMS para ese fin.
En esta publicación, se explican las prácticas recomendadas para compilar un formulario de OTP por SMS para los casos de uso anteriores.
Lista de tareas
Para proporcionar la mejor experiencia del usuario con la OTP por SMS, sigue estos pasos:
- Usa el elemento
<input>con lo siguiente:type="text"inputmode="numeric"autocomplete="one-time-code"
- Usa
@BOUND_DOMAIN #OTP_CODEcomo la última línea del mensaje de SMS de OTP. - Usa la API de WebOTP.
Usa el elemento <input>
La práctica recomendada más importante que puedes seguir es usar un formulario con un elemento <input>, ya que funciona en todos los navegadores. Incluso si otras sugerencias de esta publicación no funcionan en algunos navegadores, el usuario podrá ingresar y enviar la OTP de forma manual.
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
A continuación, se incluyen algunas ideas para garantizar que un campo de entrada aproveche al máximo la funcionalidad del navegador.
type="text"
Dado que las OTP suelen ser números de cinco o seis dígitos, usar type="number" para un campo de entrada puede parecer intuitivo porque cambia el teclado del teléfono celular solo a números. No se recomienda porque el navegador espera que un campo de entrada sea un número contable en lugar de una secuencia de varios números, lo que puede causar un comportamiento inesperado. El uso de type="number" hace que los botones hacia arriba y hacia abajo se muestren junto al campo de entrada. Si presionas estos botones, se incrementa o disminuye el número y es posible que se quiten los ceros anteriores.
Usa type="text" en su lugar. Esto no convertirá el teclado del dispositivo móvil solo en números, pero eso está bien porque la siguiente sugerencia para usar inputmode="numeric" hace ese trabajo.
inputmode="numeric"
Usa inputmode="numeric" para cambiar el teclado del teléfono celular a solo números.
Algunos sitios web usan type="tel" para los campos de entrada de OTP, ya que también cambia el teclado del dispositivo móvil solo a números (incluidos * y #) cuando se enfoca. Este hack se usó en el pasado cuando inputmode="numeric" no era ampliamente compatible. Desde que Firefox comenzó a admitir inputmode="numeric", no es necesario usar el hack de type="tel" semánticamente incorrecto.
autocomplete="one-time-code"
El atributo autocomplete permite a los desarrolladores especificar qué permiso tiene el navegador para proporcionar asistencia de autocompletado y le informa al navegador sobre el tipo de información que se espera en el campo.
Con autocomplete="one-time-code", cada vez que un usuario recibe un mensaje SMS mientras un formulario está abierto, el sistema operativo analizará la OTP en el SMS de forma heurística y el teclado sugerirá la OTP para que el usuario la ingrese. Solo funciona en Safari 12 y versiones posteriores en iOS, iPadOS y macOS, pero te recomendamos que lo uses, ya que es una forma fácil de mejorar la experiencia de la OTP por SMS en esas plataformas.
autocomplete="one-time-code" mejora la experiencia del usuario, pero puedes hacer mucho más si te aseguras de que el mensaje SMS cumpla con el formato de mensaje vinculado al origen.
Dale formato al texto del SMS
Mejora la experiencia del usuario cuando ingresa una OTP alineándote con la especificación de los códigos de un solo uso vinculados al origen que se entregan a través de SMS.
La regla de formato es simple: finaliza el mensaje SMS con el dominio del receptor precedido de @ y la OTP precedida de #.
Por ejemplo:
Your OTP is 123456
@web-otp.glitch.me #123456
El uso de un formato estándar para los mensajes de OTP facilita la extracción de códigos y la hace más confiable. La asociación de códigos de OTP con sitios web dificulta engañar a los usuarios para que proporcionen un código a sitios maliciosos.
El uso de este formato proporciona algunos beneficios:
- La OTP se vinculará al dominio. Si el usuario se encuentra en dominios distintos del que se especifica en el mensaje SMS, no aparecerá la sugerencia de OTP. Esto también mitiga el riesgo de ataques de phishing y posibles secuestros de cuentas.
- El navegador ahora podrá extraer la OTP de forma confiable sin depender de heurísticas misteriosas y poco confiables.
Cuando un sitio web usa autocomplete="one-time-code", Safari con iOS 14 o versiones posteriores sugerirá la OTP siguiendo las reglas anteriores.
Este formato de mensaje SMS también beneficia a navegadores que no sean Safari. Chrome, Opera y Vivaldi en Android también admiten la regla de códigos de un solo uso vinculados al origen con la API de WebOTP, aunque no a través de autocomplete="one-time-code".
Usa la API de WebOTP
La API de WebOTP proporciona acceso a la OTP que se recibe en un mensaje SMS. Cuando se llama a navigator.credentials.get() con el tipo otp (OTPCredential) en el que transport incluye sms, el sitio web esperará a que se entregue un SMS que cumpla con los códigos de un solo uso vinculados al origen y que el usuario otorgue acceso. Una vez que se pasa la OTP a JavaScript, el sitio web puede usarla en un formulario o enviarla directamente al servidor.
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
Obtén información detallada para usar la API de WebOTP en Cómo verificar números de teléfono en la Web con la API de WebOTP o copia y pega el siguiente fragmento. (Asegúrate de que el elemento <form> tenga los atributos action y method configurados correctamente).
// 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 en Unsplash.