uniapp验证码

uniapp验证码实现方法

使用第三方短信服务商API

在uniapp中调用短信服务商API发送验证码，需要后端配合完成。常见服务商包括阿里云短信、腾讯云短信、云片等。

前端调用示例：

uni.request({
  url: 'https://your-api-domain.com/send-sms',
  method: 'POST',
  data: {
    phone: '13800138000',
    type: 'login'
  },
  success: (res) => {
    console.log('验证码发送成功', res.data);
  }
});

前端倒计时功能实现

发送验证码后实现60秒倒计时：

data() {
  return {
    countdown: 0,
    codeText: '获取验证码'
  }
},
methods: {
  getCode() {
    if (this.countdown > 0) return;

    this.countdown = 60;
    const timer = setInterval(() => {
      this.countdown--;
      this.codeText = `${this.countdown}s后重新获取`;
      if (this.countdown <= 0) {
        clearInterval(timer);
        this.codeText = '获取验证码';
      }
    }, 1000);

    // 调用发送验证码接口
    this.sendSmsCode();
  }
}

图形验证码实现

使用canvas绘制图形验证码：

methods: {
  createCode() {
    const canvas = uni.createCanvasContext('verifyCanvas');
    const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    let code = '';

    // 绘制背景
    canvas.setFillStyle('#f0f0f0');
    canvas.fillRect(0, 0, 120, 40);

    // 绘制随机字符
    for (let i = 0; i < 4; i++) {
      const char = chars[Math.floor(Math.random() * chars.length)];
      code += char;
      canvas.setFontSize(20 + Math.random() * 10);
      canvas.setFillStyle(`rgb(${Math.random() * 100},${Math.random() * 100},${Math.random() * 100})`);
      canvas.fillText(char, 10 + i * 25, 25 + Math.random() * 10);
    }

    // 绘制干扰线
    for (let i = 0; i < 5; i++) {
      canvas.moveTo(Math.random() * 120, Math.random() * 40);
      canvas.lineTo(Math.random() * 120, Math.random() * 40);
      canvas.stroke();
    }

    canvas.draw();
    this.verificationCode = code.toLowerCase();
  }
}

验证码输入框组件

在template中使用验证码输入框：

<view class="code-input">
  <input type="number" v-model="smsCode" placeholder="请输入验证码" />
  <button @click="getCode" :disabled="countdown > 0">{{codeText}}</button>
</view>
<canvas canvas-id="verifyCanvas" @click="createCode" style="width:120px;height:40px;"></canvas>

安全注意事项

验证码功能需要考虑安全性问题：限制同一IP发送频率、设置每日发送上限、验证码有效期控制在5-10分钟、后端校验验证码时区分大小写。

后端验证示例

前端提交验证码到后端验证：

verifyCode() {
  uni.request({
    url: 'https://your-api-domain.com/verify-code',
    method: 'POST',
    data: {
      phone: '13800138000',
      code: this.smsCode
    },
    success: (res) => {
      if (res.data.success) {
        uni.showToast({ title: '验证成功' });
      } else {
        uni.showToast({ title: '验证码错误', icon: 'none' });
      }
    }
  });
}