广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
微信小程序中如何获取短信验证码登录的？以下代码详细解说了，分享给大家参考，看看下图的效果，后面将系统介绍短信验证码实现流程。
我是java开发者，后端使用了springMvc
短信验证码实现流程1、构造手机验证码，生成一个6位的随机数字串；2、使用接口向短信平台发送手机号和验证码，然后短信平台再把验证码发送到制定手机号上3、将手机号验证码、操作时间存入Session中，作为后面验证使用；4、接收用户填写的验证码、手机号及其他注册数据；5、对比提交的验证码与Session中的验证码是否一致，同时判断提交动作是否在有效期内；6、验证码正确且在有效期内，请求通过，处理相应的业务。
小程序代码
info.wxml
<!--info.wxml--><view class="container"> <view class="section"><text>手机号码</text><input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="inputPhoneNum" auto-focus /><text wx:if="{{send}}" class="sendMsg" bindtap="sendMsg">发送</text><text wx:if="{{alreadySend}}" class="sendMsg" bindtap="sendMsg">{{second+"s"}}</text></view> <view class="section"><text>短信验证</text><input placeholder="短信验证码" type="number" bindinput="addCode" /></view> <view class="section"><text>其他信息</text><input placeholder="需要提交的信息" bindinput="addOtherInfo" /></view> <button type="{{buttonType}}" disabled="{{disabled}}" bindtap="onSubmit">保存</button> </view>登录后复制info.js
// info.jsconst config = require('../../config/config.default.js') Page({ data: { send: false, alreadySend: false, second: 60, disabled: true, buttonType: 'default', phoneNum: '', code: '', otherInfo: '' }, onReady: function () { wx.request({ url: `${config.api + '/getSessionId.html'}`, header: { "Content-Type": "application/x-www-form-urlencoded" }, method: 'POST', success: function (res) { wx.setStorageSync('sessionId', 'JSESSIONID=' + res.data) } }) },// 手机号部分 inputPhoneNum: function (e) { let phoneNum = e.detail.value if (phoneNum.length === 11) { let checkedNum = this.checkPhoneNum(phoneNum) if (checkedNum) { this.setData({ phoneNum: phoneNum }) console.log('phoneNum' + this.data.phoneNum) this.showSendMsg() this.activeButton() } } else { this.setData({ phoneNum: '' }) this.hideSendMsg() } }, checkPhoneNum: function (phoneNum) { let str = /^1\d{10}$/ if (str.test(phoneNum)) { return true } else { wx.showToast({ title: '手机号不正确', image: '../../images/fail.png' }) return false } }, showSendMsg: function () { if (!this.data.alreadySend) { this.setData({ send: true }) } }, hideSendMsg: function () { this.setData({ send: false, disabled: true, buttonType: 'default' }) }, sendMsg: function () { var phoneNum = this.data.phoneNum; var sessionId = wx.getStorageSync('sessionId'); wx.request({ url: `${config.api + '/sendSms.html'}`, data: { phoneNum: phoneNum }, header: { "Content-Type": "application/x-www-form-urlencoded", "Cookie": sessionId }, method: 'POST', success: function (res) { console.log(res) } }) this.setData({ alreadySend: true, send: false }) this.timer() }, timer: function () { let promise = new Promise((resolve, reject) => { let setTimer = setInterval( () => { this.setData({ second: this.data.second - 1 }) if (this.data.second <= 0) { this.setData({ second: 60, alreadySend: false, send: true }) resolve(setTimer) } } , 1000) }) promise.then((setTimer) => { clearInterval(setTimer) }) }, // 其他信息部分 addOtherInfo: function (e) { this.setData({ otherInfo: e.detail.value }) this.activeButton() console.log('otherInfo: ' + this.data.otherInfo) }, // 验证码 addCode: function (e) { this.setData({ code: e.detail.value }) this.activeButton() console.log('code' + this.data.code) }, // 按钮 activeButton: function () { let {phoneNum, code, otherInfo} = this.data console.log(code) if (phoneNum && code && otherInfo) { this.setData({ disabled: false, buttonType: 'primary' }) } else { this.setData({ disabled: true, buttonType: 'default' }) } }, onSubmit: function () { var phoneNum = this.data.phoneNum; var code = this.data.code; var otherInfo = this.data.otherInfo; var sessionId = wx.getStorageSync('sessionId'); wx.request({ url: `${config.api + '/addinfo.html'}`, data: { phoneNum: phoneNum, code: code, otherInfo: otherInfo }, header: { "Content-Type": "application/x-www-form-urlencoded", "Cookie": sessionId }, method: 'POST', success: function (res) { console.log(res) if ((parseInt(res.statusCode) === 200) && res.data.message === 'pass') { wx.showToast({ title: '验证成功', icon: 'success' }) } else { wx.showToast({ title: res.data.message, image: '../../images/fail.png' }) } }, fail: function (res) { console.log(res) } }) }})登录后复制需要注意的是小程序没有session的概念，所以我们需要虚拟出http的session：
1) 在onReady获取服务器端的sessionId, 并存储到本地缓存中
2) 每次发起http请求时在header中构造: "Cookie": sessionId
服务器端代码
1. 获取sessionId
/** * 获得sessionId */@RequestMapping("/getSessionId")@ResponseBodypublic Object getSessionId(HttpServletRequest request) {try {HttpSession session = request.getSession();return session.getId();} catch (Exception e) {e.printStackTrace();}return null;}登录后复制2. 发送短信验证码
/** * 发送短信验证码 * @param number接收手机号码 */@RequestMapping("/sendSms")@ResponseBodypublic Object sendSms(HttpServletRequest request, String phoneNum) {try {JSONObject json = null;//生成6位验证码String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);//发送短信ZhenziSmsClient client = new ZhenziSmsClient("你的appId", "你的appSecret");String result = client.send(phoneNum, "您的验证码为:" + verifyCode + "，该码有效期为5分钟，该码只能使用一次！【短信签名】");json = JSONObject.parseObject(result);if(json.getIntValue("code") != 0)//发送短信失败return "fail";//将验证码存到session中,同时存入创建时间//以json存放，这里使用的是阿里的fastjsonHttpSession session = request.getSession();json = new JSONObject();json.put("verifyCode", verifyCode);json.put("createTime", System.currentTimeMillis());// 将认证码存入SESSIONrequest.getSession().setAttribute("verifyCode", json);return "success";} catch (Exception e) {e.printStackTrace();}return null;}登录后复制3. 提交信息并验证短信验证码 apache php mysql
/** * 注册 */@RequestMapping("/addinfo")@ResponseBodypublic Object addinfo(HttpServletRequest request, String phoneNum, String code, String otherInfo) {JSONObject json = (JSONObject)request.getSession().getAttribute("verifyCode");if(!json.getString("verifyCode").equals(code)){return "验证码错误";}if((System.currentTimeMillis() - json.getLong("createTime")) > 1000 * 60 * 5){return "验证码过期";}//将用户信息存入数据库//这里省略return "success";}登录后复制相关文章：
微信小程序登陆流程
微信小程序之登录实例详解（附代码）
相关视频：
login登录-微信小程序项目实战视频教程
以上就是系统—微信小程序中利用短信验证码login实现流程及代码详解的详细内容，更多请关注9543建站博客其它相关文章！
发表评论