Web项目中手机注册短信验证码实现的全流程及代码- 校招VIP

转载声明：文章来源https://blog.csdn.net/zuoliangzhu/article/details/81193269

最近在做只能净化器的后台用户管理系统，需要使用手机号进行注册，找了许久才大致了解了手机验证码实现流程，今天在此和大家分享一下。

我们使用的是榛子云短信平台, 官网地址:http://smsow.zhenzikj.com

我是java开发者，后端使用了springMvc，前端用的是jsp + jquery

下载demo: https://download.csdn.net/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>

$(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")
	@ResponseBody
	public 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存放，这里使用的是阿里的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;
	}

提交注册

/**
	 * 注册
	 */
	@RequestMapping("/register")
	@ResponseBody
	public 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";
	}