Prácticas recomendadas para el formulario de OTP de SMS

Obtén información para optimizar tu formulario de OTP por SMS y mejorar la experiencia del usuario.

Eiji Kitamura

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 recibida 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 las 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_CODE como 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 algún navegador, 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 se muestren botones de arriba y abajo 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 convierte el teclado del dispositivo móvil solo en números (incluidos * y #) cuando está enfocado. Este hack se usaba en el pasado cuando inputmode="numeric" no era ampliamente compatible. Dado que Firefox comenzó a admitir inputmode="numeric", no es necesario utilizar el truco type="tel" de forma incorrecta.

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"` en acción.

autocomplete="one-time-code" mejora la experiencia del usuario, pero puedes asegurarte de que el mensaje SMS cumpla con el formato de mensaje vinculado al origen para realizar más acciones.

Dale formato al texto del SMS

Para mejorar la experiencia del usuario cuando ingresa una OTP, alinea los códigos únicos vinculados al origen que se envían por SMS.

La regla de formato es simple: termina el mensaje SMS con el dominio del receptor precedido por @ y la OTP precedida por #.

Por ejemplo:

Your OTP is 123456

@web-otp.glitch.me #123456

El uso de un formato estándar para los mensajes OTP hace que la extracción de códigos desde ellos sea más fácil y 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 según 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 únicos vinculada 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 la OTP se pasa a JavaScript, el sitio web puede usarla en un formulario o POST directamente en el servidor.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
La API de WebOTP en acción.

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.