Реализовать верификацию мобильного телефона

Введение

В этом проекте вы научитесь реализовывать функцию верификации учетной записи с использованием кодового подтверждения по мобильному телефону. Эта функция широко используется на многих платформах в настоящее время для обеспечения дополнительного уровня безопасности и удобства при входе пользователей.

👀 Предварительный просмотр

Демонстрация процесса верификации учетной записи

Демонстрация ввода кодового подтверждения

🎯 Задачи

В этом проекте вы научитесь:

Как реализовать функцию отправки кодового подтверждения
Как реализовать функцию проверки введенного кодового подтверждения
Как понять использование компонента Notification в Element Plus

🏆 Достижения

После завершения этого проекта вы сможете:

Обрабатывать ввод пользователя и валидацию
Генерировать и управлять динамическими кодовыми подтверждениями
Использовать компонент Notification для отображения сообщений об успехе и ошибке
Реализовывать переключение компонентов и управление состоянием с использованием Vue.js и Pinia

Настройка структуры проекта

В этом шаге вы научитесь настраивать структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта для этого проекта. Структура каталогов следующая:

├── 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

В том числе:

css - папка для хранения стилей, на которые ссылается страница.
images - папка для хранения изображений, на которые ссылается страница.
js - папка для хранения JavaScript-файлов, на которые ссылается страница.
index.html - файл, который необходимо заполнить.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, и вы увидите страницу.

Предоставление переменных и функций

В этом шаге мы берём переменные и функции, необходимые для последующих шагов.

Откройте файл index.html в предоставленном проекте.
Найдите const { createApp, reactive, toRefs } = Vue; и добавьте его в виде следующего кода для последующего использования.

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

const { createApp, reactive, toRefs, provide, inject, ref, watch } = Vue; 3. Найдите первый // TODO и добавьте следующий код:

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

В вышеприведённом коде функция createCode() используется для создания шестизначного капчи, а функция handlePhone() используется для простой шифровки номера телефона.

Реализовать функцию отправки кодового подтверждения

В этом шаге вы научитесь реализовывать функцию отправки кодового подтверждения. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте файл index.html в предоставленном проекте.
Добавьте привязку событий к разделу <template id="phone">:

<!-- phone -->
<template id="phone">
  <div>
    <ul class="phone">
      <span>Введите номер мобильного телефона</span>
      <li>
        <input type="text" v-model="phoneVal" autofocus id="numberInput" />
      </li>
      <li>
        <input type="checkbox" v-model="isSure" name="" id="checkbox" />
        <span
          >Прочитано и согласено с
          <a href="javascript:;">Соглашением о сервисе</a>
          и
          <a href="javascript:;">Руководством по конфиденциальности</a>
        </span>
      </li>
      <button id="btn" @click="nextStep">Далее</button>
    </ul>
  </div>
</template>
<!-- phone -->

В функции setup() компонента phone внедрите необходимые переменные и функции:

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

Реализуйте функцию verifyPhone() для проверки валидности номера телефона:

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

Реализуйте функцию nextStep() для обработки нажатия кнопки далее, весь код для компонента phone выглядит следующим образом:

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: "Отправка не удалась",
            message:
              "Пожалуйста, прочитайте и согласитесь с нижеследующим соглашением",
            type: "error"
          });
        if (!verifyPhone(phoneVal.value))
          return ElNotification({
            title: "Отправка не удалась",
            message: "Некорректный номер телефона",
            type: "error"
          });
        code.value = createCode();
        ElNotification({
          title: "Отправлено успешно",
          message: "Ваш код подтверждения: " + code.value,
          type: "success"
        });
        data.showName = "check";
      }
    };
  }
});

В этой функции мы сначала проверяем, согласился ли пользователь с условиями. Если нет, показываем ошибочное уведомление. Затем проверяем валидность номера телефона с использованием функции verifyPhone(). Если номер телефона недействителен, показываем ошибочное уведомление. Если оба условия выполнены, генерируем случайный шестизначный код подтверждения с использованием функции createCode(), показываем успешное уведомление и переключаем компонент на компонент check.

Реализовать функцию проверки введенного кодового подтверждения

В этом шаге вы научитесь реализовывать функцию проверки введенного кодового подтверждения. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте файл index.html в предоставленном проекте.
Добавьте привязку событий к разделу <template id="check">:

<!-- check -->
<template id="check">
  <ul class="number">
    <span>Введите код подтверждения из SMS</span>
    <li class="hassend">
      Код подтверждения был отправлен на
      <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">Отправить снова</a>
  </ul>
</template>
<!-- check -->

В компоненте check добавьте необходимые переменные и функции:

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

Реализуйте логику обработки ввода кодового подтверждения:

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: "Подтверждение успешное",
          message: "Добро пожаловать обратно",
          type: "success"
        });
        data.showName = "success";
      } else {
        ElNotification({
          title: "Подтверждение неудачное",
          message: "Введенный вами код подтверждения неверен",
          type: "error"
        });
        [...document.getElementsByClassName("code")].map(
          (item) => (item.value = "")
        );
        [...document.getElementsByClassName("code")][0].focus();
      }
    }
  }
});

В этом коде мы сначала устанавливаем фокус на первом поле ввода кода подтверждения. Затем мы добавляем обработчик события oninput к каждому полю ввода. Когда пользователь вводит значение, курсор автоматически переходит к следующему полю ввода. Когда пользователь удаляет значение, курсор автоматически переходит к предыдущему полю ввода.

Мы также реализуем функцию trackVal() для проверки введенного кодового подтверждения. Если введено 6 цифр и они совпадают с сгенерированным кодом подтверждения, мы показываем успешное уведомление и переключаем компонент на компонент success. Если введенные данные неверны, мы очищаем поля ввода и показываем ошибочное уведомление.

Реализуйте функцию resentCode() для повторной отправки кодового подтверждения, весь код для компонента check выглядит следующим образом:

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: "Подтверждение успешное",
              message: "Добро пожаловать обратно",
              type: "success"
            });
            data.showName = "success";
          } else {
            ElNotification({
              title: "Подтверждение неудачное",
              message: "Введенный вами код подтверждения неверен",
              type: "error"
            });
            [...document.getElementsByClassName("code")].map(
              (item) => (item.value = "")
            );
            [...document.getElementsByClassName("code")][0].focus();
          }
        }
      }
    });

    return {
      handlePhoneVal,
      resentCode() {
        code.value = createCode();
        ElNotification({
          title: "Отправлено успешно",
          message: "Ваш код подтверждения: " + code.value,
          type: "success"
        });
      }
    };
  }
});

Эта функция генерирует новый код подтверждения и показывает успешное уведомление.

Вот и все! Теперь вы завершили реализацию функции верификации учетной записи с использованием кодового подтверждения по мобильному телефону.

Финальный эффект выглядит следующим образом:

Описание изображения

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.

Верификация мобильного телефона