微信小程序验证码实现指南

B站影视 欧美电影 2025-04-09 11:21 2

摘要: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前缀等)

微信规范要求

Ø 手机号获取需用户主动触发

Ø 敏感信息需加密传输

Ø 遵守《微信小程序运营规范》

建议优先考虑使用微信官方提供的手机号快速验证组件,通过获取加密数据后到后端解密,可免去手动输入手机号的步骤,同时更符合平台规范。

来源:老客数据一点号

相关推荐