Monday, 19 July, 2021 UTC
Summary
Los números de teléfono están estandarizados en un formato internacional denominado E.164, el que combina códigos de país y números de suscriptores en un formato similar al siguiente: +14155552671. Muchas API (incluida Twilio) requieren este formato, lo que significa que no es necesario almacenar los códigos de país y los números de teléfono en dos columnas de base de datos separadas.
Sin embargo, probablemente no desee que los usuarios tengan que escribir un signo + y un código de país cuando proporcionan su número de teléfono para:
- Registrar una cuenta nueva
- Activar SMS 2FA
- Solicitar una devolución de llamada al servicio de atención al cliente
- Registrarse para recibir notificaciones de marketing
En esta publicación de blog, se explicará cómo crear un campo de entrada de número de teléfono para procesar y analizar los números de teléfono mediante HTML básico, JavaScript y el plugin
intl-tel-input. Incluiremos recomendaciones para la verificación telefónica y la prevención de fraudes.Puede encontrar el código finalizado en mi GitHub.
¿Qué puede hacer el plugin intl-tel-input? Este proyecto hace un uso intensivo de intl-tel-input, “un plugin JavaScript para ingresar y validar números de teléfono internacionales”. Abordaré mi configuración habitual del plugin, pero tiene muchas opciones de configuración adicionales que puede explorar en la documentación.
El plugin proporciona un menú desplegable de código de países con banderas bonitas que representan diferentes países. También procesa el número de suscriptor o “formato nacional” para normalizar la entrada del usuario que podría incluir espacios, paréntesis, guiones y más.
Integre el plugin intl-tel-input en su código Vamos a hacer las cosas muy simples y vamos a empezar con algunos HTML y JavaScript puros. Cree un nuevo archivo llamado
index.html y agregue el siguiente código:<!DOCTYPE html> <html lang="en"> <head> <title>International telephone input</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script> </head> <body> </body> </html> Esto extrae las versiones CDN del CSS y JS del plugin, lo que nos ayuda a mostrar el menú desplegable de códigos de países y a procesar los números de teléfono. Estoy utilizando v17.0.8, pero puede encontrar la versión más reciente en las etiquetas. También puede instalar el plugin con un paquete o una descarga y alojar el código de origen usted mismo.
Para obtener estilos más bonitos, cree un nuevo archivo en la misma carpeta llamado
styles.css y agregue el CSS que se encuentra aquí.A continuación, agregue el formulario que incluirá la entrada del número de teléfono. Dentro de las etiquetas del
cuerpo del archivo index.html, agregue el siguiente código HTML:<div class="container"> <form id="login" onsubmit="process(event)"> <p>Enter your phone number:</p> <input id="phone" type="tel" name="phone" /> <input type="submit" class="btn" value="Verify" /> </form> </div> Si carga este archivo en un navegador en este momento, verá el campo del formulario, pero aún sin formato, todavía tenemos que inicializar el plugin.
Inicialice el plugin intl-tel-input Agregue una etiqueta de secuencia de comandos debajo del cuerpo, pero dentro del HTML, y agregue el siguiente código de inicialización:
<!-- ^^ form code ^^ --> </body> <script> const phoneInputField = document.querySelector("#phone"); const phoneInput = window.intlTelInput(phoneInputField, { utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js", }); </script> </html> El
utilsScript es técnicamente opcional, pero proporciona una gran cantidad de funcionalidad realmente útil, como los marcadores de posición específicos del país y el formato E.164 que usaremos a continuación.Vuelva a cargar la página y ahora debería ver el selector de país y un marcador de posición.
Procese la entrada del número de teléfono para obtener el formato internacional Agregue un aviso de alerta debajo de nuestro formulario. Esto nos ayudará a mostrar nuestros resultados.
</form> <!-- ^^ form code ^^ --> <div class="alert alert-info" style="display: none;"></div> A continuación, agregue una función para gestionar el envío del formulario. Dentro de su etiqueta
<script> y después de la inicialización del plugin, agregue lo siguiente:const info = document.querySelector(".alert-info"); function process(event) { event.preventDefault(); const phoneNumber = phoneInput.getNumber(); info.style.display = ""; info.innerHTML = `Phone number in E.164 format: <strong>${phoneNumber}</strong>`; } La parte más importante aquí es
phoneInput.getNumber(): este es el código de plugin que convierte el código de país y la entrada de usuario seleccionados en formato internacional.Vuelva a cargar la página, ingrese un número de teléfono y debería ver el formato internacional.
Bono: Permita conocer la ubicación del plugin El plugin se establece de forma predeterminada en EE. UU., pero probablemente usted implementa esto porque tiene usuarios en todo el mundo. Puede actualizar la configuración de manera predeterminada a la ubicación del usuario según su dirección IP.
Regístrese para obtener una cuenta gratuita en Información de IP y obtenga su token de acceso. Puede utilizar una API de dirección IP diferente si tiene otra que prefiera. Agregue la siguiente función en la parte superior de su etiqueta
<script> antes de definir el objeto phoneInputField:function getIp(callback) { fetch('https://ipinfo.io/json?token=<your token>', { headers: { 'Accept': 'application/json' }}) .then((resp) => resp.json()) .catch(() => { return { country: 'us', }; }) .then((resp) => callback(resp.country)); } A continuación, actualice la inicialización de intl-tel-input para incluir dos parámetros:
InitialCountry: “auto” y geoIpLookup: getIp.const phoneInput = window.intlTelInput(phoneInputField, { initialCountry: "auto", geoIpLookup: getIp, utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js", }); Ahora, si establezco mi VPN en Austria, el plugin actualizará el país predeterminado
Bono: Agregue países de preferencia Una de mis otras funciones favoritas es la configuración de “países preferidos”, que le permite especificar países para que aparezcan en la parte superior de la lista. En este ejemplo, identifiqué que la mayoría de mis usuarios se encuentran en los Estados Unidos, Colombia, la India y Alemania, y prioricé esas opciones.
Puede actualizar esta configuración donde inicializa el plugin mediante la adición de una serie de
preferredCountries en formato de código ISO 3166-1 alfa-2:const phoneInput = window.intlTelInput(phoneInputField, { preferredCountries: ["us", "co", "in", "de"], utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js", }); Valide la entrada de número de teléfono
Es posible que note que este formulario aún no impide que se ingrese un número de teléfono no válido. Puede seguir esta publicación sobre cómo validar la entrada del número de teléfono para que no se ingresen cosas como las siguientes:
Prácticas recomendadas para la verificación telefónica Definitivamente, desea normalizar los números de teléfono en el formato E.164, pero si piensa almacenar aquellos números, también debería realizar una verificación telefónica. La verificación telefónica ayuda a garantizar que el usuario no escribió accidentalmente el número incorrecto, que tiene el control sobre el número que está asociando con su cuenta y que usted no le está enviando spam a la persona equivocada, usted me entiende. Afortunadamente, API de Twilio Verify facilita la verificación telefónica a través de SMS o llamadas de voz. Eche un vistazo a este proyecto en nuestro Intercambio de códigos para aprender cómo implementar códigos de acceso de una sola vez (estará a mitad de camino con la entrada de números de teléfono).
También podría interesarle:
- Documentación de la API de Twilio Lookup
- Verificación de teléfono sin servidores con Twilio Verify
- Cómo incentivar a los usuarios a activar 2FA
- Cómo crear un pago rápido con la verificación de SMS mediante Stripe y Twilio
Este artículo fue traducido del original "How to build international phone number input in HTML and JavaScript". Mientras estamos en nuestros procesos de traducción, nos encantaría recibir sus comentarios en [email protected] - las contribuciones valiosas pueden generar regalos de Twilio.