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
🎯 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
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:
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:
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:
