Cómo verificar un número de teléfono en una computadora de escritorio con la API de WebOTP

A partir de Chrome 93, los sitios web pueden verificar números de teléfono desde Chrome para computadoras de escritorio.

Yi gu
Yi Gu
Eiji Kitamura
Eiji Kitamura

WebOTP ayuda a los usuarios a ingresar un código de verificación de número de teléfono en un sitio web móvil con un toque sin cambiar de app. En Chrome 93, también se extiende esta funcionalidad a las computadoras de escritorio. Continúa leyendo para obtener más información.

Introducción

Por lo general, las OTP (contraseñas de un solo uso) de SMS se usan para verificar un número de teléfono (por ejemplo, como un segundo paso de autenticación) o para verificar pagos en la Web. Sin embargo, todo el flujo de cambiar de la computadora a los dispositivos móviles, abrir la app de SMS, memorizar e ingresar la OTP en el sitio web original en la computadora de escritorio genera inconvenientes. De esta forma, es fácil cometer errores y es vulnerable a los ataques de suplantación de identidad (phishing).

La API de WebOTP permite que los sitios web obtengan de forma programática la contraseña de un solo uso a partir de un mensaje SMS y que completen automáticamente el formulario para los usuarios con solo un toque, sin cambiar de app. El SMS tiene un formato específico y está vinculado al origen, por lo que también se mitiga el riesgo de que los sitios web de suplantación de identidad roben la OTP.

La API de WebOTP en acción.

Un caso de uso que aún no se admite en WebOTP es el de las solicitudes de verificación de números de teléfono desde un dispositivo de escritorio remoto o una laptop (la API solo funciona en dispositivos con capacidades de telefonía. La API ahora admite la detección de SMS recibidos en otros dispositivos para ayudar a los usuarios a completar la verificación del número de teléfono en computadoras de escritorio en Chrome 93.

API de WebOTP en computadoras.

Probar

Requisitos previos

Demostración

Para probar este flujo sencillo de verificación del número de teléfono en una computadora de escritorio, sigue estos pasos:

  1. Ve a https://web-otp-demo.glitch.me/ en tu computadora. Haz clic en el botón Verificar.
  2. Envía el mensaje de texto exacto que estaba en la pantalla desde un segundo teléfono al dispositivo Android.
  3. Cuando se entregue el SMS al dispositivo Android, aparecerá un diálogo en el que se te preguntará si quieres verificar el número de teléfono en el escritorio. Presiona Enviar para aprobarlo.
  4. En la computadora de escritorio, el código de verificación que se envía al dispositivo Android debe completarse automáticamente en el campo de entrada.

Cómo funciona la API de WebOTP

Veamos cómo funciona la API de WebOTP:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

El mensaje SMS debe tener el formato de los códigos únicos vinculados al origen.

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

Ten en cuenta que la última línea contiene el origen que se vinculará antes de @ y, luego, de la OTP precedida de #.

Cuando llega el mensaje de texto, aparece una barra de información que le solicita al usuario que verifique su número de teléfono. Una vez que el usuario hace clic en el botón Verify, el navegador reenvía automáticamente la OTP al sitio y resuelve la navigator.credentials.get(). Luego, el sitio web puede extraer la OTP y completar el proceso de verificación.

Obtén más información en el artículo Cómo verificar números de teléfono en la Web con la API de WebOTP.

Cómo usar la API de WebOTP en computadoras de escritorio

La verificación del número de teléfono por SMS se usa mucho y no depende de ninguna plataforma. Todos los casos de uso en dispositivos móviles deben aplicarse a dispositivos de escritorio.

El uso de la API de WebOTP en computadoras de escritorio es igual que en dispositivos móviles, por lo que los sitios web pueden implementar el mismo código en todas las plataformas.

Interoperabilidad y compatibilidad del navegador

Esta función cuenta con la tecnología de la Sincronización de Chrome, por lo que solo funciona en Chrome por el momento. No se admite la recepción ni la transmisión de SMS en el sistema operativo iOS o iPad en Chrome.

Si bien los motores de navegadores que no son Chromium no implementan la API de WebOTP, Safari comparte el mismo formato de SMS con su compatibilidad con input[autocomplete="one-time-code"]. En Safari, siempre que un usuario haya activado la sincronización automática de iMessage, cuando llega un SMS que contiene un formato de código único vinculado al origen con el origen coincidente en iOS o iPadOS, el mensaje se reenvía a macOS. Si el usuario se enfoca en el campo de entrada, Safari le sugerirá la OTP que debe ingresar.

Comentarios

Tus comentarios son muy importantes para mejorar la API de WebOTP. Pruébala y danos tu opinión.

Foto de Luis Villasmil en Unsplash