Vérifiez les numéros de téléphone sur le Web avec l'API Web OTP

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

7 de oct de 2019
Mise à jour 14 septembre 2020

¿Qué es la APIConcepto de API¿Qué es una API?Una API, siglas de Application Programming Interface o Interfaz de Programación de Apps, es un recopilatorio de código que se puede emplear para que varias apps se comuniquen entre ellas. Es algo que realiza una tarea equivalente a la interfaz de usuario al momento de promover la interacción entre persona y programa, solo que aplicado única y exclusivamente dentro del entorno del software.Aún cuando suene Suite de Web OTP?

En estos días, la mayoría de las gensLas personas son personalidades imaginarias que representan a un determinado grupo objetivo. En el marketing online, las personas ayudan a entender mejor a los usuarios de un portal web o a los clientes de una tienda online. Concepto de personas Para que las personas puedan ejercer su efecto positivo, deben ser lo más detalladas viable. Esto conlleva un término exhaustiva de los grupos destinatarios para conseguir datos empíricos. La próxima Suite 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¿Qué es SMS o Short Message Service?Servicio que permite el intercambio de mensajes de texto breves, de no más de 160 caracteres, entre terminales de telefonía teléfono celular, fija y otros dispositivos (su envío, por ejemplo, puede realizarse además mediante de algunas plataformas de Internet). Consiste en un sistema ampliamente consolidado, fundamentalmente entre usuarios jóvenes, quienes han desarrollado inclusive un lenguaje propio para su manejo.Acrónimo o abreviatura:SMS: Short Message Service Suite es una de las más comunes. Enviar este código de vuelta al serveurLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en Suite 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 conversionConversión es una acción precisa que lleva a cabo un usuario al visitar un portal web. Algunas formas clásica de conversión son, por ejemplo, una compra, una descarga o una suscripción a la newsletter. Un parte del SEO o del Marketing Online es la Optimización de Ratio de Conversión (CRO). En el Marketing de afiliación se usa para la conversión de los editores. Información general Hay diferentes indicadores para medir Suite 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 programmationConcepto de Programación¿Qué es la Programación?La Programación es el procedimiento al que se recurre para crear algún tipo de aplicación o software, para materializar un concepto o proyecto que requiere de la utilización de un lenguaje informático para poder llevarse a cabo. Es algo que está absolutamente ligado a la figura del programador, y que cada vez está cobrando más relevancia dentro del mundo del marketing.Decimos que tanto esta figura Suite a partir de un mensaje SMS y verificar un número de teléfono para el usuario más fácilmente.

É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 navigateurUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Suite 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.

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

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

• Un anotado correctamente hashtag
• JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Suite 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 HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las Suite, pero para la compatibilidad entre navigateursConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Suite, 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énementConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando Suite 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');
…
});
}

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 contenuEl contenido puede ser muy difícil de definir con precisión. Es una definición que se refiere a las declaraciones contenidas en un documento o publicación de cualquier tipo y puede incluir las tecnologías de la información y la comunicación. Esto cubre todos los tipos de medios como imágenes y texto. A parte de esto, en el campo de la optimización de motores de búsqueda, los términos duplicar contenido, contenido único, Suite 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 URLEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo Suite 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 tweeterUn tweet es un mensaje corto que puede ser enviado por medio de del servicio de microblogging Twitter. ¿Qué es un tweet? Un tweet es un mensaje de estado en Twitter que puede tener hasta 280 caracteres. Los tweets solían limitarse a 140 caracteres, pero esta cantidad se incrementó a 280 en septiembre de 2017. Debido al espacio limitado para el texto, las URLs para uso en tweets son normalmente Suite à @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.