La API de WebOTP ahora puede recibir OTP desde los iframes.
Las OTP por SMS (contraseñas de un solo uso) se usan, por ejemplo, para verificar números de teléfono, por ejemplo, como un segundo paso de autenticación o pagos en la Web. Sin embargo, cambiar entre el navegador y la app de SMS, copiar y pegar o ingresar la OTP de forma manual facilita cometer errores y agrega fricción a la experiencia del usuario.
La API de WebOTP permite a los sitios web obtener de manera programática una contraseña de un solo uso de un mensaje SMS y, luego, ingresarla automáticamente en el formulario para los usuarios con solo presionar una vez, sin cambiar la app. El SMS tiene un formato especial y está vinculado al origen, por lo que también se mitigan las posibilidades de que los sitios web de phishing también roben la OTP.
Un caso de uso que aún no se admite en WebOTP tenía como objetivo un origen dentro de un iframe. Por lo general, se usa para confirmar el pago, especialmente con 3D Secure. Dado que tiene el formato común para admitir iframes de origen cruzado, la API de WebOTP ahora entrega OTP vinculados a orígenes anidados a partir de Chrome 91.
Cómo funciona la API de WebOTP
La API de WebOTP es bastante simple:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
El mensaje SMS debe formatearse con los códigos únicos vinculados al origen.
Your OTP is: 123456.
@web-otp.glitch.me #12345
Ten en cuenta que, en la última línea, contiene el origen que se vinculará con @
seguido de la OTP precedida por una #
.
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.
Aprende los conceptos básicos del uso de WebOTP en Verifica los números de teléfono en la Web con la API de WebOTP.
Casos de uso de iframes de origen cruzado
En los casos de pago, es común ingresar una OTP en un formulario dentro de un iframe de origen cruzado. Algunas entidades emisoras de tarjetas de crédito requieren un paso de verificación adicional para comprobar la autenticidad del pagador. Esto se denomina 3D Secure y, por lo general, el formulario se expone dentro de un iframe en la misma página como si fuera parte del flujo de pago.
Por ejemplo:
- Un usuario visita
shop.example
para comprar un par de zapatos con una tarjeta de crédito. - Después de ingresar el número de tarjeta de crédito, el proveedor de pagos integrado muestra un formulario de
bank.example
dentro de un iframe en el que se le solicita al usuario que verifique su número de teléfono para confirmar la compra rápidamente. bank.example
envía un SMS que contiene una OTP al usuario para que pueda ingresarla y verificar su identidad.
Cómo usar la API de WebOTP desde un iframe de origen cruzado
Para usar la API de WebOTP desde un iframe de origen cruzado, debes hacer dos cosas:
- Anota el origen del fotograma superior y el del iframe en el mensaje de texto SMS.
- Configura la política de permisos para permitir que el iframe de origen cruzado reciba la OTP directamente del usuario.
Puedes probar la demostración en https://web-otp-iframe-demo.stackblitz.io.
Anota los orígenes vinculados en el mensaje de texto SMS
Cuando se llama a la API de WebOTP desde un iframe, el mensaje de texto SMS debe incluir el origen del fotograma superior precedido de @
seguido de la OTP precedida de #
y del origen del iframe precedido por @
.
@shop.example #123456 @bank.exmple
Configura la política de permisos
Para usar WebOTP en un iframe de origen cruzado, el incorporador debe otorgar acceso a esta API mediante la política de permisos de credenciales otp-credentials para evitar comportamientos no deseados. En general, hay dos formas de lograr este objetivo:
- a través de encabezado HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- mediante el atributo iframe
allow
:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
Consulta más ejemplos para especificar una política de permisos .
Advertencias
Niveles de anidación
Por el momento, Chrome solo admite llamadas a la API de WebOTP desde iframes de origen cruzado que no tengan más de un origen único en su cadena principal. En los siguientes casos, sucede lo siguiente:
- a.com -> b.com
- a.com -> b.com -> b.com
- a.com -> a.com -> b.com
- a.com -> b.com -> c.com
El uso de WebOTP en b.com es compatible, pero no en c.com.
Ten en cuenta que la siguiente situación tampoco es compatible debido a la falta de demanda y las complejidades de la UX.
- a.com -> b.com -> a.com (llama a la API de WebOTP)
Interoperabilidad
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, en cuanto llega un SMS que contiene un formato de código único vinculado al origen con el origen coincidente, el teclado sugiere ingresar la OTP en el campo de entrada.
A partir de abril de 2021, Safari admite iframe con un formato de SMS único que usa %
.
Sin embargo, como concluyó la discusión sobre las especificaciones con @
, esperamos que converja la implementación del formato de SMS compatible.
Comentarios
Tus comentarios son muy importantes para mejorar la API de WebOTP, así que pruébala y danos tu opinión.
Recursos
- Verifica números de teléfono en la Web con la API de OTP web
- Prácticas recomendadas para el formulario de OTP por SMS
- API de WebOTP
- Códigos únicos vinculados al origen que se entregan por SMS
Foto de rupixen.com en Unsplash