Coder une saisie de numéros de téléphone internationaux

Temps de lecture: 4 minutes

February 01, 2021

Rédigé par

Kelley Robinson

Twilion

Révisé par

Liz Moy

Twilion

Diane Phan

Twilion

Coder une saisie de numéros de téléphone internationaux

Les numéros de téléphone sont standardisés en un format international connu sous le nom de E.164. Il combine les codes de pays et les numéros des abonnés sous la forme suivante : +14155552671. Ce format est requis par beaucoup d’APIs (dont celles de Twilio) et signifie que vous n’avez pas à stocker les codes de pays et les numéros de téléphone dans deux colonnes séparées de la base de données.

Cependant, vous ne voulez probablement que vos utilisateurs aient à entrer un “+” et un code de pays lorsque qu’il saisissent leurs numéros de téléphone pour :

S’inscrire en tant que nouvel utilisateur
Activer la 2FA par SMS
Faire une demande de rappel d’un service client
Souscrire aux notifications marketing

Cet article vous accompagnera étape par étape pour coder un champ de saisie de numéros de téléphone pour traiter et parser les numéros de téléphones en utilisant du HTML basique, du JavaScript et le plugin intl-tel-input. Nous allons inclure des recommandations sur la vérification de téléphone et sur la prévention des fraudes.

Vous pouvez trouver le code complet sur mon GitHub.

Que peut faire le plugin intl-tel-input ?

Ce projet a une utilisation intensive de intl-tel-input : un “plugin JavaScript pour saisir et valider les numéros de téléphones internationaux”. Je passerai en revue ma configuration habituelle du plugin, mais il y a des options additionnelles que vous pouvez parcourir dans la documentation.

Ce plugin fournit une liste déroulante des codes pays avec des jolis drapeaux pour représenter les différentes nations. Il traite aussi le numéro ou le “format national” de l’abonné pour normaliser la saisie de l’utilisateur - pouvant comprendre les espaces, les parenthèses, les tirets, etc…

Embarquer le plugin intl-tel-input dans votre code

On va faire simple ici, et commencer avec un peu de HTML et JavaScript vanilla. Créez un nouveau fichier appelé index.html et ajoutez le code suivant :

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Saisie de numéros internationaux</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>

Ce code récpère les versions CDN du CSS et JS du plugin, ce qui aide à afficher la liste des codes de pays et traite les numéros de téléphone. J’utilise la version 17.0.8, mais vous pouvez trouver la dernière version en regardant les tags. Vous pouvez aussi installer le plugin avec un bundler ou télécharger et héberger le code source vous-même.

Pour un rendu plus élégant, créez un nouveau fichier appelé styles.css dans le même dossier et ajoutez le CSS que vous pouvez trouver ici.

Ensuite, ajoutez le formulaire qui contiendra la saisie de numéro de téléphone. Dans les tags body du fichier index.html, ajoutez le code HTML suivant :

<div class="container">
 <form id="login" onsubmit="process(event)">
   <p>Entrez votre numéro de téléphone:</p>
   <input id="phone" type="tel" name="phone" />
   <input type="submit" class="btn" value="Vérifier" />
 </form>
</div>

A ce stade si vous chargez ce code dans un navigateur, vous verrez le champ du formulaire mais il n’y a pas encore de formatage. Nous avons toujours besoin d’intitialiser le plugin.

champ de saisie du numéro de téléphone qui n'a pas de formatage spécial

Initialiser le plugin intl-tel-input

Ajoutez un tag script en dessous du body mais dans le HTML, puis ajoutez le code d’initialisation suivant :

 <!-- ^^  code du formulaire  ^^ -->
 </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>

Le utilsScript est, en principe, optionnel, mais il offre beaucoup de fonctionnalités très utiles comme les espaces pour les spécificités du pays et le format E.164 que l’on utilisera plus bas.

Rechargez la page et vous devriez maintenant voir le sélecteur de pays et un espace :

champ de saisie du numéro de téléphone avec le drapeau américain et la liste déroulante du code de pays, y compris le texte d'espace réservé pour un numéro de téléphone

Traiter la saisie de numéro de téléphone pour qu’elle ait le format international

Ajoutez une bannière d’alerte en dessous de votre formulaire. Cela vous aidera à afficher les résultats.

 </form>
 <!-- ^^  code du formulaire  ^^ -->
 <div class="alert alert-info" style="display: none;"></div>

Ensuite, ajoutez une fonction pour gérer la soumission du formulaire. Dans le tag <script> et après l’initialisation du plugin, ajoutez :

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 partie la plus importante ici est le phoneInput.getNumber() - c’est le code plugin qui convertit le code de pays sélectionné et la saisie de l’utilisateur en un numéro de téléphone au format international.

Rechargez la page et entrez un numéro de téléphone et vous devriez voir le format international !

saisie du numéro de téléphone avec succès au format E.164

Bonus : Rendez le plugin conscient de la localisation

Le plugin se paramètre par défaut aux US, mais vous l’implémentez probablement parce que vous avez des utilisateurs internationaux. Vous pouvez mettre à jour ces paramètres et les passer sur la localisation de l’utilisateur basée sur son adresse IP.

Créez-vous un compte gratuit sur IPinfo et récupérez votre token d’accès. Pour ça, vous pouvez utiliser une API d’adresse IP différente si jamais vous en avez une favorite. Ajoutez la fonction suivante en haut de votre tag <script> avant de définir l’objet phoneInputField :

function getIp(callback) {
 fetch('https://ipinfo.io/json?token=<votre token>', { headers: { 'Accept': 'application/json' }})
   .then((resp) => resp.json())
   .catch(() => {
     return {
       country: 'us',
     };
   })
   .then((resp) => callback(resp.country));
}

Ensuite, actualisez l’initialisation de intl-tel-input pour inclure deux paramètres : initialCountry: "auto" et 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",
});

Maintenant, si je paramètre mon VPN en Autriche, le plugin actualise le pays par défaut.

saisie du numéro de téléphone affichant le drapeau autrichien

Bonus : ajouter des pays préférés

Une autre de mes fonctionnalités préférées est le paramètre “preferred countries” (pays préférés). Il permet de spécifier les pays qui apparaîtront en haut de la liste déroulante. Par exemple, j’ai identifié que la plupart de mes utilisateurs se trouvent aux Etats-Unis, en Colombie, en Inde, et en Allemagne, j’ai alors priorisé ces options pour qu’elles soient en haut de liste.

saisie du numéro de téléphone affichant quatre pays préférés en haut d'une liste déroulante

Vous pouvez actualiser ce paramètre là où vous initialisez le plugin en ajoutant un tableau de preferredCountries dans le format de code ISO 3166-1 alpha-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",
});

Vérifier une saisie de numéro de téléphone

Vous remarquerez peut-être que ce formulaire ne permet pas encore de détecter les numéros de téléphone invalides. Vous pouvez allez voir ce post sur comment vérifier une saisie de numéros de téléphone afin d’éviter que des personnes ne rentrent ce genre de numéro :

Les bonnes pratiques pour la vérification de téléphone

Vous voulez certainement normaliser les numéros de téléphone au format E.164 mais si vous prévoyez de stocker ces numéros, vous voulez aussi pouvoir réaliser une vérification de téléphone. Elles aident à garantir que l’utilisateur n’a pas accidentellement entré un numéro erroné, qu’ils possèdent bien le numéro qu’ils ont associé à leur compte, et que vous soyez pas en train de spammer la mauvaise personne… vous avez compris l’idée. Heureusement, l’API Twilio Verify rend facile la vérification de téléphone par SMS ou appel. Regardez ce projet sur notre Code Exchange pour apprendre à implémenter les mots de passe à usage unique (OTP)... Vous avez déjà fait la moitié avec le champ de saisie de numéro de téléphone!

Vous pourriez aussi être intéressés par :

Des questions sur la saisie de numéro de téléphone et sur la vérification ? Vous pouvez me trouver sur Twitter @kelleyrobinson. J’ai hâte de voir ce que vous allez construire.