A partir de Chrome 93, los sitios web pueden verificar números de teléfono desde Chrome para computadoras.
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 solo toque sin cambiar de app. Chrome 93 también extiende esta funcionalidad a las computadoras. Sigue leyendo para obtener más información.
Introducción
Las OTP (contraseñas de un solo uso) por SMS suelen usarse para verificar un número de teléfono, por ejemplo, como segundo paso en la autenticación o para verificar pagos en la Web. Sin embargo, todo el flujo de cambiar de una computadora de escritorio a un dispositivo móvil, abrir la app de SMS, memorizar y, luego, ingresar la OTP en el sitio web original en la computadora de escritorio agrega fricción. Es fácil cometer errores de esta manera y es vulnerable a ataques de phishing.
La API de WebOTP les permite a los sitios web obtener de forma programática la contraseña de un solo uso a partir de un mensaje SMS y completar automáticamente el formulario para los usuarios con solo presionar una vez sin cambiar de app. El SMS tiene un formato específico y está vinculado al origen, por lo que 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 es segmentar 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 detección de SMS recibidos en otros dispositivos para ayudar a los usuarios a completar la verificación de números 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 Android con la versión 20.30.12 o posterior de los Servicios de Google Play
- Chrome 93 o versiones posteriores, tanto en computadoras de escritorio o laptops como en dispositivos móviles La versión beta de Chrome 93 está disponible desde finales de julio de 2021.
- Debes acceder a la misma Cuenta de Google en Chrome para computadoras y Chrome para dispositivos móviles. 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 a través de "Configuración->Google".
- Chrome 93 debe ser el navegador predeterminado en el dispositivo Android.
- Chrome 93 debe estar ejecutándose en primer o segundo plano en el dispositivo Android.
Demostración
Para probar este flujo de verificación de números de teléfono sin problemas en una computadora, sigue estos pasos:
- Ve a https://web-otp-demo.glitch.me/ en una computadora 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 entrega el SMS al dispositivo Android, aparece un diálogo que te pregunta si quieres verificar el número de teléfono en la computadora. Presiona Enviar para confirmar.
- En computadoras, el código de verificación que se envió al dispositivo Android debería 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 de un solo uso vinculados al origen.
Your OTP is: 123456.
@web-otp-demo.glitch.me #123456
Observa que la última línea contiene el origen al que se vinculará, precedido de un @, seguido de la OTP precedida de un #.
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. 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(). Luego, el sitio web puede extraer la OTP y completar el proceso de verificación.
Obtén más información en 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
La verificación de números de teléfono por SMS es muy utilizada y no depende de la plataforma. Todos los casos de uso en dispositivos móviles deben aplicarse a los dispositivos de escritorio.
El uso de la API de WebOTP en computadoras es el mismo que en dispositivos móviles, por lo que los sitios web pueden implementar el mismo código en todas las plataformas.
Compatibilidad y interoperabilidad con navegadores
Esta función se basa en la Sincronización de Chrome, por lo que, por el momento, solo funciona en Chrome. No se admiten la recepción ni la transmisión de SMS en iOS o iPadOS 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 llegue un SMS que contenga un formato de código de un solo uso vinculado al origen con el origen coincidente en iOS o iPadOS, el mensaje se reenviará a macOS. Si el usuario se enfoca en el campo de entrada, Safari le sugerirá la OTP para que la ingrese.
Comentarios
Tus comentarios son muy valiosos para mejorar la API de WebOTP. Pruébala y comunícate con nosotros para contarnos qué te parece.
Foto de Luis Villasmil en Unsplash