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) entregada por SMS es común para confirmar el número de teléfono de un usuario. Hay algunos casos de uso para las OTP por SMS:

  • Autenticación de dos factores. Además del nombre de usuario y la contraseña, puedes usar las OTP por SMS se utiliza como un claro indicador de que la cuenta es propiedad de la persona que recibió el OTP por SMS.
  • La verificación del número de teléfono. Algunos servicios usan un número de teléfono como el nombre identificador principal. En estos servicios, los usuarios pueden ingresar su número de teléfono y el La OTP se recibió por SMS para demostrar su identidad. A veces se combina con un PIN constituya una autenticación de dos factores.
  • Recuperación de la cuenta. Cuando un usuario pierde el acceso a su cuenta, para poder recuperarlos. Enviar un correo electrónico a la dirección registrada o se suelen enviar OTP por SMS a su número de teléfono.
  • Confirmación de pago en sistemas de pago, algunos bancos o tarjetas de crédito las entidades emisoras solicitan autenticación adicional al pagador por motivos de seguridad. Las OTP por SMS se usan comúnmente para ese propósito.

En esta publicación, se explican las prácticas recomendadas para crear un formulario de OTP por SMS para el uso mencionado anteriormente. diferentes.

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 SMS de la OTP.
  • Usa la API de WebOTP.

Usa el elemento <input>

La práctica recomendada más importante es usar un formulario con un elemento <input>. puede seguir porque funciona en todos los navegadores. Incluso si otras sugerencias esta publicación no funciona en algunos navegadores, 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 aproveche al máximo del navegador.

type="text"

Dado que las OTP suelen ser números de cinco o seis dígitos, mediante Es posible que type="number" para un campo de entrada parezca intuitivo porque cambia el dispositivo móvil el teclado solo a números. Esto no se recomienda porque el navegador espera una campo de entrada sea un número contable en lugar de una secuencia de varios números lo que puede provocar un comportamiento inesperado. Usar type="number" provoca arriba y abajo botones que se mostrarán junto al campo de entrada; presionar estos botones aumenta o disminuye el número y puede quitar los ceros anteriores.

Usa type="text" en su lugar. Esta acción no convertirá el teclado del dispositivo móvil en números pero no hay problema, ya que la siguiente sugerencia para usar inputmode="numeric" sí ese trabajo.

inputmode="numeric"

Usa inputmode="numeric". para cambiar el teclado del dispositivo móvil a solo números.

Algunos sitios web usan type="tel" para los campos de entrada de OTP, ya que también convierte el teclado móvil solo en números (incluidos * y #) cuando enfocados. 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 usar el truco type="tel" de forma semánticamente incorrecto.

autocomplete="one-time-code"

autocomplete les permite a los desarrolladores especificar qué permiso debe proporcionar asistencia para autocompletar e informa al navegador sobre la tipo de información que se espera en el campo.

Usa autocomplete="one-time-code" cada vez que un usuario recibe un mensaje SMS mientras un está abierto, el sistema operativo analizará la OTP del SMS de forma heurística y el teclado sugerirá la OTP que debe ingresar el usuario. Solo funciona en Safari 12 y más adelante en iOS, iPadOS y macOS, pero recomendamos usarlo, ya que es una una forma sencilla de mejorar la experiencia de las OTP por SMS en esas plataformas.

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

autocomplete="one-time-code" mejora la experiencia del usuario, pero hay más de tu empresa lo que puede hacer asegurándose de que el mensaje SMS cumpla con el mensaje vinculado al origen formato.

Dar formato al texto de los SMS

Mejora la experiencia del usuario al ingresar una OTP. Para ello, alinea la conversación con los códigos únicos vinculados al origen que se envían por SMS especificación.

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 mensajes OTP hace que la extracción código de ellos sea más fácil y confiable. Asociando códigos OTP con sitios web hace que sea más difícil engañar a los usuarios para que les proporcionen un código a sitios maliciosos.

El uso de este formato tiene dos beneficios:

  • La OTP estará vinculada al dominio. Si el usuario se encuentra en dominios que no sean con la especificada en el mensaje SMS, la sugerencia de OTP no aparecerá. Además, reduce el riesgo de ataques de suplantación de identidad (phishing) y posibles usurpaciones de cuentas.
  • Ahora el navegador podrá extraer la OTP de manera confiable sin depender de una heurística misteriosa y inestable.

Cuando un sitio web usa autocomplete="one-time-code", Safari con iOS 14 o una versión posterior sugerirá la OTP según las reglas anteriores.

Este formato de mensaje SMS también beneficia a otros navegadores aparte de 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. recibidos en un mensaje SMS. Llamando navigator.credentials.get() con el tipo otp (OTPCredential) donde transport incluye sms, el sitio web esperará a que se envíe un SMS que cumpla con los códigos únicos vinculados al origen entregados y otorgados el acceso del usuario. Una vez que se pasa la OTP a JavaScript, el sitio web puede utilizarlo en un formulario o PUBLICARlo 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 más información sobre cómo usar la API de WebOTP en detalle en Cómo verificar números de teléfono en la Web con la API de WebOTP o copia y pega el siguiente fragmento. (Marca asegúrate de que el elemento <form> tenga configurados correctamente los atributos action y method).

// 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 Retiro: