Verificar números de teléfono en la web con la API de Web OTP

Ayudar a los usuarios con las OTP recibidas a través de SMS

7 de oct de 2019
Actualizado 14 de septiembre de 2020

¿Qué es la API de Web OTP?

En estos días, la mayoría de las personas en el mundo poseen un dispositivo móvil y los desarrolladores suelen usar números de teléfono como identificador para los usuarios de sus servicios.

Hay una variedad de formas de verificar los números de teléfono, pero una contraseña de un solo uso (OTP) generada aleatoriamente enviada por SMS es una de las más comunes. Enviar este código de vuelta al servidor del desarrollador demuestra el control del número de teléfono.

Esta idea ya está implementada en muchos escenarios para lograr:

• Número de teléfono como identificador del usuario. Al registrarse en un nuevo servicio, algunos sitios web solicitan un número de teléfono en lugar de una dirección de correo electrónico y lo utilizan como identificador de cuenta.
• Verificación de dos pasos. Al iniciar sesión, un sitio web solicita un código de un solo uso enviado por SMS además de una contraseña u otro factor de conocimiento para mayor seguridad.
• Confirmación de pago. Cuando un usuario realiza un pago, solicitar un código único enviado por SMS puede ayudar a verificar la intención de la persona.

El proceso actual crea fricciones para los usuarios. Encontrar una OTP dentro de un mensaje SMS, luego copiarlo y pegarlo en el formulario es engorroso, lo que reduce las tasas de conversión en los recorridos críticos del usuario. Aliviar esto ha sido una solicitud de muchos de los desarrolladores globales más importantes para la web. Android tiene una API que hace exactamente esto. También lo hace
iOS
y
Safari.

La API Web OTP permite que su aplicación reciba mensajes con formato especial vinculados al origen de su aplicación. A partir de esto, puede obtener una OTP mediante programación a partir de un mensaje SMS y verificar un número de teléfono para el usuario más fácilmente.

Estado actual

La siguiente tabla explica el estado actual de la API de Web OTP.

Paso	Estado
1. Crea un explicador	Completar
2. Crear borrador inicial de especificación	Completar
3. Recopile comentarios y repita el diseño	Completar
4. Prueba de origen	Completar
5. Lanzamiento	Cromo 84

Cambios de versiones anteriores

Las primeras versiones de esta API se llamaban SMS Receiver. Si está familiarizado con esa versión de la API, tenga en cuenta los cambios realizados. Las mejoras de la API del receptor de SMS incluyen:

• El formato de mensaje SMS ahora está alineado con WebKit.
• La página web solo recibe un código OTP independientemente de cualquier otra cosa que haya en el mensaje.
• El código hash de la aplicación del navegador ya no es necesario en el mensaje.

Míralo en acción

Supongamos que un usuario quiere 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 el usuario ingresa la OTP desde el mensaje para verificar la propiedad del número de teléfono.

Con la API de Web OTP, estos pasos son tan fáciles como un toque para el usuario, como se muestra 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 Verificar
en la hoja inferior, el navegador pega la OTP en el formulario y el formulario se envía sin que el usuario tenga que presionar Seguir.

Todo el proceso está diagramado en la siguiente imagen.

Tratar la demo usted mismo. No solicita su número de teléfono ni envía un SMS a su dispositivo, pero puede enviar uno desde otro dispositivo copiando el texto que se muestra en la demostración. Esto funciona porque no importa quién sea el remitente cuando se utiliza la API de Web OTP.

1. Ir https://web-otp.glitch.me en Chrome 84 o posterior en un dispositivo Android.
2. Envíe a su teléfono el siguiente mensaje de texto SMS desde el otro teléfono.

@web-otp.glitch.me #12345

¿Recibió el SMS y vio el mensaje para ingresar el código en el área de entrada? Así es como funciona la API Web OTP para los usuarios.

El uso de la API de Web OTP consta de tres partes:

• Un anotado correctamente <input> etiqueta
• JavaScript en su aplicación web
• Mensaje de texto con formato enviado por SMS.

Cubriré el <input> etiqueta primero.

Anote un <input> etiqueta

Web OTP en sí mismo funciona sin ninguna anotación HTML, pero para la compatibilidad entre navegadores, le recomiendo que agregue autocomplete="one-time-code" al <input> etiqueta donde espera que el usuario ingrese una OTP.

Esto permite que Safari 14 o posterior sugiera que el usuario complete automáticamente el <input>
campo con una OTP cuando reciben un SMS con el formato descrito en Formatear el mensaje SMS aunque no sea compatible con Web OTP.

HTML

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

Utilice la API de Web OTP

Debido a que Web OTP es simple, basta con copiar y pegar el siguiente código. Te guiaré a través de lo que está pasando de todos modos.

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 características

La detección de características es la misma que para muchas otras API. Escuchar
DOMContentLoaded El evento esperará a que el árbol DOM esté listo para realizar consultas.

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');
…
});
}

Procesar la OTP

La API de Web OTP en sí es bastante simple. Utilizar
navigator.credentials.get()

para obtener la OTP. Web OTP agrega un nuevo otp opción a ese método. Solo tiene una propiedad: transport, cuyo valor debe ser una matriz 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 se concede el permiso, la promesa devuelta se resuelve con un OTPCredential objeto.

Contenido de obtenido OTPCredential objeto

{
code: "123456" 
type: "otp"  
}

A continuación, pase el valor de OTP al <input> campo. Enviar el formulario directamente eliminará el paso que requiere que el usuario toque 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);
    });
    …

Abortar el mensaje

En caso de que el usuario ingrese manualmente una OTP y envíe el formulario, puede cancelar el
get() llamar usando un AbortController instancia en el options

objeto.

JavaScript

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

Formatear el mensaje SMS

La API en sí debería parecer lo suficientemente simple, pero hay algunas cosas que debe saber antes de usarla. El mensaje debe enviarse después
navigator.credentials.get() se llama y debe recibirse en el dispositivo donde get() fue llamado. Finalmente, el mensaje debe adherirse al siguiente formato:

• El mensaje comienza con texto legible por humanos (opcional) dejando la última línea para la URL y la OTP.
• La parte del host de la URL del sitio web que invocó la API debe estar precedida por @.
• La URL debe contener un signo de almohadilla (‘#‘) seguido de la OTP.

Por ejemplo:

Your OTP is: 123456.
@www.example.com #123456

Población

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

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

Preguntas más frecuentes

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

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

• Presentar un error en
  https://new.crbug.com. Incluya todos los detalles que pueda, instrucciones sencillas para reproducir y configurar Componentes a Blink>WebOTP.

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

¿Está pensando en utilizar la API de Web OTP? Su apoyo público nos ayuda a priorizar las funciones y muestra a otros proveedores de navegadores lo importante que es darles soporte. Enviar un tweet a @Cromodev con
#webotp y háganos saber dónde y cómo lo está usando.

¿Cuáles son las diferencias con la API del receptor de SMS?

Considere la API de Web OTP como una versión evolucionada de la API de receptor de SMS. La API Web OTP tiene algunas diferencias significativas en comparación con la API del receptor de SMS.

• El formato de texto esperado para el mensaje SMS ha cambiado.
• Ya no requiere que se incluya una cadena de hash de la aplicación en el mensaje SMS.
• El método llamado es ahora navigator.credentials.get() más bien que
  navigator.sms.receive().
• los get() recibe solo la OTP en lugar de todo el mensaje SMS como
  receive() hizo antes.
• Ahora es posible abortar la llamada a get().

¿Esta API es compatible con diferentes navegadores?

Chromium y WebKit acordaron el formato de mensaje de texto SMS y Apple anunció el apoyo de Safari para ello a partir de iOS 14 y macOS Big Sur. Aunque Safari no es compatible con la API de JavaScript de Web OTP, al anotar input elemento con autocomplete=["one-time-code"], el teclado predeterminado sugiere automáticamente que ingrese la OTP si el mensaje SMS cumple con el formato.

¿Es seguro utilizar SMS como forma de autenticación?

Si bien SMS OTP es útil para verificar un número de teléfono cuando se proporciona por primera vez, la verificación del número de teléfono a través de SMS debe usarse con cuidado para volver a autenticarse, ya que los operadores pueden secuestrar y reciclar los números de teléfono. Web OTP es un mecanismo conveniente de recuperación y restablecimiento, pero los servicios deben combinarlo con factores adicionales, como un desafío de conocimiento, o utilizar el
API de autenticación web
para una autenticación sólida.