系统—微信小程序中利用短信验证码login实现流程及代码详解

微信小程序中如何获取短信验证码登录的？以下代码详细解说了，分享给大家参考，看看下图的效果，后面将系统介绍短信验证码实现流程。

我是java开发者，后端使用了springMvc短信验证码实现流程1、构造手机验证码，生成一个6位的随机数字串；2、使用接口向短信平台发送手机号和验证码，然后短信平台再把验证码发送到制定手机号上3、将手机号验证码、操作时间存入Session中，作为后面验证使用；4、接收用户填写的验证码、手机号及其他注册数据；5、对比提交的验证码与Session中的验证码是否一致，同时判断提交动作是否在有效期内；6、验证码正确且在有效期内，请求通过，处理相应的业务。

小程序代码

info.wxml<!--info.wxml--><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.valueif (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 = /^1d{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.dataconsole.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实现流程及代码详解的详细内容，更多请关注小潘博客其它相关文章！