SpringBoot实现短信验证码校验方法思路详解实现短信验证码校验方法思路详解
最近做项目遇到这样的需求,前端是基于BootStrap,html代码中有BootStrap样式实现的,具体后台实现代码大
家通过本文一起学习吧
有关阿里云通信短信服务验证码的发送,请参考我的另一篇文章 Springboot实现阿里云通信短信服务有关短信验证码的发送
功能
思路思路
用户输入手机号后,点击按钮获取验证码。并设置冷却时间,防止用户频繁点击。
后台生成验证码并发送到用户手机上,根据验证码、时间及一串自定义秘钥生成MD5值,并将时间也传回到前端。
用户输入验证码后,将验证码和时间传到后台。后台先用当前时间减去前台传过来的时间验证是否超时。如果没有超时,就用
用户输入的验证码 + 时间 + 自定义秘钥生成MD5值与之前的MD5值比较,如果相等则验证码校验通过,如果不等则说明验证
码输入错误校验失败。
原理有点像解方程:原理有点像解方程:
xyz经过一种不可逆运算得到A,将y和A传给用户,z后台保留,用户填写x1后,将x1 y A传回后台,后台再用x1 y z经过不可
逆运算得到A1,如果A1和A相等,则验证码校验通过。
前端的实现前端的实现
本例基于BootStrap,html代码中有BootStrap样式。如果你不想用BootStrap,可以将class样式去掉。效果如图所示。
html代码如下:
<div class="form-group has-feedback">
<input type="tel" class="form-control" id="phone" placeholder="请输入手机号" maxlength=11>
<span class="glyphicon glyphicon-earphone form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-6 pull_left">
<div class="form-group">
<input class="form-control" id="msg_num" placeholder="请输入验证码">
</div>
</div>
<div class="col-xs-6 pull_center">
<div class="form-group">
<input type="button" class="btn btn-block btn-flat" id="verify_refresh" onclick="getMsgNum(this)" value="免费获取验证码">
</div>
</div>
</div>
<div class="col-xs-12 pull_center">
<button type="button" class="btn btn-block btn-flat" onclick="validateNum()">验证</button>
</div>
js代码(基于jQuery)
var messageData;
var wait = 120; // 短信验证码120秒后才可获取下一个
/**
* 获取验证码
* @param that
*/
function getMsgNum(that) {
var phoneNumber = $('#phone').val();
setButtonStatus(that); // 设置按钮倒计时
var obj = {
phoneNumber: phoneNumber
};
$.ajax({
url: httpurl + '/sendMsg', // 后台短信发送接口
type: 'POST',