前端做登录验证码功能的理解

前言

前端小白一名，记录日常学习生活点滴【第二周】

一、关于 前端做登录验证码功能的个人理解

做这个功能之前一定要搞清楚它的作用是什么：
【用它来确定正在访问网站的用户是人而不是一个程序】
原因：不管是何种验证码方式，都是要让程序难以判断，而让人好判断的原则设计的。

【防止用户利用机器人自动注册、登录、灌水】
原因：安全角度出发，随着网络速度的提高，如果没有一种防御机制的话，那么攻击者完全可以通过疯狂猜测尝试来获得用户的密码，还可以利用机器人自动注册、登录、灌水。想想多可怕。

一般来说，前端做登录验证就大概有几种类型吧【发验证码】【拖拽完成拼图】【随机生成字符】【输入计算结果】等等
个人的理解，纯前端的验证，没多大意思，有点自欺欺人，所以要配合后端一起验证才是最保险的。

其实这些都挺常见的，但是如果自己写，还是很费时间的，一般可以去网上找插件，这里推荐JQuery之家，很好用。

说说这次的具体需求吧： 用户觉得随机生成字符太low了，想玩个高大上的验证方式，所以我们初步定的就是【拖拽完成拼图】，这个功能对我这个菜鸡来说还是有点难度的，看了看插件的源码，相对有点复杂，前后端处理起来都不是那么友好，更要命的是，拖拽的对象和它的目标空缺都是不规则的图形，这就必须用到canvas画布来处理，果断放弃！哈哈。

然后和我的好师父商量了一下，果然有经验的程序大佬就是不一样，俺师父想了一个最简单，而且最适合前后端控制，最高大上的方法来实现验证：【九宫格验证】
即：一张大背景图，分别由9张小图拼接而成，随机生成一张倒放的图片，其余八张正常，用户只需要点击倒放的那张图片即可。
优点是：前后端都好控制，前端这边只需要实现一点交互功能比如用户选中的图片打个勾、而且点击确定按钮只需要传一个长度为9的字符串就可以了，比如倒放的是第二张图片，那么我只需要传010000000给后端就OK了，是不是很简单啊。

简单讲一下我的布局和JS的实现吧：

用的最简单的table来布局，CSS样式就不说了，反正慢慢调的问题，

<div class="box">
        <div class="lottery">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td>td>
                    <td>td>
                    <td>td>
                tr>
                <tr>
                    <td>td>
                    <td>td>
                    <td>td>
                tr>
                <tr>
                    <td>td>
                    <td>td>
                    <td>td>
                tr>
            table>
        div>

        <div class="choose">
            <div class="sure">确定div>
            <div class="refresh">刷新div>
        div>
    div>

JS部分我直接用的JQuery：
//遍历每个td 判断用户是否点击，点击了存1，加CSS样式，反之存0，不加样式。

$('.lottery table td').each(function (i, e) {
     
                $(this).on('click', function () {
     
                    if ($(this).data('check')) {
     
                        $(this).data('check', 0);
                        $(this).removeClass('active');
                    } else {
     
                        $(this).data('check', 1);
                        $(this).addClass('active');
                    }
                    // console.log(i);
                });
            });

//点击确定按钮后，先定义一个空串code ，用来装生成的9个数字，最后打印出来看看是不是

 $('.sure').on('click', function () {
     
                var code = '';
                $('.lottery table td').each(function (i, e) {
     
                    if ($(this).data('check') == 1) {
     
                        code += '1';
                    } else {
     
                        code += '0';
                    }
                })
	console.log(code);

//还可以实现刷新功能，无非就是清空数据，背景图通过采用字符串拼接随机数的方式达到更改URL的目的

$('.refresh').on('click', function () {
     
                $(".lottery table").css({
      "background-image": "url('./img/bg2.jpg?rnd=" + Math.random() + "')" })
                $('.lottery table td').each(function (i, e) {
     
                    $(this).data('check', 0);
                    $(this).removeClass('active');
                })
            })

总结：

好了，前端交互大概就是这些了，关于后端的验证我大概偷听了一下俺师父和后端大哥的秘密交流，嘿嘿。
大概就是点击登录那一刻，我前端生成的9位数就已经通过绑定value的形式传到后台去了，后台的判断也是基于这一点，至于是怎么生成倒放图片的，每次生成倒放图片位置不同，和PS合成九宫格图片这三点 咱们有空分析分析
原因很简单，俺师父没告诉我。