Web項目中手機註冊短信驗證碼實現的全流程及代碼

時間 2019-12-19

標籤 web 項目手機註冊短信驗證碼實現流程代碼欄目 HTML 简体版

原文原文鏈接

最近在作只能淨化器的後臺用戶管理系統，須要使用手機號進行註冊，找了許久才大體瞭解了手機驗證碼實現流程，今天在此和你們分享一下。html

咱們使用的是榛子云短信平臺, 官網地址:smsow.zhenzikj.com前端

我是java開發者，後端使用了springMvc，前端用的是jsp + jqueryjava

短信驗證碼實現流程

一、構造手機驗證碼，生成一個6位的隨機數字串；
二、使用接口向短信平臺發送手機號和驗證碼，而後短信平臺再把驗證碼發送到制定手機號上
三、將手機號驗證碼、操做時間存入Session中，做爲後面驗證使用；
四、接收用戶填寫的驗證碼、手機號及其餘註冊數據；
五、對比提交的驗證碼與Session中的驗證碼是否一致，同時判斷提交動做是否在有效期內；
六、驗證碼正確且在有效期內，請求經過，處理相應的業務。jquery

前端的頁面ajax

jspspring

<%@ 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("註冊成功");
	        }
    	});
	})
});複製代碼

這裏省略了全部非空、手機號格式驗證json

流程：後端

1)填寫手機號bash

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";
	}複製代碼