標籤：bsp post exce $.ajax fast 處理 jsp doctype btn
最近在做只能淨化器的後台使用者管理系統，需要使用手機號進行註冊，找了許久才大致瞭解了手機驗證碼實現流程，今天在此和大家分享一下。
我們使用的是榛子云簡訊平台, 官網地址:http://smsow.zhenzikj.com
我是java開發人員，後端使用了springMvc，前端用的是jsp + jquery
簡訊驗證碼實現流程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";}
Web項目中手機註冊簡訊驗證碼實現的全流程及代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
