簡訊驗證實現方式

ChenPeng ✓發表於2020-12-15

簡訊驗證實現流程：

 1、構造手機驗證碼：使用random物件生成要求的隨機數作為驗證碼，例如4位驗證碼:1000~9999之間隨機數；
 2、使用介面向簡訊平臺傳送手機號和驗證碼資料，然後簡訊平臺再把驗證碼傳送到制定手機號上，介面引數一般包括：目標手機號，隨機驗證碼(或包含失效時間)，平臺介面地址，平臺口令；
 3、儲存介面返回的資訊（一般為json文字資料，然後需轉換為json物件格式）；
 4、將手機號--驗證碼、操作時間存入Session中，作為後面驗證使用；
 5、接收使用者填寫的驗證碼及其他資料；
 6、對比提交的驗證碼與Session中的驗證碼是否一致，同時判斷提交動作是否在有效期內；
 7、驗證碼正確且在有效期內，請求通過，處理相應的業務。

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("註冊成功");
    	        }
        	});
    	})
    });

這裡省略了所有非空、手機號格式驗證

傳送簡訊驗證碼

/**
	 * 傳送簡訊驗證碼
	 * @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";
    	}

相關文章