{"id":83366,"date":"2022-10-04T01:02:55","date_gmt":"2022-10-03T23:02:55","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/"},"modified":"2020-09-16T21:42:13","modified_gmt":"2020-09-17T00:42:13","slug":"verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/","title":{"rendered":"V\u00e9rifiez les num\u00e9ros de t\u00e9l\u00e9phone sur le Web avec l&#039;API Web OTP"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#%C2%BFQue-es-la-API-de-Web-OTP\" >\u00bfQu\u00e9 es la API de Web OTP?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Estado-actual\" >Estado actual<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Cambios-de-versiones-anteriores\" >Cambios de versiones anteriores<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Miralo-en-accion\" >M\u00edralo en acci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Anote-un-etiqueta\" >Anote un &lt;input&gt; etiqueta<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Utilice-la-API-de-Web-OTP\" >Utilice la API de Web OTP<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Deteccion-de-caracteristicas\" >Detecci\u00f3n de caracter\u00edsticas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Procesar-la-OTP\" >Procesar la OTP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Abortar-el-mensaje\" >Abortar el mensaje<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Formatear-el-mensaje-SMS\" >Formatear el mensaje SMS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Poblacion\" >Poblaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#Preguntas-mas-frecuentes\" >Preguntas m\u00e1s frecuentes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#%C2%BFDonde-informo-de-errores-en-la-implementacion-de-Chrome\" >\u00bfD\u00f3nde informo de errores en la implementaci\u00f3n de Chrome?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#%C2%BFComo-puedo-ayudar-con-esta-funcion\" >\u00bfC\u00f3mo puedo ayudar con esta funci\u00f3n?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#%C2%BFCuales-son-las-diferencias-con-la-API-del-receptor-de-SMS\" >\u00bfCu\u00e1les son las diferencias con la API del receptor de SMS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#%C2%BFEsta-API-es-compatible-con-diferentes-navegadores\" >\u00bfEsta API es compatible con diferentes navegadores?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#%C2%BFEs-seguro-utilizar-SMS-como-forma-de-autenticacion\" >\u00bfEs seguro utilizar SMS como forma de autenticaci\u00f3n?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Ayudar a los usuarios con las OTP recibidas a trav\u00e9s de SMS\n        <\/p>\n<p>\n          <time>7 de oct de 2019<\/time><br \/>\n            Actualizado <time>14 de septiembre de 2020<\/time>\n        <\/p>\n<\/header>\n<h2 id=\"what-is-the-web-otp-api\"><span class=\"ez-toc-section\" id=\"%C2%BFQue-es-la-API-de-Web-OTP\"><\/span>\u00bfQu\u00e9 es la API de Web OTP? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En estos d\u00edas, la mayor\u00eda de las personas en el mundo poseen un dispositivo m\u00f3vil y los desarrolladores suelen usar n\u00fameros de tel\u00e9fono como identificador para los usuarios de sus servicios.<\/p>\n<p>Hay una variedad de formas de verificar los n\u00fameros de tel\u00e9fono, pero una contrase\u00f1a de un solo uso (OTP) generada aleatoriamente enviada por SMS es una de las m\u00e1s comunes.  Enviar este c\u00f3digo de vuelta al servidor del desarrollador demuestra el control del n\u00famero de tel\u00e9fono.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>La API de Web OTP se llamaba originalmente API de receptor de SMS.  Es posible que todav\u00eda lo vea con ese nombre en algunos lugares.  Si us\u00f3 esa API, a\u00fan deber\u00eda leer este art\u00edculo.  Existen diferencias significativas entre las versiones actual y anterior de la API.<\/p>\n<\/div>\n<p>Esta idea ya est\u00e1 implementada en muchos escenarios para lograr:<\/p>\n<ul>\n<li><strong>N\u00famero de tel\u00e9fono como identificador del usuario.<\/strong> Al registrarse en un nuevo servicio, algunos sitios web solicitan un n\u00famero de tel\u00e9fono en lugar de una direcci\u00f3n de correo electr\u00f3nico y lo utilizan como identificador de cuenta.<\/li>\n<li><strong>Verificaci\u00f3n de dos pasos.<\/strong> Al iniciar sesi\u00f3n, un sitio web solicita un c\u00f3digo de un solo uso enviado por SMS adem\u00e1s de una contrase\u00f1a u otro factor de conocimiento para mayor seguridad.<\/li>\n<li><strong>Confirmaci\u00f3n de pago.<\/strong> Cuando un usuario realiza un pago, solicitar un c\u00f3digo \u00fanico enviado por SMS puede ayudar a verificar la intenci\u00f3n de la persona.<\/li>\n<\/ul>\n<p>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\u00f3n en los recorridos cr\u00edticos del usuario.  Aliviar esto ha sido una solicitud de muchos de los desarrolladores globales m\u00e1s importantes para la web.  Android tiene <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/identity\/sms-retriever\/\">una API que hace exactamente esto<\/a>.  Tambi\u00e9n lo hace<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/documentation\/security\/password_autofill\/about_the_password_autofill_workflow\">iOS<\/a><br \/>\ny<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/documentation\/security\/password_autofill\/enabling_password_autofill_on_an_html_input_element\">Safari<\/a>.<\/p>\n<p>La API Web OTP permite que su aplicaci\u00f3n reciba mensajes con formato especial vinculados al origen de su aplicaci\u00f3n.  A partir de esto, puede obtener una OTP mediante programaci\u00f3n a partir de un mensaje SMS y verificar un n\u00famero de tel\u00e9fono para el usuario m\u00e1s f\u00e1cilmente.<\/p>\n<div class=\"w-aside w-aside--warning\">\n<p><strong>Advertencia:<\/strong><br \/>\nLos atacantes pueden falsificar SMS y secuestrar el n\u00famero de tel\u00e9fono de una persona.  Los operadores tambi\u00e9n pueden reciclar n\u00fameros de tel\u00e9fono para nuevos usuarios despu\u00e9s de cerrar una cuenta.  Si bien SMS OTP es \u00fatil para verificar un n\u00famero de tel\u00e9fono para los casos de uso anteriores, recomendamos usar formas adicionales y m\u00e1s fuertes de autenticaci\u00f3n (como m\u00faltiples factores y la <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Authentication_API\">API de autenticaci\u00f3n web<\/a> para establecer nuevas sesiones para estos usuarios.<\/p>\n<\/div>\n<h2 id=\"current-status\"><span class=\"ez-toc-section\" id=\"Estado-actual\"><\/span>Estado actual <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La siguiente tabla explica el estado actual de la API de Web OTP.<\/p>\n<table>\n<tbody>\n<tr>\n<th markdown=\"block\">\n<p>Paso\n<\/th>\n<th markdown=\"block\">\n<p>Estado\n<\/th>\n<\/tr>\n<tr>\n<td markdown=\"block\">\n<p>1. Crea un explicador\n<\/td>\n<td markdown=\"block\">\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/WICG\/WebOTP\/blob\/master\/explainer.md\">Completar<\/a>\n<\/td>\n<\/tr>\n<tr>\n<td markdown=\"block\">\n<p>2. Crear borrador inicial de especificaci\u00f3n\n<\/td>\n<td markdown=\"block\">\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/WebOTP\/\">Completar<\/a>\n<\/td>\n<\/tr>\n<tr>\n<td markdown=\"block\">\n<p>3. Recopile comentarios y repita el dise\u00f1o\n<\/td>\n<td markdown=\"block\">\n<p>Completar\n<\/td>\n<\/tr>\n<tr>\n<td markdown=\"block\">\n<p>4. Prueba de origen\n<\/td>\n<td markdown=\"block\">\n<p>Completar\n<\/td>\n<\/tr>\n<tr>\n<td markdown=\"block\">\n<strong>5. Lanzamiento<\/strong>\n<\/td>\n<td markdown=\"block\">\n<p>Cromo 84\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 id=\"changes-from-earlier-versions\"><span class=\"ez-toc-section\" id=\"Cambios-de-versiones-anteriores\"><\/span>Cambios de versiones anteriores <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Las primeras versiones de esta API se llamaban SMS Receiver.  Si est\u00e1 familiarizado con esa versi\u00f3n de la API, tenga en cuenta los cambios realizados.  Las mejoras de la API del receptor de SMS incluyen:<\/p>\n<ul>\n<li>El formato de mensaje SMS ahora est\u00e1 alineado con WebKit.<\/li>\n<li>La p\u00e1gina web solo recibe un c\u00f3digo OTP independientemente de cualquier otra cosa que haya en el mensaje.<\/li>\n<li>El c\u00f3digo hash de la aplicaci\u00f3n del navegador ya no es necesario en el mensaje.<\/li>\n<\/ul>\n<h2 id=\"see-it-in-action\"><span class=\"ez-toc-section\" id=\"Miralo-en-accion\"><\/span>M\u00edralo en acci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Supongamos que un usuario quiere verificar su n\u00famero de tel\u00e9fono con un sitio web.  El sitio web env\u00eda un mensaje de texto al usuario por SMS y el usuario ingresa la OTP desde el mensaje para verificar la propiedad del n\u00famero de tel\u00e9fono.<\/p>\n<p>Con la API de Web OTP, estos pasos son tan f\u00e1ciles 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\u00famero de tel\u00e9fono.  Despu\u00e9s de hacer clic en el <strong>Verificar<\/strong><br \/>\nen la hoja inferior, el navegador pega la OTP en el formulario y el formulario se env\u00eda sin que el usuario tenga que presionar <strong>Seguir<\/strong>.<\/p>\n<p><video autoplay=\"\" loop=\"\" muted=\"\" playsinline=\"\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/web-otp\/demo.mp4\" type=\"video\/mp4\"><source src=\"https:\/\/storage.googleapis.com\/web-dev-assets\/web-otp\/demo.webm\" type=\"video\/webm\"><\/source><\/source><\/video><\/p>\n<p>Todo el proceso est\u00e1 diagramado en la siguiente imagen.<\/p>\n<figure class=\"w-figure\">\n  <img alt='diagram-5140753' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/diagram-5140753.png' width=\"494\" height=\"391\"><figcaption class=\"w-figcaption w-figcaption--fullbleed\">\n<p>    Diagrama de API de Web OTP<br \/>\n  <\/figcaption><\/figure>\n<p>Tratar <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/web-otp.glitch.me\">la demo<\/a> usted mismo.  No solicita su n\u00famero de tel\u00e9fono ni env\u00eda un SMS a su dispositivo, pero puede enviar uno desde otro dispositivo copiando el texto que se muestra en la demostraci\u00f3n.  Esto funciona porque no importa qui\u00e9n sea el remitente cuando se utiliza la API de Web OTP.<\/p>\n<ol>\n<li>Ir <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/web-otp.glitch.me\">https:\/\/web-otp.glitch.me<\/a> en Chrome 84 o posterior en un dispositivo Android.<\/li>\n<li>Env\u00ede a su tel\u00e9fono el siguiente mensaje de texto SMS desde el otro tel\u00e9fono.<\/li>\n<\/ol>\n<p><web-copy-code><\/p>\n<pre class=\"language-text\"><code class=\"language-text\">@web-otp.glitch.me #12345<\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>\u00bfRecibi\u00f3 el SMS y vio el mensaje para ingresar el c\u00f3digo en el \u00e1rea de entrada?  As\u00ed es como funciona la API Web OTP para los usuarios.<\/p>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Precauci\u00f3n:<\/strong><\/p>\n<ul>\n<li>Si el n\u00famero de tel\u00e9fono del remitente est\u00e1 incluido en la lista de contactos del destinatario, esta API no se activar\u00e1 debido al dise\u00f1o del subyacente. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/identity\/sms-retriever\/user-consent\/request#2_start_listening_for_incoming_messages\">API de consentimiento de usuario de SMS<\/a>.<\/li>\n<li>Si est\u00e1 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).<\/li>\n<\/ul>\n<\/div>\n<p>El uso de la API de Web OTP consta de tres partes:<\/p>\n<ul>\n<li>Un anotado correctamente <code>&lt;input&gt;<\/code> etiqueta<\/li>\n<li>JavaScript en su aplicaci\u00f3n web<\/li>\n<li>Mensaje de texto con formato enviado por SMS.<\/li>\n<\/ul>\n<p>Cubrir\u00e9 el <code>&lt;input&gt;<\/code> etiqueta primero.<\/p>\n<h2 id=\"annotate-an-lessinputgreater-tag\"><span class=\"ez-toc-section\" id=\"Anote-un-etiqueta\"><\/span>Anote un <code>&lt;input&gt;<\/code> etiqueta <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Web OTP en s\u00ed mismo funciona sin ninguna anotaci\u00f3n HTML, pero para la compatibilidad entre navegadores, le recomiendo que agregue <code>autocomplete=\"one-time-code\"<\/code> al <code>&lt;input&gt;<\/code> etiqueta donde espera que el usuario ingrese una OTP.<\/p>\n<p>Esto permite que Safari 14 o posterior sugiera que el usuario complete autom\u00e1ticamente el <code>&lt;input&gt;<\/code><br \/>\ncampo con una OTP cuando reciben un SMS con el formato descrito en Formatear el mensaje SMS aunque no sea compatible con Web OTP.<\/p>\n<p class=\"w-label\">  HTML <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">autocomplete<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>one-time-code<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">required<\/span><span class=\"token punctuation\">\/&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>submit<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>form<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"use-the-web-otp-api\"><span class=\"ez-toc-section\" id=\"Utilice-la-API-de-Web-OTP\"><\/span>Utilice la API de Web OTP <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Debido a que Web OTP es simple, basta con copiar y pegar el siguiente c\u00f3digo.  Te guiar\u00e9 a trav\u00e9s de lo que est\u00e1 pasando de todos modos.<\/p>\n<p class=\"w-label\">  JavaScript <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'OTPCredential'<\/span> <span class=\"token keyword\">in<\/span> window<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'DOMContentLoaded'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token parameter\">e<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> input <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'input[autocomplete=\"one-time-code\"]'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>input<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> ac <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">AbortController<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> form <span class=\"token operator\">=<\/span> input<span class=\"token punctuation\">.<\/span><span class=\"token function\">closest<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'form'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>form<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>form<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'submit'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token parameter\">e<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>ac<span class=\"token punctuation\">.<\/span><span class=\"token function\">abort<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br>navigator<span class=\"token punctuation\">.<\/span>credentials<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br>otp<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> transport<span class=\"token operator\">:<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string\">'sms'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br>signal<span class=\"token operator\">:<\/span> ac<span class=\"token punctuation\">.<\/span>signal<br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">otp<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>input<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">=<\/span> otp<span class=\"token punctuation\">.<\/span>code<span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>form<span class=\"token punctuation\">)<\/span> form<span class=\"token punctuation\">.<\/span><span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">err<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"feature-detection\"><span class=\"ez-toc-section\" id=\"Deteccion-de-caracteristicas\"><\/span>Detecci\u00f3n de caracter\u00edsticas <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La detecci\u00f3n de caracter\u00edsticas es la misma que para muchas otras API.  Escuchar<br \/>\n<code>DOMContentLoaded<\/code> El evento esperar\u00e1 a que el \u00e1rbol DOM est\u00e9 listo para realizar consultas.<\/p>\n<p class=\"w-label\">  JavaScript <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'OTPCredential'<\/span> <span class=\"token keyword\">in<\/span> window<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'DOMContentLoaded'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token parameter\">e<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> input <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelector<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'input[autocomplete=\"one-time-code\"]'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span>input<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br>\u2026<br><span class=\"token keyword\">const<\/span> form <span class=\"token operator\">=<\/span> input<span class=\"token punctuation\">.<\/span><span class=\"token function\">closest<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'form'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>\u2026<br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Precauci\u00f3n:<\/strong><br \/>\nLa API Web OTP requiere un origen seguro (HTTPS).  La detecci\u00f3n de funciones en un sitio web HTTP fallar\u00e1.<\/p>\n<\/div>\n<h3 id=\"process-the-otp\"><span class=\"ez-toc-section\" id=\"Procesar-la-OTP\"><\/span>Procesar la OTP <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La API de Web OTP en s\u00ed es bastante simple.  Utilizar<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/CredentialsContainer\/get\"><code>navigator.credentials.get()<\/code><\/a><\/p>\n<p>para obtener la OTP.  Web OTP agrega un nuevo <code>otp<\/code> opci\u00f3n a ese m\u00e9todo.  Solo tiene una propiedad: <code>transport<\/code>, cuyo valor debe ser una matriz con la cadena <code>'sms'<\/code>.<\/p>\n<p class=\"w-label\">  JavaScript <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\">    \u2026<\/span><br><mark class=\"highlight-line highlight-line-active\">    navigator<span class=\"token punctuation\">.<\/span>credentials<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">      otp<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> transport<span class=\"token operator\">:<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string\">'sms'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><\/mark><br><span class=\"highlight-line\">      \u2026<\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">otp<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    \u2026<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>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 <code>OTPCredential<\/code> objeto.<\/p>\n<p class=\"w-label\">  Contenido de obtenido <code>OTPCredential<\/code> objeto <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{<\/span><br>code<span class=\"token operator\">:<\/span> <span class=\"token string\">\"123456\"<\/span> <br>type<span class=\"token operator\">:<\/span> <span class=\"token string\">\"otp\"<\/span>  <br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>A continuaci\u00f3n, pase el valor de OTP al <code>&lt;input&gt;<\/code> campo.  Enviar el formulario directamente eliminar\u00e1 el paso que requiere que el usuario toque un bot\u00f3n.<\/p>\n<p class=\"w-label\">  JavaScript <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\">    \u2026<\/span><br><span class=\"highlight-line\">    navigator<span class=\"token punctuation\">.<\/span>credentials<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      otp<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> transport<span class=\"token operator\">:<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string\">'sms'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">      \u2026<\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">otp<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">      input<span class=\"token punctuation\">.<\/span>value <span class=\"token operator\">=<\/span> otp<span class=\"token punctuation\">.<\/span>code<span class=\"token punctuation\">;<\/span><\/mark><br><mark class=\"highlight-line highlight-line-active\">      <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>form<span class=\"token punctuation\">)<\/span> form<span class=\"token punctuation\">.<\/span><span class=\"token function\">submit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">catch<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">err<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    \u2026<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"aborting\"><span class=\"ez-toc-section\" id=\"Abortar-el-mensaje\"><\/span>Abortar el mensaje <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>En caso de que el usuario ingrese manualmente una OTP y env\u00ede el formulario, puede cancelar el<br \/>\n<code>get()<\/code> llamar usando un <code>AbortController<\/code> instancia en el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/CredentialsContainer\/get#Parameters\"><code>options<\/code><\/p>\n<p>objeto<\/a>.<\/p>\n<p class=\"w-label\">  JavaScript <\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"highlight-line\">    \u2026<\/span><br><mark class=\"highlight-line highlight-line-active\">    <span class=\"token keyword\">const<\/span> ac <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">AbortController<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">    \u2026<\/span><br><span class=\"highlight-line\">    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>form<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      form<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'submit'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token parameter\">e<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">        ac<span class=\"token punctuation\">.<\/span><span class=\"token function\">abort<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/mark><br><span class=\"highlight-line\">      <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/span><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><\/span><br><span class=\"highlight-line\">    \u2026<\/span><br><span class=\"highlight-line\">    navigator<span class=\"token punctuation\">.<\/span>credentials<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">      otp<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> transport<span class=\"token operator\">:<\/span><span class=\"token punctuation\">[<\/span><span class=\"token string\">'sms'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">      signal<span class=\"token operator\">:<\/span> ac<span class=\"token punctuation\">.<\/span>signal<\/mark><br><span class=\"highlight-line\">    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">then<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">otp<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><\/span><br><span class=\"highlight-line\">    \u2026<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"format\"><span class=\"ez-toc-section\" id=\"Formatear-el-mensaje-SMS\"><\/span>Formatear el mensaje SMS <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La API en s\u00ed deber\u00eda parecer lo suficientemente simple, pero hay algunas cosas que debe saber antes de usarla.  El mensaje debe enviarse despu\u00e9s<br \/>\n<code>navigator.credentials.get()<\/code> se llama y debe recibirse en el dispositivo donde <code>get()<\/code> fue llamado.  Finalmente, el mensaje debe adherirse al siguiente formato:<\/p>\n<ul>\n<li>El mensaje comienza con texto legible por humanos (opcional) dejando la \u00faltima l\u00ednea para la URL y la OTP.<\/li>\n<li>La parte del host de la URL del sitio web que invoc\u00f3 la API debe estar precedida por <code>@<\/code>.<\/li>\n<li>La URL debe contener un signo de almohadilla (&#8216;<code>#<\/code>&#8216;) seguido de la OTP.<\/li>\n<\/ul>\n<p>Por ejemplo:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-text\"><code class=\"language-text\">Your OTP is: 123456.<p>@www.example.com #123456<\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"demos\"><span class=\"ez-toc-section\" id=\"Poblacion\"><\/span>Poblaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Pruebe varios mensajes con la demostraci\u00f3n:<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/web-otp.glitch.me\">https:\/\/web-otp.glitch.me<\/a><\/p>\n<p>Tambi\u00e9n puede bifurcarlo y crear su versi\u00f3n:<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/edit\/#!\/web-otp\">https:\/\/glitch.com\/edit\/#!\/web-otp<\/a>.<\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/web-otp?attributionHidden=true&amp;sidebarCollapsed=true&amp;path=views%2Findex.html&amp;previewSize=0\" style=\"height: 100%; width: 100%; border: 0;\" title=\"web-otp on Glitch\"><\/iframe>\n<\/p>\n<h2 id=\"faq\"><span class=\"ez-toc-section\" id=\"Preguntas-mas-frecuentes\"><\/span>Preguntas m\u00e1s frecuentes <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"where-do-i-report-bugs-in-chrome's-implementation\"><span class=\"ez-toc-section\" id=\"%C2%BFDonde-informo-de-errores-en-la-implementacion-de-Chrome\"><\/span>\u00bfD\u00f3nde informo de errores en la implementaci\u00f3n de Chrome? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfEncontraste un error con la implementaci\u00f3n de Chrome?<\/p>\n<ul>\n<li>Presentar un error en<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/entry?components=Blink%3ESMS\">https:\/\/new.crbug.com<\/a>.  Incluya todos los detalles que pueda, instrucciones sencillas para reproducir y configurar <strong>Componentes<\/strong> a <code>Blink&gt;WebOTP<\/code>.<\/li>\n<\/ul>\n<h3 id=\"how-can-i-help-this-feature\"><span class=\"ez-toc-section\" id=\"%C2%BFComo-puedo-ayudar-con-esta-funcion\"><\/span>\u00bfC\u00f3mo puedo ayudar con esta funci\u00f3n? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfEst\u00e1 pensando en utilizar la API de Web OTP?  Su apoyo p\u00fablico nos ayuda a priorizar las funciones y muestra a otros proveedores de navegadores lo importante que es darles soporte.  Enviar un tweet a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/chromiumdev\">@Cromodev<\/a> con<br \/>\n<code>#webotp<\/code> y h\u00e1ganos saber d\u00f3nde y c\u00f3mo lo est\u00e1 usando.<\/p>\n<h3 id=\"differences\"><span class=\"ez-toc-section\" id=\"%C2%BFCuales-son-las-diferencias-con-la-API-del-receptor-de-SMS\"><\/span>\u00bfCu\u00e1les son las diferencias con la API del receptor de SMS? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Considere la API de Web OTP como una versi\u00f3n evolucionada de la API de receptor de SMS.  La API Web OTP tiene algunas diferencias significativas en comparaci\u00f3n con la API del receptor de SMS.<\/p>\n<ul>\n<li>El formato de texto esperado para el mensaje SMS ha cambiado.<\/li>\n<li>Ya no requiere que se incluya una cadena de hash de la aplicaci\u00f3n en el mensaje SMS.<\/li>\n<li>El m\u00e9todo llamado es ahora <code>navigator.credentials.get()<\/code> m\u00e1s bien que<br \/>\n<code>navigator.sms.receive()<\/code>.<\/li>\n<li>los <code>get()<\/code> recibe solo la OTP en lugar de todo el mensaje SMS como<br \/>\n<code>receive()<\/code> hizo antes.<\/li>\n<li>Ahora es posible abortar la llamada a <code>get()<\/code>.<\/li>\n<\/ul>\n<h3 id=\"is-this-api-compatible-between-different-browsers\"><span class=\"ez-toc-section\" id=\"%C2%BFEsta-API-es-compatible-con-diferentes-navegadores\"><\/span>\u00bfEsta API es compatible con diferentes navegadores? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Chromium y WebKit acordaron <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/sms-one-time-codes\">el formato de mensaje de texto SMS<\/a> y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/news\/?id=z0i801mg\">Apple anunci\u00f3 el apoyo de Safari para ello<\/a> a partir de iOS 14 y macOS Big Sur.  Aunque Safari no es compatible con la API de JavaScript de Web OTP, al anotar <code>input<\/code> elemento con <code>autocomplete=[\"one-time-code\"]<\/code>, el teclado predeterminado sugiere autom\u00e1ticamente que ingrese la OTP si el mensaje SMS cumple con el formato.<\/p>\n<h3 id=\"is-it-safe-to-use-sms-as-a-way-to-authenticate\"><span class=\"ez-toc-section\" id=\"%C2%BFEs-seguro-utilizar-SMS-como-forma-de-autenticacion\"><\/span>\u00bfEs seguro utilizar SMS como forma de autenticaci\u00f3n? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si bien SMS OTP es \u00fatil para verificar un n\u00famero de tel\u00e9fono cuando se proporciona por primera vez, la verificaci\u00f3n del n\u00famero de tel\u00e9fono a trav\u00e9s de SMS debe usarse con cuidado para volver a autenticarse, ya que los operadores pueden secuestrar y reciclar los n\u00fameros de tel\u00e9fono.  Web OTP es un mecanismo conveniente de recuperaci\u00f3n y restablecimiento, pero los servicios deben combinarlo con factores adicionales, como un desaf\u00edo de conocimiento, o utilizar el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Authentication_API\">API de autenticaci\u00f3n web<\/a><br \/>\npara una autenticaci\u00f3n s\u00f3lida.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ayudar a los usuarios con las OTP recibidas a trav\u00e9s de SMS 7 de oct de 2019 Actualizado 14 de septiembre de 2020 \u00bfQu\u00e9 es la API de Web OTP?&#8230;<\/p>","protected":false},"author":1,"featured_media":83367,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83366","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Verificar n\u00fameros de tel\u00e9fono en la web con la API de Web OTP - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Ayudar a los usuarios con las OTP recibidas a trav\u00e9s de SMS 7 de oct de 2019 Actualizado 14 de septiembre de 2020 \u00bfQu\u00e9 es la API de Web OTP? En estos\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Verificar n\u00fameros de tel\u00e9fono en la web con la API de Web OTP\" \/>\n<meta property=\"og:description\" content=\"Ayudar a los usuarios con las OTP recibidas a trav\u00e9s de SMS 7 de oct de 2019 Actualizado 14 de septiembre de 2020 \u00bfQu\u00e9 es la API de Web OTP? En estos\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-03T23:02:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3790626.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Verificar n\u00fameros de tel\u00e9fono en la web con la API de Web OTP\",\"datePublished\":\"2022-10-03T23:02:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/\"},\"wordCount\":1820,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3790626.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/\",\"name\":\"Verificar n\u00fameros de tel\u00e9fono en la web con la API de Web OTP - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3790626.png\",\"datePublished\":\"2022-10-03T23:02:55+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Ayudar a los usuarios con las OTP recibidas a trav\u00e9s de SMS 7 de oct de 2019 Actualizado 14 de septiembre de 2020 \u00bfQu\u00e9 es la API de Web OTP? En estos\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3790626.png\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3790626.png\",\"width\":1200,\"height\":600,\"caption\":\"hero-3790626-8277816-png\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Verificar n\u00fameros de tel\u00e9fono en la web con la API de Web OTP - R Marketing Digital","description":"Ayudar a los usuarios con las OTP recibidas a trav\u00e9s de SMS 7 de oct de 2019 Actualizado 14 de septiembre de 2020 \u00bfQu\u00e9 es la API de Web OTP? En estos","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/","og_locale":"fr_FR","og_type":"article","og_title":"Verificar n\u00fameros de tel\u00e9fono en la web con la API de Web OTP","og_description":"Ayudar a los usuarios con las OTP recibidas a trav\u00e9s de SMS 7 de oct de 2019 Actualizado 14 de septiembre de 2020 \u00bfQu\u00e9 es la API de Web OTP? En estos","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-03T23:02:55+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3790626.png","type":"image\/png"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Verificar n\u00fameros de tel\u00e9fono en la web con la API de Web OTP","datePublished":"2022-10-03T23:02:55+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/"},"wordCount":1820,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3790626.png","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/","url":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/","name":"Verificar n\u00fameros de tel\u00e9fono en la web con la API de Web OTP - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3790626.png","datePublished":"2022-10-03T23:02:55+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Ayudar a los usuarios con las OTP recibidas a trav\u00e9s de SMS 7 de oct de 2019 Actualizado 14 de septiembre de 2020 \u00bfQu\u00e9 es la API de Web OTP? En estos","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/dev\/verificar-numeros-de-telefono-en-la-web-con-la-api-de-web-otp\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3790626.png","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3790626.png","width":1200,"height":600,"caption":"hero-3790626-8277816-png"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83366"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83366\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83367"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}