Mejores prácticas para formularios SMS OTP

Aprenda a optimizar su formulario SMS OTP y mejorar la experiencia del usuario.

Eiji Kitamura

Pedirle a un usuario que proporcione la OTP (contraseña de un solo uso) entregada a través de SMS, es una forma común de confirmar el número de teléfono de un usuario. Hay algunos casos de uso para SMS OTP:

  • Autenticación en dos pasos. Además del nombre de usuario y la contraseña, el SMS OTP se puede utilizar como una fuerte señal de que la cuenta es propiedad de la persona que recibió el SMS OTP.
  • Verificación del número de teléfono. Algunos servicios utilizan un número de teléfono como identificador principal del usuario. En tales servicios, los usuarios pueden ingresar su número de teléfono y la OTP recibida a través de un SMS para probar su identidad. A veces se combina con un PIN para constituir una autenticación en dos pasos.
  • Recuperación de 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 un SMS OTP a su número de teléfono son métodos comunes de recuperación de cuentas.
  • Confirmación de pago. En los sistemas de pago, algunos bancos o emisores de tarjetas de crédito solicitan autenticación adicional al pagador por razones de seguridad. El SMS OTP se usa comúnmente para ese propósito.

Esta publicación explica las mejores prácticas para crear un formulario SMS OTP para los casos de uso anteriores.

Lista de Verificación

Para proporcionar la mejor experiencia de usuario con SMS OTP, siga estos pasos:

  • Utilice el elemento <input> con:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • Utilice @BOUND_DOMAIN #OTP_CODE como la última línea del mensaje SMS OTP.
  • Utilice la API de WebOTP.

Use el elemento <input>

El uso de un formulario con un elemento <input> es la mejor y la más importante práctica que puede seguir, ya que funciona en todos los navegadores. Incluso si otras sugerencias de esta publicación no funcionan en algún navegador, el usuario aún podrá ingresar y enviar la OTP manualmente.

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

Las siguientes son algunas ideas para garantizar que un campo de entrada saque el máximo partido a la funcionalidad del navegador.

type="text"

Dado que las OTP suelen ser números de cinco o seis dígitos, el uso de type="number" para un campo de entrada puede parecer intuitivo porque cambia el teclado móvil a números únicamente. Esto 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 provocar un comportamiento inesperado. El uso de type="number" hace que los botones de "hacia arriba" y "hacia abajo" se muestren al lado del campo de entrada; presionar estos botones aumenta o disminuye el número y puede eliminar los ceros precedentes.

En su lugar, utilice type="text". Esto no convertirá el teclado móvil solo en números, pero está bien porque el siguiente consejo para usar inputmode="numeric" hace ese trabajo.

inputmode="numeric"

Utilice inputmode="numeric" para cambiar el teclado del móvil a números únicamente.

Algunos sitios web usan type="tel" para los campos de entrada de OTP, ya que también convierte el teclado del teléfono solo en números (incluyendo * y #) cuando está enfocado. Este truco se usó en el pasado cuando inputmode="numeric" no era ampliamente compatible. Desde que Firefox comenzó a admitir inputmode="numeric", no es necesario utilizar el truco type="tel".

autocomplete="one-time-code"

El atributo autocomplete permite a los desarrolladores especificar qué permiso tiene el navegador para proporcionar asistencia de autocompletar, así como informar 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 ingrese. Solo funciona en Safari 12 y versiones posteriores en iOS, iPadOS y macOS, pero recomendamos encarecidamente su uso, porque es una forma fácil de mejorar la experiencia de SMS OTP en esas plataformas.

`autocomplete =" one-time-code "` en acción.

autocomplete="one-time-code" mejora la experiencia del usuario, pero puede hacer más si se asegura de que el mensaje SMS cumpla con el formato de mensaje vinculado al origen.

Formatee el texto del SMS

Mejore la experiencia del usuario de ingresar a una OTP al alinearse con la especificación de los códigos únicos vinculados al origen entregados a través de SMS.

La regla de formato es simple: Termine 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 de ellos sea más fácil y confiable. Asociar los códigos OTP con sitios web dificulta que los los usuarios sean engañados para que proporcionen un código a sitios maliciosos.

El uso de este formato ofrece algunos beneficios:

  • La OTP estará vinculada al dominio. Si el usuario está en dominios distintos al especificado en el mensaje SMS, la sugerencia de OTP no aparecerá. Esto también reduce el riesgo de ataques de phishing y posibles secuestros de cuentas.
  • El navegador ahora podrá extraer la OTP de manera confiable sin depender de heurísticas misteriosas y escabrosas.

Cuando un sitio web usa autocomplete="one-time-code", Safari con iOS 14 o posterior, sugerirá la OTP siguiendo las reglas anteriores.

Este formato de mensaje SMS también beneficia a otros navegadores además de 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".

Utilizar la API de WebOTP

La API de WebOTP proporciona acceso a la OTP recibida en un mensaje SMS. Al llamar a navigator.credentials.get() con el tipo otp (OTPCredential) donde 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 se le otorgue acceso por parte del usuario. Una vez que la OTP se pasa 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);
API de WebOTP en acción.

Aprenda a usar con detalle la API de WebOTP en Verificar números de teléfono en la web con la API de WebOTP o copie y pegue el siguiente fragmento. (Asegúrese de que el elemento <form> tenga los atributos method y action establecidos 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.