Verificación de número de teléfono móvil

Introducción

En este proyecto, aprenderás a implementar una característica de verificación de cuenta utilizando un código de verificación de número de teléfono móvil. Esta característica se utiliza comúnmente en muchas plataformas en la actualidad para brindar a los usuarios una capa adicional de seguridad y conveniencia al iniciar sesión.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo implementar la función para enviar el código de verificación
• Cómo implementar la función para verificar el código de verificación ingresado
• Cómo entender el uso del componente Notification en Element Plus

🏆 Logros

Después de completar este proyecto, podrás:

• Manejar la entrada y validación del usuario
• Generar y administrar códigos de verificación dinámicos
• Utilizar el componente Notification para mostrar mensajes de éxito y error
• Implementar el cambio de componentes y la gestión del estado utilizando Vue.js y Pinia

Skills Graph

Configurar la estructura del proyecto

En este paso, aprenderás a configurar la estructura del proyecto. Siga los pasos siguientes para completar este paso:

Abra la carpeta del proyecto para este proyecto. La estructura de directorios es la siguiente:

├── css
│   ├── [email protected]
│   │   ├── 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

Entre ellos:

• css es la carpeta para almacenar los estilos referenciados por la página.
• images es la carpeta para almacenar las imágenes referenciadas por la página.
• js es la carpeta para almacenar los archivos JavaScript referenciados por la página.
• index.html es el archivo que necesita completarse.

Haga clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abra "Web 8080" en la parte superior de la VM y actualícela manualmente y verá la página.

Proporcionar variables y funciones

En este paso, tomamos las variables y funciones necesarias para los pasos siguientes.

1. Abra el archivo index.html en el proyecto proporcionado.
2. Encuentre const { createApp, reactive, toRefs } = Vue; y agréguelo como el siguiente código para su uso posterior.

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

const { createApp, reactive, toRefs, provide, inject, ref, watch } = Vue; 3. Encuentre el primer // TODO y agregue el siguiente 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)
    };
  }
});

En el código anterior, la función createCode() es para crear el CAPTCHA de seis dígitos y la función handlePhone() es para simplemente encriptar el número de teléfono.

Implementar la función para enviar el código de verificación

En este paso, aprenderás a implementar la función para enviar el código de verificación. Siga los pasos siguientes para completar este paso:

1. Abra el archivo index.html en el proyecto proporcionado.
2. Agregue eventos de enlace a la sección <template id="phone">:

<!-- teléfono -->
<template id="phone">
  <div>
    <ul class="phone">
      <span>Ingrese número de celular</span>
      <li>
        <input type="text" v-model="phoneVal" autofocus id="numberInput" />
      </li>
      <li>
        <input type="checkbox" v-model="isSure" name="" id="checkbox" />
        <span
          >He leído y acepto el
          <a href="javascript:;">Contrato de Servicio</a>
          y
          <a href="javascript:;">Directrices de Privacidad</a>
        </span>
      </li>
      <button id="btn" @click="nextStep">Siguiente</button>
    </ul>
  </div>
</template>
<!-- teléfono -->

3. En la función setup() del componente phone, inyecte las variables y funciones necesarias:

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. Implemente la función verifyPhone() para comprobar la validez del número de teléfono:

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

5. Implemente la función nextStep() para manejar el clic del botón siguiente, todo el código del componente phone es el siguiente:

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: "Envío fallido",
            message: "Por favor, lea y acepte el acuerdo siguiente",
            type: "error"
          });
        if (!verifyPhone(phoneVal.value))
          return ElNotification({
            title: "Envío fallido",
            message: "Número de teléfono no válido",
            type: "error"
          });
        code.value = createCode();
        ElNotification({
          title: "Envío exitoso",
          message: "Su código de verificación es " + code.value,
          type: "success"
        });
        data.showName = "check";
      }
    };
  }
});

En esta función, primero comprobamos si el usuario ha aceptado los términos y condiciones. Si no es así, mostramos una notificación de error. Luego, comprobamos la validez del número de teléfono utilizando la función verifyPhone(). Si el número de teléfono es inválido, mostramos una notificación de error. Si se cumplen ambas condiciones, generamos un código de verificación aleatorio de 6 dígitos utilizando la función createCode(), mostramos una notificación de éxito y cambiamos el componente al componente check.

Implementar la función para verificar el código de verificación ingresado

En este paso, aprenderás a implementar la función para verificar el código de verificación ingresado. Siga los pasos siguientes para completar este paso:

1. Abra el archivo index.html en el proyecto proporcionado.
2. Agregue eventos de enlace a la sección <template id="check">:

<!-- comprobar -->
<template id="check">
  <ul class="number">
    <span>Ingrese el código de verificación de SMS</span>
    <li class="hassend">
      Se ha enviado un código de verificación a
      <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">Reenviar</a>
  </ul>
</template>
<!-- comprobar -->

3. En el componente check, agregue las variables y funciones necesarias:

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. Implemente la lógica para manejar la entrada del código de verificación:

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: "Verificación exitosa",
          message: "Bienvenido de nuevo",
          type: "success"
        });
        data.showName = "success";
      } else {
        ElNotification({
          title: "Verificación fallida",
          message: "El código de verificación que ingresó es incorrecto",
          type: "error"
        });
        [...document.getElementsByClassName("code")].map(
          (item) => (item.value = "")
        );
        [...document.getElementsByClassName("code")][0].focus();
      }
    }
  }
});

En este código, primero ponemos el foco en el primer campo de entrada para el código de verificación. Luego, agregamos un controlador de eventos oninput a cada campo de entrada. Cuando el usuario ingresa un valor, el cursor se saltará automáticamente al siguiente campo de entrada. Cuando el usuario elimina un valor, el cursor se saltará automáticamente al campo de entrada anterior.

También implementamos la función trackVal() para verificar el código de verificación ingresado. Si la entrada tiene 6 dígitos y coincide con el código de verificación generado, mostramos una notificación de éxito y cambiamos el componente al componente success. Si la entrada es incorrecta, limpiamos los campos de entrada y mostramos una notificación de error.

5. Implemente la función resentCode() para reenviar el código de verificación, todo el código del componente check es el siguiente:

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: "Verificación exitosa",
              message: "Bienvenido de nuevo",
              type: "success"
            });
            data.showName = "success";
          } else {
            ElNotification({
              title: "Verificación fallida",
              message: "El código de verificación que ingresó es incorrecto",
              type: "error"
            });
            [...document.getElementsByClassName("code")].map(
              (item) => (item.value = "")
            );
            [...document.getElementsByClassName("code")][0].focus();
          }
        }
      }
    });

    return {
      handlePhoneVal,
      resentCode() {
        code.value = createCode();
        ElNotification({
          title: "Enviado exitosamente",
          message: "Su código de verificación es " + code.value,
          type: "success"
        });
      }
    };
  }
});

Esta función genera un nuevo código de verificación y muestra una notificación de éxito.

¡Eso es todo! Ahora has completado la implementación de la característica de verificación de cuenta utilizando un código de verificación de número de teléfono móvil.

El efecto final es el siguiente:

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.