登陸時短信驗證碼的原理和實現邏輯

登陸時需要發送短信驗證碼或者其他的驗證方式來校驗是否是本人操作，達到安全性的目的。本文主要以個人思考的實現方式做講解，來看看常用的短信驗證碼的前台界面的實現。效果如圖： 

點擊獲取驗證碼時，倒計時，暫時設定倒計時的時間為180秒， 

 

思路：

1. 當點擊【獲取驗證碼】按鈕時，發送請求到后台，根據自己的規則生成4位，6位或者8位數字，在用一個標識作為key，將隨機數存到session中，我這里是用用戶名作為key。
2. 發送驗證碼成功之后，前端開始倒計時，當倒計時的時間 = 0時，發送請求到后端，將用戶名作為參數傳人，從用戶名在session查找，得到發送驗證碼時保存到session中的隨機數，然后從session中清除。
3. 假如在倒計時中，用戶已經輸入了驗證碼，此時停止倒計時，將輸入的驗證碼和用戶名作為入參，傳人后台，從session保存的驗證碼做比對，校驗是否正確，
4. 假如驗證碼正確，將倒計時框置為不可用，假如錯誤，停止倒計時，提示【驗證碼有誤，請重新輸入】。

5. 驗證碼正確，提交表單是定義一個標識，可以提交表單

資源網站大全 https://55wd.com 我的007辦公資源網站 https://www.wode007.com

代碼實現如下：   

前端代碼

發送驗證碼：

function getVlidCode(){
    var username = $("#username").val();//將用戶名作為session存儲的key
    if (flagT){
        $.ajax({
            type:"GET",
            async: false,
            data:"username="+username,
            url:projectName+"/userAction/getVerifYCode.do",
            success:function(date){
                if (date == 1) {
                    chengeviyfValue();
                }
            }
        });
    }
}

　　

定時器，每1000毫秒執行一次:

function chengeviyfValue(){
    if ( flag ){
        $("#getVerifYCodeNum").text("剩余("+totalNum+")秒");
        var username = $("input[name='username']").val();
        if (totalNum == 0) {//時間到了 沒有值，清空session中保存的驗證碼
            document.getElementById('getVerifYCodeNum').innerhtml = "重新發送";
            $.ajax({
                type:"GET",
                async: false,
                data:"username="+username,
                url:projectName+"/userAction/removeVerifYCode.do",
                success:function(date){
                    Ext.Msg.alert('提示！', '驗證碼已失效，請重新發送！');
                }
            });
            totalNum = 180;
            flagT = true;
            return;
        }else {
            flagT = false;//當totalNum的值不等於0時，不讓在點擊發送按鈕
        }
        totalNum--;
        setTimeout('chengeviyfValue()',1000);
    }
}

　　

校驗輸入驗證碼是否正確：

function removeVlidCode(){
    var vildCode = $(" input[ name='vildCode'] ").val();
    var username = $("input[name='username']").val();
    if ("" != vildCode && null != vildCode) {
        $.ajax({
            type:"GET",
            async: false,
            data:"vildCode="+vildCode+"&username="+username,
            url:projectName+"/userAction/vlidCodeNum.do",
            success:function(date){
                if (date == "0") {
                    Ext.Msg.alert('提示！', '驗證碼錯誤，請重新發送！');
                    document.getElementById('getVerifYCodeNum').innerhtml = "重新獲取";
                    document.getElementById('getVerifYCodeNum').style.color = "#1497DA"
                    flagT = true;
                    flag = false;//當totalNum = 0時，不讓進chengeviyfValue()中totalNum = 0 的判斷
                    totalNum = 0;
                }else {
                    totalNum = 0;
                    document.getElementById('getVerifYCodeNum').innerhtml = "獲取驗證碼";
                    flagT = false;
                    flag = false;//
                    document.getElementById('getVerifYCodeNum').style.color = "#D0D0D0"
                }

            }
        });
    }
}

　　

 

后端代碼： 
調用短信發送的功能，沒法實現，暫時使用發送郵件的功能代替:

    @RequestMapping("userAction/getVerifYCode")
    public void getVerifYCode(HttpServletRequest request,HttpServletResponse response) throws IOException{
        String username = request.getParameter("username");
        HttpSession session = request.getSession();
        //String bit4Rand = CommonUtils.get4HibitRandom();
        String bit4Rand = "12345678";//先寫死
        session.setAttribute(username, bit4Rand);
        logger.error("[存入的驗證碼和key] key："+username+" bit4Rand:"+bit4Rand);
        // TODO:調用下發驗證碼的郵件 
        UserModel um = userService.findUserInfoByUsername(username);
        String email = um.getEmail();
        String host = "smtp.qq.com";//服務器
        String subject = "個人項目登陸時驗證碼";
        String content = "<\n>"+bit4Rand+"<\n>";
        String from = "@qq.com";
        String pwd = "";
        int result = SendEmailUtil.sendEmail(host, from, from, pwd, email, subject, content);
//      int result = 1;
        response.getWriter().print(result);
    }

　　

校驗驗證碼是否正確：

@RequestMapping("userAction/vlidCodeNum")
    public void vlidCodeNum(HttpServletRequest request,HttpServletResponse response) throws IOException{
        String vildCode = request.getParameter("vildCode");
        String username = request.getParameter("username");
        logger.error("[校驗驗證碼時出入的值]：vildCode:"+vildCode+" username:"+username);
        HttpSession session = request.getSession();
        String vildCodeTwo = (String)session.getAttribute(username);
        logger.error("[清除驗證碼從session中]"+vildCodeTwo);
        if (CommonUtils.isNotEmpty(vildCodeTwo) && vildCode.equals(vildCodeTwo)) {
            response.getWriter().print("1");
        }else {
            response.getWriter().print("0");
        }
    }

　　

到此驗證碼的實現都已全部實現。