摘要:router.post('/send-code', async (req, res) => {
在微信小程序中实现验证码功能通常需要前后端协作,以下是关键步骤和示例代码:
一、前端实现(小程序端)
javascript
// WXML
{{countdownText}}
// JS
Page({
data: {
isCounting: false,
countdownText: '获取验证码'
},
getCode {
const phone = this.data.phone; // 需先获取用户输入的手机号
if (!/^1[3-9]\d{9}$/.test(phone)) {
wx.showToast({ title: '手机号格式错误', icon: 'none' });
return;
}
this.setData({ isCounting: true });
let seconds = 60;
// 发送请求
wx.request({
url: 'https://yourdomain.com/api/send-code',
method: 'POST',
data: { phone },
success: (res) => {
if (res.data.code === 200) {
wx.showToast({ title: '验证码已发送' });
}
}
});
// 倒计时
const timer = setInterval( => {
seconds--;
this.setData({
countdownText: `${seconds}秒后重发`
});
if (seconds
clearInterval(timer);
this.setData({
isCounting: false,
countdownText: '重新获取'
});
}
}, 1000);
}
})
二、后端实现(示例Node.js)
javascript
const express = require('express');
const Redis = require('ioredis');
const redis = new Redis;
const Router = express.Router;
// 发送验证码接口
router.post('/send-code', async (req, res) => {
const { phone } = req.body;
// 频率限制(1分钟间隔)
const lastSent = await redis.get(`sms_cooldown:${phone}`);
if (lastSent && Date.now - lastSent
return res.json({ code: 400, msg: '操作过于频繁' });
}
// 生成6位随机码
const code = Math.floor(100000 + Math.random * 900000);
// 存储验证码(5分钟有效)
await redis.setex(`sms_code:${phone}`, 300, code);
await redis.setex(`sms_cooldown:${phone}`, 60, Date.now);
// 调用短信服务(示例用伪代码)
try {
await sendSMS(phone, `您的验证码是:${code},5分钟内有效`);
res.json({ code: 200, msg: '发送成功' });
} catch (err) {
console.error('短信发送失败', err);
res.json({ code: 500, msg: '发送失败' });
}
});
// 验证码校验接口
router.post('/verify-code', async (req, res) => {
const { phone, code } = req.body;
const storedCode = await redis.get(`sms_code:${phone}`);
if (!storedCode || storedCode !== code.toString) {
return res.json({ code: 400, msg: '验证码错误或已过期' });
}
// 验证通过后删除缓存
await redis.del(`sms_code:${phone}`);
res.json({ code: 200, msg: '验证成功' });
});
三、关键注意事项
安全防护:Ø 添加图形验证码/滑动验证(通过获取微信官方手机号)
Ø IP限流(防止恶意调用)
Ø 敏感操作日志记录
短信服务选择:Ø 腾讯云短信(推荐,与微信生态集成好)
Ø 阿里云、云片等第三方服务
Ø 需提前申请短信模板和签名
用户体验优化:Ø 本地缓存倒计时状态(防止页面切换后状态丢失)
Ø 错误重试机制
Ø 国际化手机号处理(+86前缀等)
微信规范要求:Ø 手机号获取需用户主动触发
Ø 敏感信息需加密传输
Ø 遵守《微信小程序运营规范》
建议优先考虑使用微信官方提供的手机号快速验证组件,通过获取加密数据后到后端解密,可免去手动输入手机号的步骤,同时更符合平台规范。
来源:老客数据一点号