客戶咨詢熱線 15081754822 15102693855
首頁     關于我們     網站建設     系統開發     手機網站     模板網站     網站改版     網站維護     域名注冊     短信群發     企業郵箱     網站案例     微信開發     建站知識     解決方案     聯系我們
 您現在的位置:首頁 > Web項目中手機注冊短信驗證碼實現的全流程及代碼  
業務范圍
  系統開發
  網站建設
  手機網站
  網站案例
  域名注冊
  企業郵箱
關于我們
  關于我們
  公司視頻
  聯系方式
  邯鄲縣區建站
 
 
 
 
 
 
  Web項目中手機注冊短信驗證碼實現的全流程及代碼


Web項目中手機注冊短信驗證碼實現的全流程及代碼
發布日期:2019-9-9 15:50:41 :  二維碼分享
做后臺用戶管理系統,需要使用手機號進行注冊,需要手機驗證碼實現流程,今天在此和大家分享一下。

后端使用了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;


--------------------- 


作者:未知 上一條: 俱樂部/會所/協會在短信平臺應用指南
來源:互聯網 下一條: 注冊用戶短信驗證碼短信平臺
關于我們 | 最新動態 | 網站案例 | 聯系方式
網站關鍵詞:邯鄲網站建設 | 邯鄲做網站 | 邯鄲網站設計 | 邯鄲網頁設計 | 邯鄲網站制作 | 邯鄲網絡公司| 邯鄲網站推廣
客服電話:15102693855 QQ:125856421 電子信箱:[email protected]
邯鄲奧科網絡 版權所有
客戶服務
15102693855
6合生肖网一肖中特免费公开选料