Autorrelleno de OTP por SMS: formatos para Android, iOS y web

Your Example code is 123456.

@example.com #123456

¿Cómo funciona el autorrelleno de OTP en la web?

Añada primero el atributo y después el JavaScript para los navegadores que lo admitan.

<input type="text" inputmode="numeric"
       autocomplete="one-time-code" name="otp" />

La documentación de Chrome recomienda el atributo por compatibilidad entre navegadores, y señala que Safari lo usa para sugerir el código de un SMS con el formato correcto aunque no tenga la API de JavaScript WebOTP.

Para Chrome en Android, llame a WebOTP con el transporte sms. La API requiere un origen seguro (HTTPS), y un AbortController permite cancelar la solicitud pendiente si el usuario escribe el código a mano.

if ("OTPCredential" in window) {
  const ac = new AbortController();
  const form = document.querySelector("form");
  const input = document.querySelector("input[autocomplete=one-time-code]");

  form.addEventListener("submit", () => ac.abort());

  navigator.credentials
    .get({ otp: { transport: ["sms"] }, signal: ac.signal })
    .then((otp) => {
      input.value = otp.code;
      form.submit();
    })
    .catch(() => {}); // user dismissed, or no matching SMS
}

El SMS debe seguir el formato vinculado al origen de la especificación WICG y la guía de Chrome: un código de cuatro a diez caracteres alfanuméricos con al menos un número antes de la última línea, y una última línea que empieza por @, el host, un solo espacio y # más el código. El host no debe contener espacios en blanco.

¿Puede un solo SMS funcionar en Android, iOS y la web?

A menudo sí, porque las reglas son compatibles. Ponga primero el texto legible, el hash de Android en una línea por encima del final y la línea vinculada al dominio en último lugar. Esta disposición se deduce de las reglas documentadas, no es una garantía de ningún proveedor: pruébela.

Your Example code is 483921. Do not share it.
Ab3dE+9xYz1
@example.com #483921

Por qué este orden: Apple y la especificación web piden el dominio y el código en la última línea. Google exige el hash de 11 caracteres en algún lugar del mensaje pero, en la página que consultamos, no fija su posición. El ejemplo anterior ocupa 78 bytes en caracteres latinos simples, muy por debajo del límite de 140 bytes.

Lista de comprobación antes de publicar:

1. El código es un único elemento, claramente separado de otros dígitos del texto.
2. El dominio de la última línea coincide con el sitio y con el dominio asociado de la app.
3. La longitud total está dentro de los 140 bytes en la variante Retriever.
4. El hash corresponde a la clave de firma de la compilación que se prueba.
5. Probado en un móvil de cada plataforma, con los operadores por los que realmente envía.

¿Qué ocurre con el árabe y el texto Unicode?

Mantenga el código y las dos partes legibles por máquina en texto simple. El límite de Google está en bytes, y un SMS Unicode admite muchos menos caracteres que uno GSM-7: 70 frente a 160 en un solo segmento (consulte límites de caracteres del SMS y Unicode). Una frase en árabe consume enseguida el margen, y un solo carácter fuera de GSM convierte todo el mensaje a Unicode.

Enfoque seguro: el código en dígitos latinos, @dominio #código en ASCII y el texto en árabe breve. No hemos encontrado documentación oficial que describa el autorrelleno de códigos escritos con otros sistemas de dígitos, así que no lo tratamos y recomendamos probar antes de usarlo.

¿Cómo gestionan el autorrelleno las plantillas de autenticación de WhatsApp?

Las plantillas de autenticación de Meta incluyen tres estilos de botón, cada uno con un texto de cuerpo fijo con la forma <code> is your verification code.

La documentación de Meta señala también que, en iOS 26 y posteriores, las sugerencias del teclado ofrecen autorrelleno sin integración, y que los usuarios de plataformas sin zero-tap reciben un botón de copiar código. Puede fijar una caducidad con code_expiration_minutes, y la API de vista previa acepta valores de 1 a 90 minutos. Compare los canales en OTP por WhatsApp frente a OTP por SMS.

Ejemplo práctico: el inicio de sesión de una app de transporte con conductor

«Qafila Rides» (ficticia) tiene una app de Android, una app de iOS y un sitio móvil en qafila.example.

1. La app de Android inicia SMS Retriever cuando el usuario toca «Enviar código».
2. El backend genera un código de seis dígitos, válido unos minutos, y envía el mensaje de tres líneas anterior mediante la API de SMS.
3. Android entrega el mensaje a la app. iOS ofrece el código sobre el teclado. En el sitio móvil, Safari lo sugiere y Chrome lo rellena mediante WebOTP.
4. El servidor valida el código una sola vez, rechaza la reutilización y los códigos caducados, y limita la frecuencia de las solicitudes.
5. Si el SMS no se confirma en un tiempo breve, el backend ofrece una plantilla de autenticación de WhatsApp como segunda vía.

¿Cuáles son los errores habituales?

• Código que no va solo. Otros números (teléfono, precio, fecha) junto al código confunden la detección. Un código por mensaje.
• Hash incorrecto. El hash sigue al certificado de firma. Un hash de una clave de depuración no coincidirá con una compilación de producción.
• Dominio que no coincide. @example.com debe coincidir con el sitio o el dominio asociado; si no, iOS y WebOTP no ofrecerán el código.
• Última línea rota. Cualquier cosa después de #código, un espacio ausente o un espacio en blanco dentro del dominio rompen el formato.
• Mensaje demasiado largo o con mucho Unicode, que supera el límite de 140 bytes de Retriever.
• Escuchar demasiado tarde. La API User Consent ignora los mensajes recibidos antes de iniciarse.
• Usar el autorrelleno como seguridad. El autorrelleno es comodidad. Valide siempre en el servidor, haga caducar los códigos, limite los intentos y vigile el fraude de SMS pumping.
• Alcance. Esta guía recoge el comportamiento documentado en el momento de redactarla. Las reglas de las plataformas cambian, así que revise las fuentes enlazadas antes de publicar.

Para la redacción de los mensajes y la elección de la caducidad, consulte nuestra guía de mensajes OTP y de autenticación.

Cómo ayuda OmniChannels.ai

OmniChannels.ai envía OTP por SMS y WhatsApp mediante la conectividad directa con operadores de BroadNet, de modo que usted controla el texto exacto del mensaje del que depende su formato de autorrelleno. Las plantillas de WhatsApp cubren la autenticación con copiar código, one-tap y zero-tap. La conmutación entre canales, por ejemplo WhatsApp y después SMS, se configura por caso de uso, y los estados de entrega llegan en un único formato de webhook. Consulte la documentación de la API de SMS, la documentación de la API de WhatsApp y la solución OTP.