关闭

登陆时短信验证码的原理,实现

时间: 2018-07-16阅读: 2593标签: 验证

登陆时需要发送短信验证码或者其他的验证方式来校验是否是本人操作,达到安全性的目的。本文主要以个人思考的实现方式做讲解,来看看常用的短信验证码的前台界面的实现。效果如图: 


点击获取验证码时,倒计时,暂时设定倒计时的时间为180秒, 


思路:

  1. 当点击【获取验证码】按钮时,发送请求到后台,根据自己的规则生成4位,6位或者8位数字,在用一个标识作为key,将随机数存到session中,我这里是用用户名作为key。
  2. 发送验证码成功之后,前端开始倒计时,当倒计时的时间 = 0时,发送请求到后端,将用户名作为参数传人,从用户名在session查找,得到发送验证码时保存到session中的随机数,然后从session中清除。
  3. 假如在倒计时中,用户已经输入了验证码,此时停止倒计时,将输入的验证码和用户名作为入参,传人后台,从session保存的验证码做比对,校验是否正确,
  4. 假如验证码正确,将倒计时框置为不可用,假如错误,停止倒计时,提示【验证码有误,请重新输入】。
  5. 验证码正确,提交表单是定义一个标识,可以提交表单


代码实现如下:   

前端代码

发送验证码:

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");
        }
    }

到此验证码的实现都已全部实现。

原文来源:https://blog.csdn.net/gbp_Anl/article/details/81051772


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/928

关闭

javascript如何判断数字是否为浮点数?

JavaScript中可以使用正则表达式来判断是否是浮点数,判断前我们可以使用正则表达式来判断是否是数字。

Js如何判断是否有小数点?

javascript判断是否有小数点的方法:1、可以使用正则表达式(/[\\\\.]/)判断是否有小数点。2、先将数字转换为数组,然后使用indexOf()方法判断数组中是否有小数点。

你知道如何使用Node.js做邮箱验证吗?

相信大家都知道登录操作都会有一个接收验证码的过程,我之前一直对这个非常感兴趣,经常问同学手机验证码是怎么搞的,但是现在我们不用手机也照样可以实现这个功能。

javascript如何判断字符串是否全为字母?

正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

验证码的分类_ 网页验证码有哪些方式?

早期的互联网是没有验证码的,随着后来计算机程序的发展,黑客编写了模仿登录、恶意破解密码、刷票、论坛灌水等恶意程序,破坏了整个网络的平衡性。介绍目前常用验证码的分类有哪些:Gif动画验证码、手机短信验证码、手机语音验证码、视频验证码、滑动验证码

javascript如何判断对象是不是为空?

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数等。JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

滑动验证码原理实现

滑动验证码在很多网站逐步流行起来,一方面对用户体验来说,比较新颖,操作简单,另一方面相对图形验证码来说,安全性并没有很大的降低。常见验证码是需要输入图中字符的,是因为机器识别字符比较困难,以此来防止机器自动的行为。

javascript如何检查是否是浮点数?

JavaScript中可以使用正则表达式来判断是否浮点数。首先是判断是不是数字isNaN(),JavaScript中判断浮点数的正则表达式:在程序中的使用方法

jQuery.validator插件:密码正则验证的使用方法

jQuery.validator 是比较常用的一个表单验证插件,有20多种验证方式,下面介绍一下 jQuery.validator 正则验证的使用方法。jQuery.validator 提供了一个添加自定义验证方法

javascript如何验证是否是图片?

在支持FileReader的浏览器中,可以使用indexOf方法检索文件类型是否为image/开头验证是否是图片。在不支持FileReader的浏览器中使用lastIndexOf与substring方法获取文件后缀判断是否图片

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!