才开始学习小程序，用到短信验证码登录，使用榛子云短信(smsow.zhenzikj.com)

效果:

我是java开发者，后端使用了springMvc

短信验证码实现流程

1、构造手机验证码，生成一个6位的随机数字串；

2、使用接口向短信平台发送手机号和验证码，然后短信平台再把验证码发送到制定手机号上

3、将手机号验证码、操作时间存入Session中，作为后面验证使用；

4、接收用户填写的验证码、手机号及其他注册数据；

5、对比提交的验证码与Session中的验证码是否一致，同时判断提交动作是否在有效期内；

6、验证码正确且在有效期内，请求通过，处理相应的业务。

小程序代码

info.wxml

手机号码

发送

{{second+"s"}}

短信验证

其他信息

保存

info.js

// info.js

const 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")

@ResponseBody

public Object getSessionId(HttpServletRequest request) {

try {

HttpSession session = request.getSession();

return session.getId();

} catch (Exception e) {

e.printStackTrace();

}

return null;

}

2. 发送短信验证码

/**

* 发送短信验证码

* @param number接收手机号码

*/

@RequestMapping("/sendSms")

@ResponseBody

public 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存放，这里使用的是阿里的fastjson

HttpSession session = request.getSession();

json = new JSONObject();

json.put("verifyCode", verifyCode);

json.put("createTime", System.currentTimeMillis());

// 将认证码存入SESSION

request.getSession().setAttribute("verifyCode", json);

return "success";

} catch (Exception e) {

e.printStackTrace();

}

return null;

}

3. 提交信息并验证短信验证码

/**

* 注册

*/

@RequestMapping("/addinfo")

@ResponseBody

public 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";

}