Verificación de los números de teléfono en la web con la API de WebOTP

# ¿Qué es la API de WebOTP?

En estos días, la mayoría de las personas en el mundo poseen un dispositivo móvil y los desarrolladores suelen usar números de teléfono como un identificador para los usuarios de sus servicios.

Existe una variedad de formas de verificar los números de teléfono, pero una de las más comunes es una contraseña de un solo uso (OTP) generada aleatoriamente y enviada por SMS. Enviar este código al servidor del desarrollador demuestra el control del número de teléfono.

Esta idea ya está implementada en muchos escenarios y se utiliza para distintas cosas:

• Número de teléfono como identificador del usuario. Al suscribirse a un nuevo servicio, algunos sitios web solicitan un número de teléfono en lugar de una dirección de correo electrónico y lo utilizan como identificador de cuenta.
• Verificación de dos pasos. Al iniciar sesión, un sitio web solicita un código de un solo uso enviado por SMS además de una contraseña u otro factor de conocimiento para mayor seguridad.
• Confirmación de pago. Cuando un usuario realiza un pago, solicitar un código único enviado por SMS puede ayudar a verificar la intención de la persona.

El proceso actual crea fricciones para los usuarios. Encontrar un OTP dentro de un mensaje SMS, para luego copiarlo y pegarlo en el formulario es incomodo, lo que reduce las tasas de conversión en los recorridos críticos del usuario. Aliviar este problema ha sido una de las mayores solicitudes de muchos grandes desarrolladores web, Android tiene una API que hace exactamente esto. Lo mismo ocurre con iOS y Safari.

La API de WebOTP permite que tu aplicación reciba mensajes con formato especial vinculados al dominio de tu aplicación. A partir de esto, puedes obtener un OTP mediante programación a partir de un mensaje SMS y verificar un número de teléfono para el usuario de una manera más sencilla.

# Míralo en acción

Supongamos que un usuario quiere verificar su número de teléfono con un sitio web. El sitio web envía un mensaje de texto al usuario por SMS y el usuario ingresa el OTP desde el mensaje para verificar la propiedad del número de teléfono.

Con la API de WebOTP, estos pasos son tan fáciles como un toque para el usuario, como se demostró en el video. Cuando llega el mensaje de texto, aparece una hoja inferior y le pide al usuario que verifique su número de teléfono. Después de hacer clic en el botón de Verificar en la hoja inferior, el navegador pega el OTP en el formulario y el formulario se envía sin que el usuario tenga que presionar Continuar.

Todo el proceso está explicado en la imagen a continuación.

Utiliza la demostración. No solicita tu número de teléfono ni envía un SMS a tu dispositivo, pero puedes enviar uno desde otro dispositivo copiando el texto que se muestra en la demostración. Esto funciona porque no importa quién sea el remitente cuando se usa la API de WebOTP.

1. Ve a https://web-otp.glitch.me en Chrome 84 o posterior en un dispositivo Android.
2. Envía a tu teléfono el siguiente mensaje de texto SMS desde el otro teléfono.

Tu OTP es: 123456.

@web-otp.glitch.me #12345

¿Recibiste el SMS y viste el mensaje para ingresar el código en el área de entrada? Así es como funciona la API de WebOTP para los usuarios.

El uso de la API de WebOTP consta de tres partes:

• Una etiqueta <input> anotada correctamente
• JavaScript en tu aplicación web
• Mensaje de texto con formato enviado por SMS.

Cubriré la parte de <input> primero.

# Anotar una etiqueta de <input>

WebOTP en sí mismo funciona sin ninguna anotación HTML, pero para la compatibilidad entre navegadores, te recomiendo que agregues autocomplete="one-time-code" a la etiqueta de <input> donde espera que el usuario ingrese una OTP.

Esto permite que Safari 14 o posterior sugiera que el usuario complete automáticamente el <input> con una OTP cuando reciba un SMS con el formato descrito en Formatear el mensaje SMS aunque no sea compatible con WebOTP.

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

# Utiliza la API de WebOTP

Debido a que WebOTP es simple, basta con copiar y pegar el siguiente código. De todos modos, te guiaré a través de lo que está sucediendo.

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

# Detección de características

La detección de características es la misma que para muchas otras API. Escuchar el evento deDOMContentLoaded hará que se espere a que el árbol DOM esté listo para realizar consultas.

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

# Procesar la OTP

La API de WebOTP es bastante simple. Utiliza navigator.credentials.get() para obtener la OTP. WebOTP agrega una nueva opción otp a ese método. Solo tiene una propiedad: transport, cuyo valor debe ser una matriz con la cadena 'sms'.

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

Esto activa el flujo de permisos del navegador cuando llega un mensaje SMS. Si el permiso es concedido, la promesa devuelta se resuelve con un objeto OTPCredential.

{
  code: "123456" // OTP obtenido
  type: "otp"  // el 'type' siempre debe de ser otp
}

A continuación, pasa el valor del OTP al campo de <input>. Enviar el formulario directamente eliminará el paso que requiere que el usuario toque un botón.

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

# Anulando el mensaje

En caso de que el usuario ingrese manualmente un OTP y envíe el formulario, puedes cancelar la llamada de get() utilizando una instancia de AbortController en el objeto de options.

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

# Formatee el mensaje SMS

La API en sí debería parecer lo suficientemente simple, pero hay algunas cosas que debes saber antes de usarla. El mensaje debe enviarse después de navigator.credentials.get() haya sido llamado y debe recibirse en el dispositivo donde se llamó a get(). Finalmente, el mensaje debe cumplir con el siguiente formato:

• El mensaje comienza con texto (opcional) legible por humanos que contiene una cadena alfanumérica de cuatro a diez caracteres con al menos un número dejando la última línea para la URL y el OTP.
• La parte del dominio de la URL del sitio web que invocó la API debe estar precedida por @.
• La URL debe contener un signo de almohadilla ('#') seguido del OTP.

Por ejemplo:

Tu OTP es: 123456.

@www.example.com #123456

Aquí hay unos malos ejemplos:

# Demostraciones

Prueba varios mensajes con la siguiente demostración: https://web-otp.glitch.me

También puedes bifurcarlo y crear tu versión: https://glitch.com/edit/#!/web-otp .

# Utiliza WebOTP desde un iframe de origen cruzado

Introducir un SMS OTP en un iframe de origen cruzado se suele utilizar para la confirmación del pago, especialmente con 3D Secure. Con el formato común para admitir iframes de origen cruzado, la API de WebOTP ofrece OTP vinculadas a orígenes anidados. Por ejemplo:

• Por ejemplo, un usuario visita la shop.example para comprar un par de zapatos con una tarjeta de crédito.
• Después de ingresar el número de la tarjeta de crédito, el proveedor de pago integrado muestra un formulario del bank.example dentro de un iframe que le pide al usuario que verifique su número de teléfono para un pago rápido.
• bank.example envía un SMS que contiene un OTP al usuario para que pueda ingresar y verificar su identidad.

Para usar la API de WebOTP desde dentro de un iframe de origen cruzado, debes hacer dos cosas:

• Anotar el origen del marco superior como el del iframe en el mensaje de texto SMS.
• Configurar la política de permisos para permitir que el iframe de origen cruzado reciba OTP del usuario directamente.

Puedes probar la demostración en https://web-otp-iframe-demo.stackblitz.io.

# Anotar los orígenes vinculados al mensaje de texto SMS

Cuando se llama a la API de WebOTP desde dentro de un iframe, el mensaje de texto SMS debe incluir el origen del marco superior precedido por @ y seguido de la OTP precedida por # y el origen del iframe precedido por @ en la última línea.

Tu código de verificación es 123456

@shop.example #123456 @bank.exmple

# Configurar la política de permisos

Para usar WebOTP en un iframe de origen cruzado, el incrustador debe otorgar acceso a esta API a través de la política de permisos de otp-credentials para evitar comportamientos no deseados. De manera general, existen dos formas de lograr este objetivo:

Permissions-Policy: otp-credentials=(self "https://bank.example")

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Consulta más ejemplos sobre cómo especificar una política de permisos.

# Preguntas frecuentes

# El cuadro de diálogo no aparece aunque estoy enviando un mensaje con el formato correcto. ¿Qué hice mal?

Hay un par de peculiaridades al probar la API:

• Si el número de teléfono del remitente está incluido en la lista de contactos del destinatario, esta API no se activará debido al diseño de la subyacente API de Consentimiento del usuario de SMS.
• Si estas utilizando un perfil de trabajo en tu dispositivo Android y WebOTP no funciona, intenta instalar y utilizar Chrome en tu perfil personal (es decir, el mismo perfil en el que recibes los mensajes SMS).

Vuelve a consultar el formato para ver si el formato de tu SMS está correcto.

# ¿Esta API es compatible entre diferentes navegadores?

Chromium y WebKit acordaron el formato de mensaje de texto SMS y Apple anunció el soporte de Safari para él a partir de iOS 14 y macOS Big Sur. Aunque Safari no es compatible con la API de JavaScript de WebOTP, al anotar el elemento de input con autocomplete=["one-time-code"], el teclado predeterminado sugiere automáticamente que ingrese el OTP si el mensaje SMS cumple con el formato.

# ¿Es seguro utilizar SMS como una forma de autenticación?

Si bien SMS OTP es útil para verificar un número de teléfono cuando se proporciona el número por primera vez, la verificación del número de teléfono a través de SMS debe usarse con cuidado para la reautenticación, ya que los operadores pueden secuestrar y reciclar los números de teléfono. WebOTP es un mecanismo conveniente de recuperación y restablecimiento, pero los servicios deben combinarlo con factores adicionales, como un desafío de conocimiento, o utilizar la API de Autenticación web para una autenticación sólida.

# ¿Dónde informo los errores en la implementación de Chrome?

¿Encontraste un error con la implementación de Chrome?

• Envianos un mensaje con el error a https://new.crbug.com. Incluye todos los detalles que puedas, instrucciones simples para reproducir y configure Componentes en Blink>WebOTP.

# ¿Cómo puedo mejorar esta función?

¿Te encuentras pensando en utilizar la API de WebOTP? Tu apoyo público nos ayuda a priorizar las funciones y mostrar a otros proveedores de navegadores lo importante que es brindarles compatibilidad. Envía un tweet a @ChromiumDev usando el hashtag #WebOTP y déjanos saber saber dónde y cómo lo estas usando.