最近在做只能凈化器的后台用戶管理系統，需要使用手機號進行注冊，找了許久才大致了解了手機驗證碼實現流程，今天在此和大家分享一下。
我們使用的是榛子雲短信平台, 官網地址: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")
@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";
}