Passer au contenu principal




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


Mise à jour

¿Qué es la API de Web OTP?

En estos días, la mayoría de las gens 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 serveur del desarrollador demuestra el control del número de teléfono.

La API de Web OTP se llamaba originalmente API de receptor de SMS. Es posible que todavía lo vea con ese nombre en algunos lugares. Si usó esa API, aún debería leer este artículo. Existen diferencias significativas entre las versiones actual y anterior de la API.

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

  • Número de teléfono como identificador del Nom d'utilisateur. 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 conversion 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 programmation a partir de un mensaje SMS y verificar un número de teléfono para el usuario más fácilmente.

Avertissement:
Los atacantes pueden falsificar SMS y secuestrar el número de teléfono de una persona. Los operadores también pueden reciclar números de teléfono para nuevos usuarios después de cerrar una cuenta. Si bien SMS OTP es útil para verificar un número de teléfono para los casos de uso anteriores, recomendamos usar formas adicionales y más fuertes de autenticación (como múltiples factores y la API de autenticación web para establecer nuevas sesiones para estos usuarios.

État actuel

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

Il a passé

État

1. Créez un explicatif

Compléter

2. Créer une ébauche de spécification initiale

Compléter

3. Recueillez les commentaires et répétez la conception

Compléter

4. Preuve de l'origine

Compléter

5. Lancez

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 le navigateur ya no es necesario en el mensaje.

Voyez-le en action

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 Chèque
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 Poursuivre.

Todo el proceso está diagramado en la siguiente imagen.

diagram-5140753

Diagrama de API de Web OTP

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 être el remitente cuando se utiliza la API de Web OTP.

  1. Aller 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.

Mise en garde:

  • Si el número de teléfono del remitente está incluido en la lista de contactos del destinatario, esta API no se activará debido al diseño del subyacente. API de consentimiento de usuario de SMS.
  • Si está utilizando un perfil de trabajo en su dispositivo Android y la Web OTP no funciona, intente instalar y utilizar Chrome en su perfil personal (es decir, el mismo perfil en el que recibe mensajes SMS).

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

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

Cubriré el etiqueta primero.

Anote un hashtag

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

Esto permite que Safari 14 o posterior sugiera que el usuario complete automáticamente el
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>
<contribution Saisie automatique="one-time-code" obligatoire/>
<contribution taper="nous faire parvenir">
</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

si ('OTPCredential' dans la fenêtre) {
la fenêtre.addEventListener('DOMContentLoaded', et => {
const contribution = document.querySelector('input[autocomplete="one-time-code"]');
si (!contribution) revenir;
const ac = new AbortController();
const form = contribution.closest('form');
si (form) {
form.addEventListener('submit', et => {
ac.abort();
});
}
navigateur.crédits.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
contribution.valeur = otp.code;
si (form) form.nous faire parvenir();
}).catch(err => {
console.Journal(err);
});
});
}

Détection des fonctionnalités

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

JavaScript

si ('OTPCredential' dans la fenêtre) {
la fenêtre.addEventListener('DOMContentLoaded', et => {
const contribution = document.querySelector('input[autocomplete="one-time-code"]');
si (!contribution) revenir;

const form = contribution.closest('form');

});
}

Mise en garde:
La API Web OTP requiere un origen seguro (HTTPS). La detección de funciones en un sitio web HTTP fallará.

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


navigateur.crédits.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 objet.

Le contenu de obtenido OTPCredential objet

{
code: "123456"
taper: "otp"
}

A continuación, pase el valor de OTP al campo. Enviar el formulario directamente eliminará el paso que requiere que el usuario toque un botón.

JavaScript


navigateur.crédits.get({
otp: { transport:['sms'] }

}).then(otp => {
contribution.valeur = otp.code;
si (form) form.nous faire parvenir();
}).catch(err => {
console.Erreur(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

objet.

JavaScript


const ac = new AbortController();

si (form) {
form.addEventListener('submit', et => {
ac.abort();
});
}

navigateur.crédits.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.

Par exemple:

Your OTP is: 123456.

@www.example.com #123456

Ville

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.

Questions les plus fréquentes

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

Vous avez trouvé un bogue avec la mise en œuvre de Chrome?

  • Signaler un bogue dans
    https://new.crbug.com. Incluez autant de détails que possible, des instructions simples à reproduire et à configurer Composants (modifier) à 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 tweeter à @Cromodev avec
#webotp et faites-nous savoir où et comment vous l'utilisez.

¿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().
  • Les 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 contribution 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.