OneSpan Sign Developer: Plugin d'authentification SMS

Différents pays du monde ont différents formats pour leurs numéros de téléphone. Par exemple, les numéros de téléphone en Pologne comportent neuf chiffres, alors qu'il n'y a pas de longueur définie pour les numéros de téléphone en Italie. Si vous développez votre propre page d'accueil et que votre flux de travail de signature électronique inclut l'authentification SMS, vous devez inclure un composant HTML pour tenir compte des différentes normes dans les numéros de téléphone internationaux. Dans ce blog, nous présenterons un plugin «intl-tel-input» qui vous permet de configurer facilement votre déploiement OneSpan Sign pour inclure des numéros de téléphone internationaux.

Ci-dessous, nous avons inclus un GIF du plugin en action:

Remarque dans la démonstration, ces trois caractéristiques clés:

• Le plugin comprend un menu déroulant avec une liste de pays et des codes. Cette liste peut être personnalisée pour vos zones cibles.
   
• Lorsqu'elle est intégrée à un deuxième plugin appelé «Formatphonenumber», votre entrée sera automatiquement formatée avec le numéro de téléphone du pays sélectionné.
   
• Le plugin comprend un validateur de numéro intégré, ou vous pouvez facilement ajouter un validateur personnalisé vous-même.

Vous pouvez télécharger le code du plugin ici .

Programmation du plugin d'authentification SMS

Dans la page HTML, vous devez d'abord introduire les dépendances comme décrit ci-dessous:

  <!-- jQuery --> 
  <script src="js/jquery/jquery.min.js"></script> 
  <!-- intl-tel-input -->
  <script src="js/intl-tel-input/js/intlTelInput.min.js"></script>
  <!-- formatphonenumber -->
  <script src="js/formatphonenumber/formatphonenumber.js"></script>

Dans cette démo, nous avons utilisé deux plugins open source:

• Entrée Intl-Tel : Un plugin JavaScript pour saisir et valider les numéros de téléphone internationaux. Nous avons utilisé la version dépendante de jQuery dans le code. Si nécessaire, ils prennent désormais également en charge une version purement JavaScript dans leur dernière version.
   
• Formatphonenumber : Formate les numéros de téléphone pour s'aligner sur le style d'un pays sélectionné, dépend également de jQuery.

De là, nous pouvons coder notre page. Le composant intl-tel-input doit être une balise «input» avec l'ID «smsPhone», qui doit être suivie.

  <div id="sms">
        <label for="smsPhone">Phone Number: </label>
        <input type="tel" id="smsPhone">
        <button id="submit">Submit</button>
  </div>

Dans notre code JavaScript personnalisé, nous pouvons initialiser le plugin intl-tel-input de cette manière:

      //init intlTelInput
      $("#smsPhone").intlTelInput({
        onlyCountries: ['ca', 'us', 'au'],
        preferredCountries:[],
        autoHideDialCode: false,
        utilsScript: "js/intl-tel-input/js/utils.js"
      });

Remarque :

• L'attribut «onlyCountries» définit la liste des pays.
   
• Modifiez le chemin «utilsScript» en fonction de la structure de votre projet.
   
• Consultez leur site Web pour les autres fonctionnalités disponibles.

Chaque fois qu'un utilisateur sélectionne un pays dans la liste, le plugin intl-tel-input ajoutera un attribut «placeholder» à l'élément HTML, qui peut être utilisé pour formater le nombre:

      var updateDataFormat = function(){
        var dataFormat = $('#smsPhone').attr("placeholder").replace(/\d/g, "#");
        $('#smsPhone').formatPhoneNumber({
          format: dataFormat
        });
        // console.log(dataFormat);
      }

De plus, cette fonction de format devra être liée aux événements HTML:

      //once the country is changed
      $("#smsPhone").on("countrychange", function(e, countryData) {
        $("#smsPhone").val("");
          updateDataFormat();
      });

      //once the input is on focus
      $("#smsPhone").on("focus", function(e, countryData) {
          updateDataFormat();
      });

Lors de la soumission, nous récupérons séparément les codes de pays et les numéros de téléphone et les imprimons dans la console. C'est ici que vous pouvez ajouter la validation de votre numéro de téléphone avant d'envoyer un colis:

      $("#submit").on("click", function() {
          var phoneNumber = $("#smsPhone").val().replace(/\D/g, "").replace(/^0+/, "");

          var countryCode = $("#smsPhone").intlTelInput("getSelectedCountryData").dialCode;

          console.log(countryCode + phoneNumber);
      });

Enfin, avant de lancer, veuillez toujours vous assurer que le format du numéro de téléphone est cohérent avec le numéro utilisé par OneSpan Sign. Accédez à votre portail Web pour créer un package de test à partir de votre tableau de bord avec l'authentification SMS du signataire sélectionnée. Vous pouvez ensuite récupérer les métadonnées du package et comparer le format utilisé par OneSpan Sign au vôtre.

Nous avons construit avec succès un composant d'entrée de numéro de téléphone international. N'hésitez pas à modifier le code comme bon vous semble.

Guides relatifs à l'authentification SMS

• Si vous commencez tout juste avec OneSpan Sign, notre Guides de démarrage rapide vous expliquera comment créer et envoyer votre package à l'aide d'API ou de SDK.
   
• Pour ajouter une sécurité supplémentaire, comme un SMS vérifiant l'identité du signataire, reportez-vous à notre Guide d'authentification des signataires .
   
• Si vous n'étiez pas familiarisé avec l'ajout d'un signataire à un package ou si vous souhaitez en savoir plus sur d'autres opérations, reportez-vous au Guide de gestion des signataires .

Si vous avez des questions concernant ce blog ou toute autre chose concernant l'intégration de OneSpan Sign dans votre application, visitez les Forums communautairesdes développeurs . Vos commentaires sont importants pour nous!