您好,登錄后才能下訂單哦!
本篇文章為大家展示了短信驗(yàn)證碼校驗(yàn)功能如何利用SpringBoot實(shí)現(xiàn),內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
思路
用戶輸入手機(jī)號后,點(diǎn)擊按鈕獲取驗(yàn)證碼。并設(shè)置冷卻時間,防止用戶頻繁點(diǎn)擊。
后臺生成驗(yàn)證碼并發(fā)送到用戶手機(jī)上,根據(jù)驗(yàn)證碼、時間及一串自定義秘鑰生成MD5值,并將時間也傳回到前端。
用戶輸入驗(yàn)證碼后,將驗(yàn)證碼和時間傳到后臺。后臺先用當(dāng)前時間減去前臺傳過來的時間驗(yàn)證是否超時。如果沒有超時,就用用戶輸入的驗(yàn)證碼 + 時間 + 自定義秘鑰生成MD5值與之前的MD5值比較,如果相等則驗(yàn)證碼校驗(yàn)通過,如果不等則說明驗(yàn)證碼輸入錯誤校驗(yàn)失敗。
原理有點(diǎn)像解方程:
xyz經(jīng)過一種不可逆運(yùn)算得到A,將y和A傳給用戶,z后臺保留,用戶填寫x1后,將x1 y A傳回后臺,后臺再用x1 y z經(jīng)過不可逆運(yùn)算得到A1,如果A1和A相等,則驗(yàn)證碼校驗(yàn)通過。
前端的實(shí)現(xiàn)
本例基于BootStrap,html代碼中有BootStrap樣式。如果你不想用BootStrap,可以將class樣式去掉。效果如圖所示。
html代碼如下:
<div class="form-group has-feedback"> <input type="tel" class="form-control" id="phone" placeholder="請輸入手機(jī)號" maxlength=11> <span class="glyphicon glyphicon-earphone form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-6 pull_left"> <div class="form-group"> <input class="form-control" id="msg_num" placeholder="請輸入驗(yàn)證碼"> </div> </div> <div class="col-xs-6 pull_center"> <div class="form-group"> <input type="button" class="btn btn-block btn-flat" id="verify_refresh" onclick="getMsgNum(this)" value="免費(fèi)獲取驗(yàn)證碼"> </div> </div> </div> <div class="col-xs-12 pull_center"> <button type="button" class="btn btn-block btn-flat" onclick="validateNum()">驗(yàn)證</button> </div>
js代碼(基于jQuery)
var messageData; var wait = 120; // 短信驗(yàn)證碼120秒后才可獲取下一個 /** * 獲取驗(yàn)證碼 * @param that */ function getMsgNum(that) { var phoneNumber = $('#phone').val(); setButtonStatus(that); // 設(shè)置按鈕倒計(jì)時 var obj = { phoneNumber: phoneNumber }; $.ajax({ url: httpurl + '/sendMsg', // 后臺短信發(fā)送接口 type: 'POST', dataType: 'json', contentType: "application/json", async: false, //false 同步 data: JSON.stringify(obj), xhrFields: { withCredentials: true }, success: function (result) { if(result.code == '200') { messageData = result.data; }else { alert("錯誤碼:" + data.code + " 錯誤信息:" + data.message); } }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }); } /** * 設(shè)置按鈕狀態(tài) */ function setButtonStatus(that) { if (wait == 0) { that.removeAttribute("disabled"); that.value="免費(fèi)獲取驗(yàn)證碼"; wait = 60; } else { that.setAttribute("disabled", true); that.value=wait+"秒后可以重新發(fā)送"; wait--; setTimeout(function() { setButtonStatus(that) }, 1000) } } /** * 注冊按鈕 */ function validateNum() { var data = { msgNum: inputMsgNum, tamp: messageData.tamp, hash: messageData.hash }; $.ajax({ url: httpurl + '/validateNum', // 驗(yàn)證接口 type: 'POST', dataType: 'json', contentType: "application/json", data: JSON.stringify(data), async: false, //false 同步 success: function (data) { //業(yè)務(wù)處理 }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); } }); }
其中setButtonStatus()方法用于設(shè)置按鈕冷卻狀態(tài)。效果如下圖
后臺的實(shí)現(xiàn)
private static final String KEY = "abc123"; // KEY為自定義秘鑰 @RequestMapping(value = "/sendMsg", method = RequestMethod.POST, headers = "Accept=application/json") public Map<String, Object> sendMsg(@RequestBody Map<String,Object> requestMap) { String phoneNumber = requestMap.get("phoneNumber").toString(); String randomNum = CommonUtils.createRandomNum(6);// 生成隨機(jī)數(shù) SimpleDateFormat sf = new SimpleDateFormat("yyyyMMddHHmmss"); Calendar c = Calendar.getInstance(); c.add(Calendar.MINUTE, 5); String currentTime = sf.format(c.getTime());// 生成5分鐘后時間,用戶校驗(yàn)是否過期 sengMsg(); //此處執(zhí)行發(fā)送短信驗(yàn)證碼方法 String hash = MD5Utils.getMD5Code(KEY + "@" + currentTime + "@" + randomNum);//生成MD5值 Map<String, Object> resultMap = new HashMap<>(); resultMap.put("hash", hash); resultMap.put("tamp", currentTime); return resultMap; //將hash值和tamp時間返回給前端 } @RequestMapping(value = "/validateNum", method = RequestMethod.POST, headers = "Accept=application/json") public Map<String, Object> validateNum(@RequestBody Map<String,Object> requestMap) { String requestHash = requestMap.get("hash").toString(); String tamp = requestMap.get("tamp").toString(); String msgNum = requestMap.get("msgNum").toString(); String hash = MD5Utils.getMD5Code(KEY + "@" + tamp + "@" + msgNum); if (tamp.compareTo(currentTime) > 0) { if (hash.equalsIgnoreCase(requestHash)){ //校驗(yàn)成功 }else { //驗(yàn)證碼不正確,校驗(yàn)失敗 } } else { // 超時 } }
上述內(nèi)容就是短信驗(yàn)證碼校驗(yàn)功能如何利用SpringBoot實(shí)現(xiàn),你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。