A partir de Chrome 93, los sitios web pueden verificar números de teléfono desde 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 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
Las OTP (contraseñas de un solo uso) por SMS se usan, por lo general, 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 una computadora a un dispositivo móvil, abrir la app de SMS, memorizar e ingresar la OTP en el sitio web original en una computadora de escritorio genera inconvenientes. Es muy fácil cometer errores de esta forma y vulnerable a ataques de suplantación de identidad (phishing).
La API de WebOTP brinda a los sitios web la capacidad de obtener de manera programática una contraseña de un solo uso desde un mensaje SMS y completar 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 phishing también roben la OTP.
Un caso de uso que aún no se admite en WebOTP tiene como objetivo 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 que tienen capacidades de telefonía). La API ahora 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.
Probar
Requisitos previos
- Una computadora de escritorio o laptop (Windows, Mac, Linux o ChromeOS)
- Un teléfono con Servicios de Google Play versión 20.30.12 o posterior
- Chrome 93 o versiones posteriores, en computadoras de escritorio o laptops y dispositivos móviles Chrome 93 Beta está disponible a finales de julio de 2021.
- Debes acceder a la misma Cuenta de Google en la versión de escritorio de Chrome y en la versión móvil de Chrome. Por ejemplo, a través de https://myaccount.google.com/ o https://mail.google.com. No es necesario activar la sincronización.
- En tu dispositivo Android, debes acceder a Android en "Configuración -> Google".
- Chrome 93 debe ser el navegador predeterminado del dispositivo Android.
- Chrome 93 debe ejecutarse en primer o segundo plano en el dispositivo Android.
Demostración
Para probar este flujo fluido de verificación del número de teléfono en una computadora de escritorio, sigue estos pasos:
- Ve a https://web-otp-demo.glitch.me/ en computadoras de escritorio. Haz clic en el botón Verificar.
- Envía el mensaje de texto exacto que estaba en la pantalla desde un segundo teléfono al dispositivo Android.
- Cuando se envía el SMS al dispositivo Android, aparece un diálogo en el que se te pregunta si deseas verificar el número de teléfono en el escritorio. Presiona Enviar para aprobarla.
- En computadoras, 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 formatos de 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 debe ir precedido por @, seguida por la OTP precedida por #.
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 la página Cómo verificar los 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 de números de teléfono por SMS es muy utilizada y es independiente de la 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 Sincronización de Chrome, de modo que solo funciona en Chrome por el momento. No se admite la recepción ni la transmisión de SMS en el SO 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 un SMS que contiene un formato de código único vinculado al origen llega 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ébalo y danos tu opinión.
Foto de Luis Villasmil en Unsplash