验证码：五福临门
发表于 | 分类于 验证码 | |
一看
验证码这个既熟悉又常用的功能，一提起来你就会想起各种各样的验证码，一个偶然的机会，就冒出来做个验证码，慢慢的就演变成现在的五福临门验证码。先看一下效果图：
由来
- 春节前看到一篇关于验证码的文章，动态刷新、滑动验证，这里的动，总感觉没有“动”
- 加上之前做的游鱼，就想让它动起来，所以最初就是在滑块验证码的基础上，让滑块在外面游动起来
- 后来支付宝集五福，让我突然感觉可以考虑，五个福字随机掉下来一个在外面游动，然后滑动原位置，正好符合春节的气息
- 再后来参与了支付宝打印福字的活动，然后就手写了五福，这样不仅是随机五福，还可以随机不同主题的五福了
- 春节前开始的，前期做了技术验证，春节陆陆续续进行了实现
- 后来找资料做轨迹校验，断断续续，今天暂时把前端部分发出来，后端验证决定后续再补一篇
下面是个设计效果图：
认知
验证码虽然已经司空见惯了，但是还是想讲一下验证的一些接触，从中也能体会乐趣。
起初进入技术行业，还是一个验证码不流行的阶段，计算机识别技术更是起步，所以扭曲、污染的文字无法辨识，所以最初见到的就是4个字母数字，一条飞线。
慢慢的越来越流行，越来越多样，越来越看不懂
越来越烧脑，亦或是恶搞
新时代的验证码越来越多样，出现了两极分化，一种让你赏心悦目，一种让你抢不到票
验证码在技术里面或许是小场面，但却蕴藏着大智慧，而且是紧跟时代的产物，根据人们需求的变化而变化，当然破解和识别技术的提升也在嘶声呐喊和“催更”
技术
验证码可以防止：恶意破解密码、刷票、论坛灌水等
软件包：成熟的插件和软件包，直接引入使用就可以了
第三方：网易易盾等，购买按官方文档使用
网易易盾：https://dun.163.com/
无痕验证：阿里云-人机验证
https://help.aliyun.com/product/28308.html
用过阿里云的都知道，阿里云登录输入账号密码就可以了，点击登录也没有多余的操作，以为就没有验证，其实阿里做的是无痕验证，即使没有可视化的验证码出现，其实已经对你登录做了人机的校验了，所以不要以为没有可见的验证码就误以为没有验证。
实现
技术栈：前端nodejs+vue，后端java+redis
滑块验证：vue-drag-drop
游动：animateplus
目前的前端部分演示demo（目前只支持pc端）：http://bless.disscode.cn/#/loginSlider
五福临门
一曰寿，二曰富，三曰康宁，四曰攸好德，五曰考终命
五福含意：第一福是“长寿”、第二福是“富贵”、第三福是“康宁”、第四福是“好德”、第五福是“善终”。有人简称为寿富康德善。