vue 短信验证

2025-01-21 12:49:39

在 Vue.js 中实现短信验证功能通常包括前端和后端的配合。前端负责展示短信验证码的输入框、发送验证码请求等，后端则负责生成验证码并通过短信服务发送给用户，验证用户输入的验证码是否正确。

这里给出一个简化的前端实现流程，你可以在此基础上根据实际需求进行扩展。

1. 前端实现：Vue.js

假设你已经有了一个基本的 Vue.js 项目，下面是实现短信验证的代码示例。

1.1 短信验证组件（`SmsVerification.vue`）

<template>
  <div>
    <h2>短信验证</h2>
    
    <div>
      <label for="phone">手机号：</label>
      <input type="text" v-model="phone" placeholder="请输入手机号" />
    </div>

    <div>
      <label for="verificationCode">验证码：</label>
      <input
        type="text"
        v-model="verificationCode"
        placeholder="请输入验证码"
      />
      <button @click="sendSms" :disabled="isSending">发送验证码</button>
    </div>

    <div>
      <button @click="verifyCode">验证验证码</button>
    </div>

    <p v-if="errorMessage" style="color: red">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '', // 用户输入的手机号
      verificationCode: '', // 用户输入的验证码
      isSending: false, // 控制发送按钮的禁用状态
      errorMessage: '', // 错误提示信息
    };
  },
  methods: {
    // 发送短信验证码
    async sendSms() {
      if (!this.phone || !this.isValidPhone(this.phone)) {
        this.errorMessage = '请输入有效的手机号';
        return;
      }

      this.isSending = true;
      this.errorMessage = '';

      try {
        // 向后端发送短信验证码请求
        const response = await this.$axios.post('/api/send-sms', { phone: this.phone });
        if (response.data.success) {
          alert('验证码已发送');
        } else {
          this.errorMessage = '发送验证码失败，请重试';
        }
      } catch (error) {
        this.errorMessage = '发送验证码失败，请重试';
      } finally {
        this.isSending = false;
      }
    },

    // 验证手机号格式
    isValidPhone(phone) {
      const regex = /^1[3-9]\d{9}$/; // 简单的手机号格式校验
      return regex.test(phone);
    },

    // 验证验证码
    async verifyCode() {
      if (!this.verificationCode) {
        this.errorMessage = '请输入验证码';
        return;
      }

      try {
        // 向后端发送验证验证码的请求
        const response = await this.$axios.post('/api/verify-sms', {
          phone: this.phone,
          code: this.verificationCode,
        });

        if (response.data.success) {
          alert('验证码验证成功');
        } else {
          this.errorMessage = '验证码无效或过期';
        }
      } catch (error) {
        this.errorMessage = '验证失败，请重试';
      }
    },
  },
};
</script>

2. 后端实现

你需要在后端设置接口来处理短信的发送和验证码验证请求。下面是后端的简单示例，使用了 Node.js 和 Express，假设你有一个短信服务提供商来发送短信。

2.1 安装相关依赖

npm install express axios body-parser

2.2 后端代码（`server.js`）

const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');

const app = express();
const port = 3000;

app.use(bodyParser.json());

// 模拟存储验证码
let codeStore = {};

// 模拟短信发送
function sendSms(phone, code) {
  return new Promise((resolve) => {
    // 这里假设短信发送成功，并将验证码存储
    console.log(`Sending SMS to ${phone}: Your verification code is ${code}`);
    codeStore[phone] = code;
    resolve({ success: true });
  });
}

// 发送验证码接口
app.post('/api/send-sms', async (req, res) => {
  const { phone } = req.body;
  
  // 生成随机验证码
  const code = Math.floor(100000 + Math.random() * 900000).toString();
  
  try {
    const response = await sendSms(phone, code);
    res.json(response);
  } catch (error) {
    res.json({ success: false });
  }
});

// 验证验证码接口
app.post('/api/verify-sms', (req, res) => {
  const { phone, code } = req.body;

  if (codeStore[phone] === code) {
    res.json({ success: true });
  } else {
    res.json({ success: false });
  }
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

3. 流程说明

发送验证码：

用户输入手机号，点击“发送验证码”按钮。
前端向后端发送请求，后端通过短信服务发送验证码到用户手机。
验证码生成后，存储在后端（可以使用 Redis 或数据库来存储）。

验证码验证：

用户输入验证码后，点击“验证验证码”按钮。
前端将手机号和验证码发送到后端进行验证。
后端检查验证码是否与之前发送的匹配，如果匹配则返回验证成功，否则返回失败。

4. 总结

在前端，通过 Vue.js 实现了发送短信验证码和验证验证码的功能。
后端使用 Express 框架处理发送验证码请求和验证验证码请求。
短信验证码通过简单的模拟（可以连接实际的短信服务提供商）进行发送和验证。

根据需要，你可以集成实际的短信 API（如阿里云短信服务、腾讯云短信服务等），以便发送真实的短信验证码。

码农公寓