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 los números de teléfono desde la versión de Chrome para computadoras de escritorio.

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 en con solo presionar una vez sin tener que pasar de una app a otra. Chrome 93 extiende esta funcionalidad a para computadoras de escritorio. Sigue leyendo para obtener más información.

Introducción

Las OTP (contraseñas de un solo uso) por SMS se usan comúnmente para verificar un número de teléfono, por por ejemplo, como segundo paso en la autenticación o para verificar pagos en la Web. Sin embargo, todo el flujo de cambio de la computadora a un dispositivo móvil y abrir el SMS app, memorizando e ingresando la OTP en el sitio web original nuevamente en la computadora agrega fricción. Es fácil cometer errores de esta forma y es vulnerable a ataques de phishing.

La API de WebOTP les brinda a los sitios web la capacidad de realizar las siguientes acciones: obtener la contraseña de un solo uso de un mensaje SMS de forma programática y completará automáticamente el formulario para los usuarios con solo un toque, sin cambiar de aplicación. El SMS tiene un formato específico y está vinculado al origen, por lo que mitiga el de que los sitios web de phishing también roben la OTP.

la API de WebOTP en acción.

Un caso de uso que todavía no se admite en WebOTP es el de segmentación a números de teléfono. de verificación desde un dispositivo de escritorio remoto o una computadora portátil, La API solo funciona en dispositivos que tienen capacidades de telefonía. Ahora, la API admite la escucha 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 de escritorio

Probar

Requisitos previos

Demostración

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

  1. Ve a https://web-otp-demo.glitch.me/ en una computadora de escritorio. Haz clic en el botón Verificar.
  2. Envía el mensaje de texto exacto que apareció en pantalla desde un segundo teléfono al dispositivo Android.
  3. Cuando se entrega el SMS al dispositivo Android, aparece un diálogo en el que se pregunta si verificar el número de teléfono en la computadora de escritorio. Presiona Enviar para aprobar.
  4. En el escritorio, el código de verificación enviado al dispositivo Android debe ser que se autocompletan 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 correspondiente a los códigos únicos vinculados al origen.

Your OTP is: 123456.

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

Observa que la última línea contiene el origen que se vinculará para que aparezca precedido por un @. seguida de la OTP precedida por #.

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

Obtén más información en Verifica 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 es independiente de la plataforma. Cualquier uso casos en dispositivos móviles deben ser aplicables a los dispositivos de escritorio.

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

Interoperabilidad y compatibilidad con navegadores

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

Si bien los motores de navegador distintos de Chromium no implementan la API de WebOTP, Safari comparte el mismo formato de SMS compatible con input[autocomplete="one-time-code"]. En Safari, siempre que un usuario activó la sincronización automática de iMessage, cuando un SMS que contenga que llega con el origen coincidente en iOS o iPadOS, el el mensaje se reenvía a macOS. Si el usuario se enfoca en el campo de entrada, Safari sugerirá la OTP que debe ingresar el usuario.

Comentarios

Tus comentarios son muy importantes para mejorar la API de WebOTP. Pruébalo y comunícanoslo. lo que piensas.

Foto de Luis Villasmil activado Eliminar salpicaduras