Vérification de numéro de téléphone mobile

Introduction

Dans ce projet, vous allez apprendre à implémenter une fonction de vérification de compte à l'aide d'un code de vérification de numéro de téléphone mobile. Cette fonction est couramment utilisée dans de nombreux plateformes aujourd'hui pour offrir aux utilisateurs une couche supplémentaire de sécurité et de commodité lors de la connexion.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment implémenter la fonction pour envoyer le code de vérification
• Comment implémenter la fonction pour vérifier le code de vérification entré
• Comment comprendre l'utilisation du composant Notification dans Element Plus

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Gérer l'entrée et la validation de l'utilisateur
• Générer et gérer des codes de vérification dynamiques
• Utiliser le composant Notification pour afficher des messages de succès et d'erreur
• Implémenter la commutation de composants et la gestion d'état à l'aide de Vue.js et de Pinia

Skills Graph

Configurer la structure du projet

Dans cette étape, vous allez apprendre à configurer la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet pour ce projet. La structure de répertoire est la suivante :

├── css
│   ├── [email protected]
│   │   ├── index.css
│   │   └── index.full.js
│   └── index.css
├── images
│   └── flèche.png
├── index.html
└── js
    ├── index.mjs
    ├── pinia.esm-browser.js
    ├── vue3.global.js
    └── vue.esm-browser.prod.js

Dans lequel :

• css est le dossier pour stocker les styles référencés par la page.
• images est le dossier pour stocker les images référencées par la page.
• js est le dossier pour stocker les fichiers JavaScript référencés par la page.
• index.html est le fichier qui doit être complété.

Cliquez sur le bouton Démarrer en direct dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Fournir des variables et des fonctions

Dans cette étape, nous prenons les variables et les fonctions nécessaires pour les étapes suivantes.

1. Ouvrez le fichier index.html dans le projet fourni.
2. Localisez const { createApp, reactive, toRefs } = Vue; et ajoutez-le comme le code suivant pour une utilisation ultérieure.

const { createApp, reactive, toRefs, provide, inject, ref, watch } = Vue;

const { createApp, reactive, toRefs, provide, inject, ref, watch } = Vue; 3. Localisez le premier // TODO et ajoutez le code suivant :

const app = createApp({
  setup() {
    let data = reactive({
      showName: "phone"
    });
    // TODO
    const code = ref([]);
    const phoneVal = ref("");
    const createCode = function () {
      let res = "";
      function* _create() {
        let count = 0;
        while (++count <= 6) {
          yield Math.floor(Math.random() * 10);
        }
      }
      for (const iterator of _create()) {
        res += iterator;
      }
      return res;
    };
    const handlePhone = (num) => {
      let res = "";
      for (let idx in num) {
        if (idx > 2 && idx < num.length - 2) {
          res += "*";
        } else {
          res += num[idx];
        }
      }
      return res;
    };
    provide("code", code);
    provide("phoneVal", phoneVal);
    provide("createCode", createCode);
    provide("data", data);
    provide("handlePhone", handlePhone);
    return {
      ...toRefs(data)
    };
  }
});

Dans le code ci-dessus, la fonction createCode() est pour créer le CAPTCHA à six chiffres et la fonction handlePhone() est pour simplement chiffrer le numéro de téléphone.

Implémenter la fonction pour envoyer le code de vérification

Dans cette étape, vous allez apprendre à implémenter la fonction pour envoyer le code de vérification. Suivez les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le fichier index.html dans le projet fourni.
2. Ajoutez des événements de liaison à la section <template id="phone"> :

<!-- phone -->
<template id="phone">
  <div>
    <ul class="phone">
      <span>Entrez votre numéro de téléphone portable</span>
      <li>
        <input type="text" v-model="phoneVal" autofocus id="numberInput" />
      </li>
      <li>
        <input type="checkbox" v-model="isSure" name="" id="checkbox" />
        <span
          >J'ai lu et j'accepte le
          <a href="javascript:;">Contrat de service</a>
          et les
          <a href="javascript:;">Règles de confidentialité</a>
        </span>
      </li>
      <button id="btn" @click="nextStep">Suivant</button>
    </ul>
  </div>
</template>
<!-- phone -->

3. Dans la fonction setup() du composant phone, injectez les variables et les fonctions nécessaires :

app.component("phone", {
  template: "#phone",
  setup() {
    // TODO
    let isSure = ref("");
    let phoneVal = inject("phoneVal");
    let code = inject("code");
    let createCode = inject("createCode");
    let data = inject("data");
    return {};
  }
});

4. Implémentez la fonction verifyPhone() pour vérifier la validité du numéro de téléphone :

function verifyPhone(num) {
  if (num.length != 11) return false;
  return num[0] == 1 && num[1] == 8;
}

5. Implémentez la fonction nextStep() pour gérer le clic sur le bouton suivant, le code complet du composant phone est le suivant :

app.component("phone", {
  template: "#phone",
  setup() {
    // TODO
    let isSure = ref("");
    let phoneVal = inject("phoneVal");
    let code = inject("code");
    let createCode = inject("createCode");
    let data = inject("data");

    function verifyPhone(num) {
      if (num.length != 11) return false;
      return num[0] == 1 && num[1] == 8;
    }

    return {
      isSure,
      phoneVal,
      nextStep() {
        if (!isSure.value)
          return ElNotification({
            title: "Envoi échoué",
            message: "Veuillez lire et accepter l'accord ci-dessous",
            type: "error"
          });
        if (!verifyPhone(phoneVal.value))
          return ElNotification({
            title: "Envoi échoué",
            message: "Numéro de téléphone invalide",
            type: "error"
          });
        code.value = createCode();
        ElNotification({
          title: "Envoi réussi",
          message: "Votre code de vérification est " + code.value,
          type: "success"
        });
        data.showName = "check";
      }
    };
  }
});

Dans cette fonction, nous vérifions tout d'abord si l'utilisateur a accepté les termes et conditions. Si ce n'est pas le cas, nous affichons une notification d'erreur. Ensuite, nous vérifions la validité du numéro de téléphone à l'aide de la fonction verifyPhone(). Si le numéro de téléphone est invalide, nous affichons une notification d'erreur. Si les deux conditions sont remplies, nous générons un code de vérification aléatoire à 6 chiffres à l'aide de la fonction createCode(), affichons une notification de succès et commutons le composant au composant check.

Implémenter la fonction pour vérifier le code de vérification entré

Dans cette étape, vous allez apprendre à implémenter la fonction pour vérifier le code de vérification entré. Suivez les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le fichier index.html dans le projet fourni.
2. Ajoutez des événements de liaison à la section <template id="check"> :

<!-- check -->
<template id="check">
  <ul class="number">
    <span>Entrez le code de vérification SMS</span>
    <li class="hassend">
      Un code de vérification a été envoyé à
      <i>{{handlePhoneVal}}</i>
    </li>
    <li class="code-container">
      <input type="number" class="code" min="0" max="9" required />
      <input type="number" class="code" min="0" max="9" required />
      <input type="number" class="code" min="0" max="9" required />
      <input type="number" class="code" min="0" max="9" required />
      <input type="number" class="code" min="0" max="9" required />
      <input type="number" class="code" min="0" max="9" required />
    </li>
    <a href="javascript:;" id="resend" @click="resentCode">Renvoyer</a>
  </ul>
</template>
<!-- check -->

3. Dans le composant check, ajoutez les variables et les fonctions nécessaires :

app.component("check", {
  template: "#check",
  setup() {
    // TODO
    let phoneVal = inject("phoneVal"),
      handlePhoneVal = inject("handlePhone")(phoneVal.value),
      data = inject("data"),
      code = inject("code"),
      createCode = inject("createCode"),
      rVal = "";

    return {};
  }
});

4. Implémentez la logique pour gérer l'entrée du code de vérification :

setTimeout(() => {
  let oCodeIptList = [...document.getElementsByClassName("code")];

  oCodeIptList[0].focus();

  oCodeIptList.map((item) => {
    item.oninput = function () {
      if (item.value) {
        item?.nextElementSibling && item?.nextElementSibling.focus();
      } else {
        item?.previousElementSibling && item?.previousElementSibling.focus();
      }
      rVal = (oCodeIptList.map((item) => item.value) + "").replaceAll(",", "");
      trackVal(rVal);
    };
  });
  function trackVal(val) {
    if (val.length >= 6) {
      if (val == code.value) {
        ElNotification({
          title: "Vérification réussie",
          message: "Bienvenue de retour",
          type: "success"
        });
        data.showName = "success";
      } else {
        ElNotification({
          title: "Vérification échouée",
          message: "Le code de vérification que vous avez entré est incorrect",
          type: "error"
        });
        [...document.getElementsByClassName("code")].map(
          (item) => (item.value = "")
        );
        [...document.getElementsByClassName("code")][0].focus();
      }
    }
  }
});

Dans ce code, nous mettons d'abord le focus sur le premier champ d'entrée pour le code de vérification. Ensuite, nous ajoutons un gestionnaire d'événement oninput à chaque champ d'entrée. Lorsque l'utilisateur entre une valeur, le curseur saute automatiquement au champ d'entrée suivant. Lorsque l'utilisateur supprime une valeur, le curseur saute automatiquement au champ d'entrée précédent.

Nous implémentons également la fonction trackVal() pour vérifier le code de vérification entré. Si l'entrée est de 6 chiffres et correspond au code de vérification généré, nous affichons une notification de succès et commutons le composant au composant success. Si l'entrée est incorrecte, nous effaçons les champs d'entrée et affichons une notification d'erreur.

5. Implémentez la fonction resentCode() pour renvoyer le code de vérification, le code complet du composant check est le suivant :

app.component("check", {
  template: "#check",
  setup() {
    // TODO
    let phoneVal = inject("phoneVal"),
      handlePhoneVal = inject("handlePhone")(phoneVal.value),
      data = inject("data"),
      code = inject("code"),
      createCode = inject("createCode"),
      rVal = "";
    setTimeout(() => {
      let oCodeIptList = [...document.getElementsByClassName("code")];

      oCodeIptList[0].focus();

      oCodeIptList.map((item) => {
        item.oninput = function () {
          if (item.value) {
            item?.nextElementSibling && item?.nextElementSibling.focus();
          } else {
            item?.previousElementSibling &&
              item?.previousElementSibling.focus();
          }
          rVal = (oCodeIptList.map((item) => item.value) + "").replaceAll(
            ",",
            ""
          );
          trackVal(rVal);
        };
      });
      function trackVal(val) {
        if (val.length >= 6) {
          if (val == code.value) {
            ElNotification({
              title: "Vérification réussie",
              message: "Bienvenue de retour",
              type: "success"
            });
            data.showName = "success";
          } else {
            ElNotification({
              title: "Vérification échouée",
              message:
                "Le code de vérification que vous avez entré est incorrect",
              type: "error"
            });
            [...document.getElementsByClassName("code")].map(
              (item) => (item.value = "")
            );
            [...document.getElementsByClassName("code")][0].focus();
          }
        }
      }
    });

    return {
      handlePhoneVal,
      resentCode() {
        code.value = createCode();
        ElNotification({
          title: "Envoi réussi",
          message: "Votre code de vérification est " + code.value,
          type: "success"
        });
      }
    };
  }
});

Cette fonction génère un nouveau code de vérification et affiche une notification de succès.

C'est tout! Vous avez maintenant terminé l'implémentation de la fonction de vérification de compte à l'aide d'un code de vérification de numéro de téléphone mobile.

L'effet final est le suivant :

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.