Implementiere Mobilfunknummer-Verifizierung

Einführung

In diesem Projekt lernst du, wie du eine Kontenverifizierungsmöglichkeit mit einer Mobilfunknummer als Verifizierungscode implementierst. Diese Funktion wird heutzutage in vielen Plattformen verwendet, um Benutzern eine zusätzliche Sicherheitsebene und Bequemlichkeit beim Anmelden zu bieten.

👀 Vorschau

Demo des Kontenverifizierungsprozesses

Demo zur Eingabe des Verifizierungscodes

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Funktion zum Senden des Verifizierungscodes implementierst
Wie du die Funktion zum Verifizieren des eingegebenen Verifizierungscodes implementierst
Wie du die Verwendung der Notification-Komponente in Element Plus verstehst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Benutzer-Eingaben zu verarbeiten und zu validieren
Dynamische Verifizierungscodes zu generieren und zu verwalten
Die Notification-Komponente zum Anzeigen von Erfolg- und Fehlermeldungen zu verwenden
Die Komponentenwechsel und den Zustandsmanagement mit Vue.js und Pinia umzusetzen

Projektstruktur einrichten

In diesem Schritt lernst du, wie du die Projektstruktur einrichtest. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner für dieses Projekt. Die Verzeichnisstruktur ist wie folgt:

├── css
│   ├── element-plus@2.3.7
│   │   ├── index.css
│   │   └── index.full.js
│   └── index.css
├── images
│   └── arrow.png
├── index.html
└── js
    ├── index.mjs
    ├── pinia.esm-browser.js
    ├── vue3.global.js
    └── vue.esm-browser.prod.js

Darin:

css ist der Ordner zum Speichern der auf der Seite referenzierten Styles.
images ist der Ordner zum Speichern der auf der Seite referenzierten Bilder.
js ist der Ordner zum Speichern der auf der Seite referenzierten JavaScript-Dateien.
index.html ist die Datei, die du vervollständigen musst.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben im VM und aktualisiere es manuell, und du wirst die Seite sehen.

Bereitstellen von Variablen und Funktionen

In diesem Schritt nehmen wir die Variablen und Funktionen, die für die nachfolgenden Schritte benötigt werden.

Öffne die Datei index.html im bereitgestellten Projekt.
Locate const { createApp, reactive, toRefs } = Vue; und füge es als folgenden Code hinzu, um ihn für spätere Verwendung zu haben.

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

const { createApp, reactive, toRefs, provide, inject, ref, watch } = Vue; 3. Locate den ersten // TODO und füge folgenden Code hinzu:

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)
    };
  }
});

In obigem Code ist die Funktion createCode() dazu, den sechstelligen CAPTCHA-Code zu erstellen, und die Funktion handlePhone() dient dazu, die Telefonnummer einfach zu verschlüsseln.

Implementiere die Funktion zum Senden des Verifizierungscodes

In diesem Schritt lernst du, wie du die Funktion zum Senden des Verifizierungscodes implementierst. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei index.html im bereitgestellten Projekt.
Füge Bindungsevents zum Abschnitt <template id="phone"> hinzu:

<!-- phone -->
<template id="phone">
  <div>
    <ul class="phone">
      <span>Enter cell phone number</span>
      <li>
        <input type="text" v-model="phoneVal" autofocus id="numberInput" />
      </li>
      <li>
        <input type="checkbox" v-model="isSure" name="" id="checkbox" />
        <span
          >Have read and agree to the
          <a href="javascript:;">Service Agreement</a>
          and
          <a href="javascript:;">Privacy Guidelines</a>
        </span>
      </li>
      <button id="btn" @click="nextStep">Next</button>
    </ul>
  </div>
</template>
<!-- phone -->

In der setup()-Funktion der phone-Komponente injiziere die erforderlichen Variablen und Funktionen:

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 {};
  }
});

Implementiere die verifyPhone()-Funktion, um die Gültigkeit der Telefonnummer zu überprüfen:

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

Implementiere die nextStep()-Funktion, um den Klick auf die next-Schaltfläche zu behandeln. Der gesamte Code für die phone-Komponente lautet wie folgt:

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: "Sent Failed",
            message: "Please read and agree to the agreement below",
            type: "error"
          });
        if (!verifyPhone(phoneVal.value))
          return ElNotification({
            title: "Sent Failed",
            message: "Invalid phone number",
            type: "error"
          });
        code.value = createCode();
        ElNotification({
          title: "Sent Successfully",
          message: "Your verification code is " + code.value,
          type: "success"
        });
        data.showName = "check";
      }
    };
  }
});

In dieser Funktion überprüfen wir zunächst, ob der Benutzer den Allgemeinen Geschäftsbedingungen zugestimmt hat. Wenn nicht, zeigen wir eine Fehlermeldung an. Anschließend überprüfen wir die Gültigkeit der Telefonnummer mit der verifyPhone()-Funktion. Wenn die Telefonnummer ungültig ist, zeigen wir eine Fehlermeldung an. Wenn beide Bedingungen erfüllt sind, generieren wir einen zufälligen sechstelligen Verifizierungscode mit der createCode()-Funktion, zeigen eine Erfolgsmeldung an und wechseln die Komponente zur check-Komponente.

Implementiere die Funktion zum Verifizieren des eingegebenen Verifizierungscodes

In diesem Schritt lernst du, wie du die Funktion zum Verifizieren des eingegebenen Verifizierungscodes implementierst. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne die Datei index.html im bereitgestellten Projekt.
Füge Bindungsevents zum Abschnitt <template id="check"> hinzu:

<!-- check -->
<template id="check">
  <ul class="number">
    <span>Enter SMS verification code</span>
    <li class="hassend">
      A verification code has been sent to
      <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">Resend</a>
  </ul>
</template>
<!-- check -->

In der check-Komponente füge die erforderlichen Variablen und Funktionen hinzu:

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 {};
  }
});

Implementiere die Logik zum Verarbeiten der Eingabe des Verifizierungscodes:

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: "Verification Successful",
          message: "Welcome back",
          type: "success"
        });
        data.showName = "success";
      } else {
        ElNotification({
          title: "Verification Failed",
          message: "The verification code you entered is incorrect",
          type: "error"
        });
        [...document.getElementsByClassName("code")].map(
          (item) => (item.value = "")
        );
        [...document.getElementsByClassName("code")][0].focus();
      }
    }
  }
});

In diesem Code setzen wir zunächst den Fokus auf das erste Eingabefeld für den Verifizierungscode. Anschließend fügen wir einem Ereignishandler oninput zu jedem Eingabefeld hinzu. Wenn der Benutzer einen Wert eingibt, springt der Cursor automatisch zum nächsten Eingabefeld. Wenn der Benutzer einen Wert löscht, springt der Cursor automatisch zum vorherigen Eingabefeld.

Wir implementieren auch die trackVal()-Funktion, um den eingegebenen Verifizierungscode zu verifizieren. Wenn die Eingabe 6 Stellen hat und mit dem generierten Verifizierungscode übereinstimmt, zeigen wir eine Erfolgsmeldung an und wechseln die Komponente zur success-Komponente. Wenn die Eingabe falsch ist, leeren wir die Eingabefelder und zeigen eine Fehlermeldung an.

Implementiere die resentCode()-Funktion, um den Verifizierungscode erneut zu senden. Der gesamte Code für die check-Komponente lautet wie folgt:

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: "Verification Successful",
              message: "Welcome back",
              type: "success"
            });
            data.showName = "success";
          } else {
            ElNotification({
              title: "Verification Failed",
              message: "The verification code you entered is incorrect",
              type: "error"
            });
            [...document.getElementsByClassName("code")].map(
              (item) => (item.value = "")
            );
            [...document.getElementsByClassName("code")][0].focus();
          }
        }
      }
    });

    return {
      handlePhoneVal,
      resentCode() {
        code.value = createCode();
        ElNotification({
          title: "Sent Successfully",
          message: "Your verification code is " + code.value,
          type: "success"
        });
      }
    };
  }
});

Diese Funktion generiert einen neuen Verifizierungscode und zeigt eine Erfolgsmeldung an.

Das war's! Du hast jetzt die Implementierung der Kontenverifizierungsmöglichkeit mit einem Mobilfunknummer-Verifizierungscode abgeschlossen.

Das endgültige Ergebnis ist wie folgt:

Image Description

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.