最近在作只能淨化器的後臺用戶管理系統,須要使用手機號進行註冊,找了許久才大體瞭解了手機驗證碼實現流程,今天在此和你們分享一下。html
咱們使用的是榛子云短信平臺, 官網地址:http://smsow.zhenzikj.com前端
我是java開發者,後端使用了springMvc,前端用的是jsp + jqueryjava
一、構造手機驗證碼,生成一個6位的隨機數字串;
二、使用接口向短信平臺發送手機號和驗證碼,而後短信平臺再把驗證碼發送到制定手機號上
三、將手機號驗證碼、操做時間存入Session中,做爲後面驗證使用;
四、接收用戶填寫的驗證碼、手機號及其餘註冊數據;
五、對比提交的驗證碼與Session中的驗證碼是否一致,同時判斷提交動做是否在有效期內;
六、驗證碼正確且在有效期內,請求經過,處理相應的業務。jquery
下載地址: http://smsow.zhenzikj.com/doc/sdk.htmlajax
下載下來是jar文件,須要將jar發佈到本地的maven倉庫中, 在cmd環境下輸入:spring
mvn install:install-file -DgroupId=com.zhenzi -DartifactId=sms -Dversion=1.0.0 -Dpackaging=jar -Dfile=/Users/Downloads/ZhenziSmsSDK.jar
注意:-Dfile是你本地下載的jar文件的路徑,本例中使用的mac系統數據庫
接下來在pom.xml中引入項目:json
<dependency> <groupId>com.zhenzi</groupId> <artifactId>sms</artifactId> <version>1.0.0</version> </dependency>
ok, sdk安裝完畢,其實也挺簡單的後端
測試帳號須要人工申請,通常幾分鐘就能夠申請下來。session
使用測試帳號登陸管理後臺獲取appId、appSecret, 地址: http://sms.zhenzikj.com/zhenzisms_user
在"個人應用"->"詳情"中打開:
使用事先申請的AppId、AppSecret初始化ZhenziSmsClient:
ZhenziSmsClient client = new ZhenziSmsClient(appId, appSecret);
String result = client.send("15811111111", "您的驗證碼爲4534,有效時間爲5分鐘");
send方法用於單條發送短信
參數1:接收者手機號碼,參數2:短信內容
返回結果是json格式的字符串, code: 發送狀態,0爲成功。非0爲發送失敗,可從data中查看錯誤信息
4.完整應用實例
前端的頁面
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") @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"; }
ok,大功告成