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