When logging in, you need to send SMS verification code or other verification methods to verify whether it is your own operation, so as to achieve the purpose of security. This article mainly explains the implementation of personal thinking to see the implementation of the foreground interface of the commonly used SMS verification code. The effect is shown in the figure:

When you click to obtain the verification code, the countdown is counted down, and the countdown time is temporarily set to 180 seconds

Idea:

1. When you click the [get verification code] button, send a request to the background, generate 4, 6 or 8 digits according to your own rules, and use an ID as the key to save the random number in the session. Here, I use the user name as the key.
2. After sending the verification code successfully, the front end starts to count down. When the countdown time is 0, the request is sent to the back end, the user name is passed on as a parameter, the user name is searched in the session, the random number saved in the session when sending the verification code is obtained, and then cleared from the session.
3. If the user has entered the verification code during the countdown, the countdown will be stopped at this time. The entered verification code and the user name will be used as input parameters and transmitted to the background. The verification code saved in the session will be compared to verify whether it is correct,
4. If the verification code is correct, set the countdown box to unavailable. If it is wrong, stop the countdown and prompt [verification code is incorrect, please re-enter].

5. The verification code is correct. To submit a form, you need to define an ID to submit the form

Resource website Encyclopedia https://55wd.com My 007 office resources website https://www.wode007.com

The code implementation is as follows:

Front end code

Send verification code:

function getVlidCode(){
    var username = $("#username").val(); / / use the username as the key stored in the session
    if (flagT){
        $.ajax({
            type:"GET",
            async: false,
            data:"username="+username,
            url:projectName+"/userAction/getVerifYCode.do",
            success:function(date){
                if (date == 1) {
                    chengeviyfValue();
                }
            }
        });
    }
}

Timer, executed every 1000 milliseconds:

function chengeviyfValue(){
    if ( flag ){
        $("#getVerifYCodeNum").text(" seconds remaining ("+totalNum+"));
        var username = $("input[name='username']").val();
        if (totalNum == 0) {//When the time is up and there is no value, clear the verification code saved in the session
            document.getElementById('getVerifYCodeNum').innerhtml = "Resend";
            $.ajax({
                type:"GET",
                async: false,
                data:"username="+username,
                url:projectName+"/userAction/removeVerifYCode.do",
                success:function(date){
                    Ext.Msg.alert('Prompt!', 'Verification code has expired, please resend!');
                }
            });
            totalNum = 180;
            flagT = true;
            return;
        }else {
            flagT = false;//When the value of totalNum is not equal to 0, do not click the send button
        }
        totalNum--;
        setTimeout('chengeviyfValue()',1000);
    }
}

Verify whether the input verification code is correct:

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('Prompt!', 'Verification code error, please resend!');
                    document.getElementById('getVerifYCodeNum').innerhtml = "Reacquire";
                    document.getElementById('getVerifYCodeNum').style.color = "#1497DA"
                    flagT = true;
                    flag = false;//When totalNum = 0, the judgment of totalNum = 0 in chengeviyfValue() is not allowed
                    totalNum = 0;
                }else {
                    totalNum = 0;
                    document.getElementById('getVerifYCodeNum').innerhtml = "Get verification code";
                    flagT = false;
                    flag = false;//
                    document.getElementById('getVerifYCodeNum').style.color = "#D0D0D0"
                }

            }
        });
    }
}

Backend code:
It is impossible to call the SMS sending function, but it is temporarily replaced by the email sending function:

    @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";//Write dead first
        session.setAttribute(username, bit4Rand);
        logger.error("[Stored verification code and key] key: "+username+" bit4Rand:"+bit4Rand);
        // TODO: call the email sending verification code 
        UserModel um = userService.findUserInfoByUsername(username);
        String email = um.getEmail();
        String host = "smtp.qq.com";//server
        String subject = "Verification code for personal project login";
        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);
    }

Check whether the verification code is correct:

@RequestMapping("userAction/vlidCodeNum")
    public void vlidCodeNum(HttpServletRequest request,HttpServletResponse response) throws IOException{
        String vildCode = request.getParameter("vildCode");
        String username = request.getParameter("username");
        logger.error("[Value in and out when verifying verification code]: vildCode:"+vildCode+" username:"+username);
        HttpSession session = request.getSession();
        String vildCodeTwo = (String)session.getAttribute(username);
        logger.error("[Clear verification code from session in]"+vildCodeTwo);
        if (CommonUtils.isNotEmpty(vildCodeTwo) && vildCode.equals(vildCodeTwo)) {
            response.getWriter().print("1");
        }else {
            response.getWriter().print("0");
        }
    }

The implementation of this verification code has been fully implemented.