思路

用户输入手机号后，点击按钮获取验证码。并设置冷却时间，防止用户频繁点击。
后台生成验证码并发送到用户手机上，根据验证码、时间及一串自定义秘钥生成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',dataType: 'json',contentType: "application/json",async: false, //false 同步data: JSON.stringify(obj),xhrFields: {withCredentials: true},success: function (result) {if(result.code == '200') {messageData = result.data;}else {alert("错误码:" + data.code + "  错误信息:" + data.message);}},error: function (XMLHttpRequest, textStatus, errorThrown) {console.log(XMLHttpRequest.status);console.log(XMLHttpRequest.readyState);console.log(textStatus);}});
}
/*** 设置按钮状态*/
function setButtonStatus(that) {if (wait == 0) {that.removeAttribute("disabled");that.value="免费获取验证码";wait = 60;} else {that.setAttribute("disabled", true);that.value=wait+"秒后可以重新发送";wait--;setTimeout(function() {setButtonStatus(that)}, 1000)}
}/**
* 注册按钮
*/
function validateNum() {var data = {msgNum: inputMsgNum,tamp: messageData.tamp,hash: messageData.hash};$.ajax({url: httpurl + '/validateNum', // 验证接口type: 'POST',dataType: 'json',contentType: "application/json",data: JSON.stringify(data),async: false, //false 同步success: function (data) {//业务处理},error: function (XMLHttpRequest, textStatus, errorThrown) {console.log(XMLHttpRequest.status);console.log(XMLHttpRequest.readyState);console.log(textStatus);}});
}

其中setButtonStatus()方法用于设置按钮冷却状态。效果如下图

后台的实现

private static final String KEY = "abc123"; // KEY为自定义秘钥@RequestMapping(value = "/sendMsg", method = RequestMethod.POST, headers = "Accept=application/json")public Map<String, Object> sendMsg(@RequestBody Map<String,Object> requestMap) {String phoneNumber = requestMap.get("phoneNumber").toString();String randomNum = CommonUtils.createRandomNum(6);// 生成随机数SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss");Calendar c = Calendar.getInstance();c.add(Calendar.MINUTE, 5);String currentTime = sf.format(c.getTime());// 生成5分钟后时间，用户校验是否过期sengMsg(); //此处执行发送短信验证码方法String hash =  MD5Utils.getMD5Code(KEY + "@" + currentTime + "@" + randomNum);//生成MD5值Map<String, Object> resultMap = new HashMap<>();resultMap.put("hash", hash);resultMap.put("tamp", currentTime);return resultMap; //将hash值和tamp时间返回给前端}@RequestMapping(value = "/validateNum", method = RequestMethod.POST, headers = "Accept=application/json")public Map<String, Object> validateNum(@RequestBody Map<String,Object> requestMap) {String requestHash = requestMap.get("hash").toString();String tamp = requestMap.get("tamp").toString();String msgNum = requestMap.get("msgNum").toString();String hash = MD5Utils.getMD5Code(KEY + "@" + tamp + "@" + msgNum);if (tamp.compareTo(currentTime) > 0) {if (hash.equalsIgnoreCase(requestHash)){//校验成功}else {//验证码不正确，校验失败}} else {// 超时}}

========= 2018-10-26更新 =========
添加了MD5Utils工具类源码

public class MD5Utils {public static String getMD5Code(String content) {return Hashing.md5().newHasher().putString(content, Charsets.UTF_8).hash().toString();}
}

总结

以上就是基于SpringBoot的验证码校验方法。希望本文能对你有所帮助。

SpringBoot实现短信验证码校验相关推荐

Java用户注册手机短信验证码校验功能实现
验证用户提交的手机短信验证码,如果验证码错误就跳回到当前页面.在短信验证码未填写或未正确填写时,就关闭底下注册按钮的功能,只有短信验证码通过校验后才打开注册按钮的功能.第二种方式是所有输入项全部填写完 ...
【django】用户注册时短信验证码校验、避免频繁发送短信验证码【17】
注册时短信验证后端逻辑 class CheckSMScodeView(View):def get(self,request,phone):'''用户注册时短信验证码的校验功能:param reques ...
Springboot实现短信验证登录
一.介绍使用短信验证登录也是现在实际项目中普遍使用的一种登录, 二.实际的操作流程 1.用户在前端页面输入手机号码之后,点击发送验证码 2.前端将手机号传给后端 3.后端生成一个6为的随机数通过短信 ...
django-实现登录短信验证
功能演示核心任务前端功能: 点击按钮Ajax调用发送验证码功能输完验证码后Ajax调用验证功能后端功能: 功能1:发送验证码功能功能2:验证码检查后台核心逻辑(不需要手写) 功能3:发短信 ...
springboot中实现短信验证（从零开始、腾讯云）
前言最近由于毕业设计需要,打算使用短信验证注册和登录,所以特地查了一下一些常用的短信验证接口:阿里云.腾讯云.由于阿里云审核过于麻烦,所以使用了腾讯云,注册个公众号就可以啦! 第一步:注册公众号 1 ...
Springboot实现短信登录验证
Springboot学习笔记--Java实现短信登录验证功能--Servlet/SSM/SpringBoot都可以用小白记录一下短信验证登入的实现,方便以后可以拿来直接用. 发短信平台:互亿无线官 ...
Springboot+redis+榛子云短信验证服务进行登录
Springboot+redis+榛子云短信验证服务进行登录前言最近在做尚医通的医院预约挂号管理系统时,做到了使用阿里云的短信验证服务,但是现在阿里云的短信验证服务审核听说非常严格,主要是我没有专 ...
springboot整合阿里云短信验证(无需签名和模板，通过阿里云api测试实现短信验证)
一.开通阿里云短信服务开通步骤如下图所示开通完成后,进入阿里云短信验证首页,点击国内消息一般来说,在短信验证时需要签名管理和模板管理,但是签名管理需要备案或者上线服务,所以对于没有备案和上线应用 ...
SpringBoot下实现华为云短信验证功能(含代码)
准备工作登入华为云控制台,找到"消息&短信"模块,找到国内短信(本次开发只针对国内用户),下面分别有应用管理–签名管理–模板管理三块自上而下依次添加应用,首先是应 ...
榛子云短信验证平台与springboot集成的短信验证
登录 - 榛子云短信用户系统 (zhenzikj.com) 上面是登录榛子云短信验证平台的入口,此平台的短信大概为3.1分一条短信. 如何与spring boot进行集成呢,我以注册为例来慢慢讲解 1 ...

SpringBoot实现短信验证码校验

思路

前端的实现

后台的实现

总结

SpringBoot实现短信验证码校验相关推荐

最新文章

热门文章