前言

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

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

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

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

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

其实这些都挺常见的，但是如果自己写，还是很费时间的，一般可以去网上找插件，这里推荐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合成九宫格图片这三点咱们有空分析分析
原因很简单，俺师父没告诉我。

前端做登录验证码功能的理解相关推荐

Django前后端分离实现登录验证码功能
Django前后端分离实现登录验证码功能当下最流行最热门的开发方式当属前后端分离开发,分工也更加明确与专注,前端也是越来越难,几天不学习就跟不上节奏,一个月不学习可以好不夸张的说,你已经不适合这个行 ...
php登录调用验证码,PHP编写登录验证码功能附调用方法
本文实例为大家分享了一个PHP写的登录验证码功能,供大家参考,具体内容如下 ShowKey.php<?php session_start(); //设置COOKIE或Session functi ...
html页面实现登录验证码功能（纯前端）
html+css+javascript简易实现注册或登录时实现验证码功能: 原文链接:https://blog.csdn.net/weixin_41472431/article/details/907 ...
php实现登录验证码_PHP实现登录验证码功能
本篇文章主要介绍PHP如何编写登录验证码的功能,感兴趣的朋友参考下,希望对大家有所帮助. 在最顶端声明函数 session_start(); 告诉服务器我们要用这个函数的功能.session_star ...
vue+elementui 实现登录验证码功能
最终实现效果(点击图片进行切换及验证登录) html // getCode() 点击调切换图片 // @keyup.enter.native="handleLogin" 回车登 ...
Web网页实现登录验证码功能
三部分内容 1.在登录页面生成验证码图片 2.点击图片更换新的验证码图片 3.点击登录,判定输入验证码与实际验证码是否一致 1.如何生成一个验证码图片,放置在登录页面? servlet: packag ...
JavaWeb实现登录验证码功能
先在Web目录下的lib目录中导入jar包:ValidateCode.jar 然后创建一个Servlet类来创建验证码:ValidateCodeServlet.java 创建验证码将验证码存储到se ...
网页实现登录验证码功能
步骤1:在登录页面生成验证码图片 src/main/java/top/qiudb/controller/util/UtilController.java 步骤2:点击图片更换新的验证码图片步骤3:点 ...
纯前端实现传统验证码功能
效果图:(如图所示) 项目背景: 之前就没有规划说有验证码的需求,产品又要硬加后端也没得时间写接口,就叫我自己搞,不要烦他,他算数据心情不好
vue 通过接口实现前端登录页验证码功能
记录个人学习使用页面样式: 接口返回数据: 此处的base64不需要转,可直接赋值使用,详情如methods内的方法显示 html部分: <el-form-item label="& ...

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

前言

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

总结：

前端做登录验证码功能的理解相关推荐

最新文章

热门文章

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

前言

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

总结：

前端做登录验证码功能的理解相关推荐

最新文章

热门文章

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