Implementar Verificação de Número de Celular

Introdução

Neste projeto, você aprenderá como implementar um recurso de verificação de conta usando um código de verificação por número de telefone celular. Este recurso é comumente usado em muitas plataformas atualmente para fornecer aos usuários uma camada adicional de segurança e conveniência ao fazer login.

👀 Pré-visualização

Demonstração do processo de verificação da conta

Demonstração da entrada do código de verificação

🎯 Tarefas

Neste projeto, você aprenderá:

Como implementar a função para enviar o código de verificação
Como implementar a função para verificar o código de verificação inserido
Como entender o uso do componente Notification no Element Plus

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Lidar com a entrada e validação do usuário
Gerar e gerenciar códigos de verificação dinâmicos
Usar o componente Notification para exibir mensagens de sucesso e erro
Implementar a troca de componentes e o gerenciamento de estado usando Vue.js e Pinia

Configurar a Estrutura do Projeto

Nesta etapa, você aprenderá como configurar a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto para este projeto. A estrutura do diretório é a seguinte:

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

Dentre eles:

css é a pasta para armazenar os estilos referenciados da página.
images é a pasta para armazenar as imagens referenciadas da página.
js é a pasta para armazenar os arquivos JavaScript referenciados da página.
index.html é o arquivo que precisa ser completado.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Fornecendo Variáveis e Funções

Nesta etapa, definimos as variáveis e funções necessárias para as etapas subsequentes.

Abra o arquivo index.html no projeto fornecido.
Localize const { createApp, reactive, toRefs } = Vue; e adicione-o como o seguinte código para uso posterior.

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

Localize o primeiro // TODO e adicione o seguinte código:

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

No código acima, a função createCode() serve para criar o CAPTCHA de seis dígitos e a função handlePhone() serve para simplesmente criptografar o número de telefone.

Implementar a Função para Enviar o Código de Verificação

Nesta etapa, você aprenderá como implementar a função para enviar o código de verificação. Siga os passos abaixo para concluir esta etapa:

Abra o arquivo index.html no projeto fornecido.
Adicione eventos de ligação à seção <template id="phone">:

<!-- 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 -->

Na função setup() do componente phone, injete as variáveis e funções necessárias:

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

Implemente a função verifyPhone() para verificar a validade do número de telefone:

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

Implemente a função nextStep() para lidar com o clique no botão next, todo o código para o componente phone é o seguinte:

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

Nesta função, primeiro verificamos se o usuário concordou com os termos e condições. Caso contrário, exibimos uma notificação de erro. Em seguida, verificamos a validade do número de telefone usando a função verifyPhone(). Se o número de telefone for inválido, exibimos uma notificação de erro. Se ambas as condições forem atendidas, geramos um código de verificação aleatório de 6 dígitos usando a função createCode(), exibimos uma notificação de sucesso e mudamos o componente para o componente check.

Implementar a Função para Verificar o Código de Verificação Inserido

Nesta etapa, você aprenderá como implementar a função para verificar o código de verificação inserido. Siga os passos abaixo para concluir esta etapa:

Abra o arquivo index.html no projeto fornecido.
Adicione eventos de ligação à seção <template id="check">:

<!-- 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 -->

No componente check, adicione as variáveis e funções necessárias:

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

Implemente a lógica para lidar com a entrada do código de verificação:

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

Neste código, primeiro focamos no primeiro campo de entrada para o código de verificação. Em seguida, adicionamos um manipulador de eventos oninput a cada campo de entrada. Quando o usuário insere um valor, o cursor irá automaticamente para o próximo campo de entrada. Quando o usuário exclui um valor, o cursor irá automaticamente para o campo de entrada anterior.

Também implementamos a função trackVal() para verificar o código de verificação inserido. Se a entrada tiver 6 dígitos e corresponder ao código de verificação gerado, exibimos uma notificação de sucesso e mudamos o componente para o componente success. Se a entrada estiver incorreta, limpamos os campos de entrada e exibimos uma notificação de erro.

Implemente a função resentCode() para reenviar o código de verificação, todo o código para o componente check é o seguinte:

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

Esta função gera um novo código de verificação e exibe uma notificação de sucesso.

É isso! Você concluiu a implementação do recurso de verificação de conta usando um código de verificação de número de telefone celular.

O efeito final é o seguinte:

Image Description

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.