Verifica números de teléfono en la Web con la API de WebOTP

Ayuda a los usuarios con las OTP que se reciben por SMS

Eiji Kitamura

¿Qué es la API de WebOTP?

En la actualidad, la mayoría de las personas en el mundo tienen un dispositivo móvil, y los desarrolladores por lo general, usan números de teléfono como identificadores para los usuarios de sus servicios.

Existen varias formas de verificar los números de teléfono, pero una solicitud La contraseña de un solo uso (OTP) enviada por SMS es una de las más comunes. Enviando este código de regreso al servidor del desarrollador demuestra el control del número de teléfono.

Esta idea ya se implementa en muchas situaciones para lograr lo siguiente:

  • El número de teléfono como identificador para el usuario. Cuando te registres en un nuevo de servicio, algunos sitios web solicitan un número de teléfono en lugar de una dirección de correo electrónico y usarlo como identificador de cuenta.
  • Verificación en dos pasos Cuando accedes, un sitio web solicita un código de uso único enviados a través de SMS sobre una contraseña u otro factor de conocimiento para obtener seguridad.
  • Confirmación del pago. Cuando un usuario realiza un pago y solicita un un código único que se envía por SMS puede ayudar a verificar la intención de la persona.

El proceso actual crea fricción para los usuarios. Cómo buscar una OTP en un SMS mensaje, copiarlo y pegarlo en el formulario es un proceso engorroso y los porcentajes de conversiones en los recorridos críticos del usuario. Facilitar este proceso es una larga trayectoria para la Web de muchos de los desarrolladores más importantes del mundo. Android tiene una API que hace exactamente eso. Lo mismo ocurre iOS. y Safari.

La API de WebOTP permite que tu app reciba mensajes con formato especial vinculados a el dominio de tu app. De esta forma, puedes obtener de forma programática una OTP a partir de un SMS y verificar un número de teléfono para el usuario con mayor facilidad.

Observa cómo funciona

Supongamos que un usuario desea verificar su número de teléfono con un sitio web. El sitio web envía un mensaje de texto al usuario por SMS y este ingresa la OTP del para verificar la propiedad del número de teléfono.

Con la API de WebOTP, estos pasos son tan sencillos como presionar una vez para el usuario, se demuestra en el video. Cuando llega el mensaje de texto, aparece una hoja inferior y le pide al usuario que verifique su número de teléfono. Después de hacer clic en el botón Verificar de la hoja inferior, el navegador pega la OTP en el formulario y la se envía sin que el usuario tenga que presionar Continuar.

El proceso completo está diagramado en la imagen a continuación.

Diagrama de la API de WebOTP
.

Prueba la demostración por tu cuenta. No pide tu número de teléfono o enviar un SMS a tu dispositivo, pero puedes enviar uno desde de otro dispositivo copiando el texto que aparece en la demostración. Esto funciona porque no importa quién sea el remitente cuando se usa la API de WebOTP.

  1. Ve a https://web-otp.glitch.me en Chrome 84 o más adelante en un dispositivo Android.
  2. Envía a tu teléfono el siguiente mensaje de texto SMS desde otro teléfono.
Your OTP is: 123456.

@web-otp.glitch.me #12345

¿Recibiste el SMS y viste un mensaje para ingresar el código en el área de entrada? Así es como funciona la API de WebOTP para los usuarios.

El uso de la API de WebOTP consta de tres partes:

  • Una etiqueta <input> anotada correctamente
  • JavaScript en tu app web
  • Texto del mensaje con formato enviado por SMS.

Primero, abordaré la etiqueta <input>.

Anota una etiqueta <input>

WebOTP funciona sin ninguna anotación HTML, pero para varios navegadores compatibilidad, te recomendamos que agregues autocomplete="one-time-code" a la etiqueta <input> en la que esperas que el usuario ingrese una OTP

Esto permite que Safari 14 o versiones posteriores sugieran que el usuario autocomplete el <input>. con una OTP cuando reciben un SMS con el formato descrito en Cómo dar formato al mensaje SMS, aunque no sea compatible con WebOTP.

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

Usa la API de WebOTP

Dado que WebOTP es simple, solo copiar y pegar el siguiente código hará lo siguiente: el trabajo. De todos modos, te explicaré lo que sucede.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

Detección de funciones

La detección de funciones es igual para muchas otras APIs. Escuchando El evento DOMContentLoaded esperará a que el árbol del DOM esté listo para la consulta.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

Procesa la OTP

La API de WebOTP en sí es bastante simple. Usa navigator.credentials.get() para obtener la OTP. WebOTP agrega una nueva opción otp a ese método. Solo tiene una propiedad: transport, cuyo valor debe ser un array con la cadena 'sms'.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

Esto activa el flujo de permisos del navegador cuando llega un mensaje SMS. Si el permiso es otorgada, la promesa que se muestra se resuelve con un objeto OTPCredential.

Contenido del objeto OTPCredential obtenido

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

A continuación, pasa el valor de la OTP al campo <input>. Cómo enviar el formulario directamente eliminará el paso de requerir que el usuario presione un botón.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

Anular el mensaje

Si el usuario ingresa manualmente una OTP y envía el formulario, puedes cancelar la Llamada get() a través de una instancia de AbortController en el objeto options.

JavaScript 

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

Da formato al mensaje SMS

La API en sí debe parecer bastante simple, pero hay algunas cosas que debes saber antes de usarlo. El mensaje debe enviarse después del Se llama a navigator.credentials.get() y debe recibirse en el dispositivo. donde se llamó a get(). Por último, el mensaje debe cumplir con los siguientes formato:

  • El mensaje comienza con (opcional) texto legible por humanos que contiene un número de cuatro a diez string alfanumérica de caracteres con, al menos, un número que sale de la última línea para la URL y la OTP.
  • La parte del dominio de la URL del sitio web que invocó la API debe estar precedida de @.
  • La URL debe contener un signo numeral ("#") seguido de la OTP.

Por ejemplo:

Your OTP is: 123456.

@www.example.com #123456

Estos son malos ejemplos:

Ejemplo de texto de SMS con formato incorrecto Por qué no funciona
Here is your code for @example.com #123456 Se espera que @ sea el primer carácter de la última línea.
Your code for @example.com is #123456 Se espera que @ sea el primer carácter de la última línea.
Your verification code is 123456

@example.com\t#123456		 Se espera un solo espacio entre @host y #code.
Your verification code is 123456

@example.com  #123456		 Se espera un solo espacio entre @host y #code.
Your verification code is 123456

@ftp://example.com #123456		 No se puede incluir el esquema de URL.
Your verification code is 123456

@https://example.com #123456		 No se puede incluir el esquema de URL.
Your verification code is 123456

@example.com:8080 #123456		 No se puede incluir el puerto.
Your verification code is 123456

@example.com/foobar #123456		 No se puede incluir la ruta.
Your verification code is 123456

@example .com #123456		 No hay espacios en blanco en el dominio.
Your verification code is 123456

@domain-forbiden-chars-#%/:<>?@[] #123456		 No hay caracteres prohibidos en el dominio.
@example.com #123456

Mambo Jumbo		 Se espera que @host y #code sean la última línea.
@example.com #123456

App hash #oudf08lkjsdf834		 Se espera que @host y #code sean la última línea.
Your verification code is 123456

@example.com 123456		 Falta #.
Your verification code is 123456

example.com #123456		 Falta @.
Hi mom, did you receive my last text Faltan @ y #.

Demostraciones

Prueba varios mensajes con la demostración: https://web-otp.glitch.me

También puedes bifurcarlo y crear tu versión: https://glitch.com/edit/#!/web-otp.

Cómo usar WebOTP desde un iframe de origen cruzado

Por lo general, se suele ingresar una OTP por SMS a un iframe de origen cruzado para los pagos confirmación, en especial con 3D Secure. Tener el formato común compatible iframes de origen cruzado, la API de WebOTP entrega OTP vinculadas a orígenes anidados. 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 la tarjeta de crédito, el proveedor de pagos integrado mostrará un formulario de bank.example dentro de un iframe que le solicita al usuario que verifique su número de teléfono para agilizar la confirmación de la compra.
  • bank.example envía un SMS con una OTP al usuario para que pueda ingrésalo para verificar su identidad.

Para usar la API de WebOTP desde un iframe de origen cruzado, debes seguir dos pasos:

  • Anotar el origen del fotograma superior y el origen del iframe en el texto del SMS mensaje.
  • Configurar la política de permisos para permitir que el iframe de origen cruzado reciba OTP directamente del usuario.
API de WebOTP dentro de un iframe en acción.

Puedes probar la demostración en https://web-otp-iframe-demo.stackblitz.io.

Anotar los orígenes vinculados al mensaje de texto SMS

Cuando se llama a la API de WebOTP desde un iframe, el mensaje de texto SMS debe Incluye el origen del fotograma superior precedido por @ seguido de la OTP precedida por #. y el origen de iframe precedido por @ en la última línea.

Your verification code is 123456

@shop.example #123456 @bank.exmple

Configurar la política de permisos

Para usar WebOTP en un iframe de origen cruzado, el insertador debe otorgar acceso a este API a través de la política de permisos de otp-credentials para evitar acciones el comportamiento de los usuarios. En general, existen dos formas de lograr este objetivo:

a través del encabezado HTTP:

Permissions-Policy: otp-credentials=(self "https://bank.example")

a través del atributo iframe allow:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

Consulta más ejemplos sobre cómo especificar una política de permisos .

Usa WebOTP en computadoras

En Chrome, WebOTP 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.

. API de WebOTP en computadoras de escritorio

Esta función requiere que el usuario acceda a la misma Cuenta de Google en ambos la versión para computadoras de escritorio de Chrome y Android Chrome.

Todo lo que los desarrolladores tienen que hacer es implementar la API de WebOTP en su sitio web de escritorio, del mismo modo en que lo hacen en su sitio web móvil, pero no se recomienda como en los productos necesarios.

Obtén más información en Cómo verificar un número de teléfono en una computadora de escritorio con la API de WebOTP.

Preguntas frecuentes

El cuadro de diálogo no aparece aunque estoy enviando un mensaje con el formato correcto. ¿Cuál es el problema?

Cuando se prueba la API, debes tener en cuenta las siguientes advertencias:

  • Si el número de teléfono del remitente se incluye en la lista de contactos del destinatario, este La API no se activará debido al diseño de la API de SMS User Consent subyacente.
  • Si usas un perfil de trabajo en tu dispositivo Android y el WebOTP no no funciona, intenta instalar y usar Chrome en tu perfil personal (es decir, el mismo perfil en el que recibes los mensajes SMS).

Vuelve a revisar el formato para ver si el SMS tiene el formato correcto.

¿Esta API es compatible con diferentes navegadores?

Chromium y WebKit acordaron el formato de mensaje de texto SMS, y Apple anunció la compatibilidad de Safari a partir de iOS 14 y macOS Big Sur. Aunque Safari no admite la API de JavaScript de WebOTP, al anotando el elemento input con autocomplete=["one-time-code"], el valor predeterminado el teclado sugiere automáticamente que ingreses la OTP si el mensaje SMS cumple con el formato.

¿Es seguro usar SMS como método de autenticación?

Si bien las OTP por SMS son útiles para verificar un número de teléfono cuando el número se muestra primero siempre, la verificación del número de teléfono por SMS debe usarse con cuidado para lo siguiente: y reautenticación, ya que los operadores pueden tomar estos números de teléfono y reciclarlos. WebOTP es un mecanismo conveniente de reautenticación y recuperación, pero los servicios deben combinarla con factores adicionales, como un desafío de conocimiento, o usar la API de Web Authentication para una autenticación sólida.

¿Dónde puedo informar errores en la implementación de Chrome?

¿Encontraste un error en la implementación de Chrome?

  • Informa un error en https://new.crbug.com. Incluye tantos detalles como puedas, instrucciones simples para la reproducción y establece Componentes en Blink>WebOTP.

¿Cómo puedo ayudar con esta función?

¿Planeas usar la API de WebOTP? Tu apoyo público nos ayuda a priorizar y muestra a otros proveedores de navegadores la importancia de admitirlas. Envía un tweet a @ChromiumDev con el hashtag #WebOTP y cuéntanos dónde y cómo la utilizas.

Recursos