最近在做只能净化器的后台用户管理系统，需要使用手机号进行注册，找了许久才大致了解了手机验证码实现流程，今天在此和大家分享一下。
我们使用的是榛子云短信平台, 官网地址:
我是java开发者，后端使用了springMvc，前端用的是jsp + jquery
下载demo:/download/zuoliangzhu/10733109
短信验证码实现流程
1、构造手机验证码，生成一个6位的随机数字串；
2、使用接口向短信平台发送手机号和验证码，然后短信平台再把验证码发送到制定手机号上
3、将手机号验证码、操作时间存入Session中，作为后面验证使用；
4、接收用户填写的验证码、手机号及其他注册数据；
5、对比提交的验证码与Session中的验证码是否一致，同时判断提交动作是否在有效期内；
6、验证码正确且在有效期内，请求通过，处理相应的业务。
前端的页面
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;%><!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script src="<%=basePath %>/view/js/jquery-2.1.1.min.js"></script><script src="<%=basePath %>/view/js/register.js?v=1.0.0"></script><script>function getBasePath(){return '<%=basePath%>';}</script></head><body><form><div>账号: <input name="userId"></div><div>密码: <input name="password"></div><div>手机号: <input name="number"></div><div>验证码: <input name="verifyCode"><button type="button" class="sendVerifyCode">获取短信验证码</button></div><div><button type="button" class="sub-btn">提交</button></div></form></body></html>
js
$(function(){ //发送验证码$(".sendVerifyCode").on("click", function(){var number = $("input[name=number]").val();$.ajax({url: getBasePath()+"/sendSms.html",async : true,type: "post",dataType: "json",data: {"number":number},success: function (data) {if(data == 'fail'){alert("发送验证码失败");return ;}}});}) //提交$(".sub-btn").on("click", function(){var data = {};data.userId = $.trim($("input[name=userId]").val());data.password = $.trim($("input[name=password]").val());data.number = $.trim($("input[name=number]").val());data.verifyCode = $.trim($("input[name=verifyCode]").val());$.ajax({url: getBasePath()+"/register.html",async : true,type: "post",dataType: "json",data: data,success: function (data) {if(data == 'fail'){alert("注册失败");return ;}alert("注册成功");}});})});
这里省略了所有非空、手机号格式验证
流程：
1)填写手机号
2)获取手机号码，调用sendSms.html接口向手机发送短信验证码
3)用户手机接收到验证码后，将其填写到"验证码"文本框中
后端代码
发送短信验证码
/*** 发送短信验证码* @param number接收手机号码*/@RequestMapping("/sendSms")@ResponseBodypublic Object sendSms(HttpServletRequest request, String number) {try {JSONObject json = null;//生成6位验证码String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);//发送短信ZhenziSmsClient client = new ZhenziSmsClient("你的appId", "你的appSecret");String result = client.send(number, "您的验证码为:" + 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;}
提交注册
/*** 注册*/@RequestMapping("/register")@ResponseBodypublic Object register(HttpServletRequest request, String userId, String password, String number,String verifyCode) {JSONObject json = (JSONObject)request.getSession().getAttribute("verifyCode");if(!json.getString("verifyCode").equals(verifyCode)){return "验证码错误";}if((System.currentTimeMillis() - json.getLong("createTime")) > 1000 * 60 * 5){return "验证码过期";}//将用户信息存入数据库//这里省略return "success";}
