使用Vue实现滑动验证码功能_vue验证码组件 - CSDN文库

滑动验证码

2.5k 浏览量更新于2023-05-27 评论收藏 95KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

使用使用Vue 实现滑动验证码功能实现滑动验证码功能

本文章主要来介绍一下第一个阶段，也就是前端校验的验证码的实现，下面来介绍一下拖动验证码的具体实

现。这篇文章主要介绍了利用 Vue 实现滑动验证码,需要的朋友可以参考下

做网络爬虫的同学肯定见过各种各样的验证码，比较高级的有滑动、点选等样式，看起来好像挺复杂的，但实际上它们的核心

原理还是还是很清晰的，本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码。

我之前做过 Web 相关开发，尝试对接过 Lavavel 的极验验证，当时还开发了一个 Lavavel 包：

https://github.com/Germey/LaravelGeetest ，在开发包的过程中了解到了验证码的两步校验规则。

实际上这类验证码的校验是分为两个步骤的：

1.第一步就是前端的校验。一般来说，登录注册页面在点击提交的时候都会伴随着一个表单提交，在表单提交的时候会有

JavaScript 事件的触发。如果加入了验证码，那么在表单提交的时候会多加一个额外的验证，判断这个验证码是否已经成功完

成了操作。如果没有的话，那就直接取消表单的提交，然后顺便提示说”您的验证没通过，请重新验证“，诸如此类的话。所以

这一步就能防范”君子“只为了。

2.第二步就是服务端的校验。意思就是说表单提交之后，会有请求发送到服务器，这个请求中包含了很多数据，比如用户名、

密码，如果对接了验证码的话，还会有额外的验证码的值，或者更复杂的加密后的 Token 值，服务器会对发过来的信息进行

校验，如果验证通过，那么整个请求就成功了，返回正常的响应，否则返回错误的响应。所以如果想要通过程序来直接构造表

单提交的时候，服务端就可以做进一步的校验，由于提交的验证码相关的信息都是和服务端的 Session 相关联的，另外再加

上一些 CSRF 等的校验，所以这一步就能防范”小人“之为了。

上面就是验证码校验的两个阶段，一般来说为了安全性，在开发一个网站时需要客户端和服务端都加上校验，这样才能保证安

全性。

本文章主要来介绍一下第一个阶段，也就是前端校验的验证码的实现，下面来介绍一下拖动验证码的具体实现。

需求需求

那么前端完成一个合格的验证码，究竟需要做成什么样子呢？

1.首先验证码有个大体的雏形，既然是拖动验证码，那就要拖动块和目标块，我们需要把拖动块拖动到目标块上就算校验成

功。

2.验证码的一个功能就是来规避机器的自动操作，所以我们需要通过轨迹来判断这个拖动过程是真实的人还是机器，因此我们

需要记录拖动的路径，路径经过计算之后可以发送到后端进行进一步的分类，比如对接深度学习模型来分类拖动轨迹是否是

人。

以上就是验证码的两个基本要求，所以我们这里就来实现一下看看。

结果结果

这里就先给大家看看结果吧：

可以看到图中有一个初始滑块，有一个目标滑块，如果把初始滑块拖动到目标滑块上才能校验成功，然后下方再打印拖动的轨

迹，包含它的 x、y 坐标。

有了这些内容之后，就可以放到表单里面进行提交了，轨迹数据可以自行加密处理并校验来判断其是否合法。

具体实现具体实现

下面就具体讲解下这个是怎么实现的，实际上核心代码只有 200 行，下面对整个核心流程进行说明。

既然 Vue 这么火，那我这里就用 Vue 来实现啦，具体的环境配置这里就不再赘述了，需要安装的有：

Node.js： https://nodejs.org/en/

Vue-Cli： https://cli.vuejs.org/zh/

安装完成之后便可以使用 vue 命令了，新建个项目：

vue create drag-captcha

然后找一张不错的风景图，放到 public 目录下，后面我们会引用它。

另外这里需要一个核心的包叫做 vue-drag-drop，其 GitHub 地址为： https://github.com/cameronhimself/vue-drag-drop ，在目

录下使用此命令安装：

npm install --save vue-drag-drop

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论0

weixin_38694299

粉丝: 5
资源: 949

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈