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

做网络爬虫的同学一定看过各种验证码，其中高级的是滑动、点击等样式，看似挺复杂，但其实核心原理还是很清晰的。本文简要说明了这些验证码的原理，并带大家实现了一个滑动验证码。

我之前做过Web相关的开发，尝试过验证接收Lavavel的极限测试。当时我还开发了一个Lavavel包：https://github.com/Germey/LaravelGeetest,在开发包的过程中学习了验证码的两步验证规则。

事实上，这种验证码的验证分为两个步骤：

1.第一步是前端验证。一般来说，当登录页面点击提交时，会伴随一个表单提交，这是由JavaScript事件触发的。如果添加了验证码，则在提交表单时会额外添加一个验证，以判断验证码是否已经成功完成操作。如果没有，直接取消提交表格，顺便提示“您的验证失败，请重新验证”等等。所以这一步可以防备“先生们”只是为了。

2.第二步是验证服务器。也就是说，表单提交后，会向服务器发送一个请求。这个请求包含很多数据，比如用户名和密码。如果验证码被停靠，将会有一个额外的验证码值或更复杂的加密令牌值。服务器将检查发送的信息。如果验证通过，则整个请求成功，并返回正常响应；否则，将返回不正确的响应。因此，如果想通过程序直接构造表单提交，服务器可以做进一步的验证。由于与提交的验证码相关的信息与服务器的Session相关联，并且添加了一些CSRF和其他验证，所以这一步可以防止“反派”。

以上是验证码验证的两个阶段。一般来说，为了安全起见，在开发网站时，客户端和服务器端都要进行验证，以确保安全性。

本文主要介绍第一阶段，即前端验证的验证码实现，然后介绍拖拽验证码的具体实现。

需求

那么前端需要做什么才能完成一个合格的验证码呢？

1.首先，验证码有一个大致的原型。由于验证码是拖动的，所以需要拖动块和目标块。即使验证成功，我们也需要将拖动块拖动到目标块上。

2.验证码的一个功能是避免机器自动操作，所以需要通过轨迹来判断拖拽过程是真人还是机器，所以需要记录拖拽路径，计算后可以发送到后端做进一步分类，比如对接深度学习模型来分类拖拽路径是否是人。

这是验证码的两个基本要求，就在这里实现吧。

结果

让我们在这里向您展示结果：

您可以看到图中有一个初始滑块和一个目标滑块。如果将初始滑块拖到目标滑块上，可以成功验证，然后打印下面拖动的轨迹，包括其X和Y坐标。

有了这些内容，你就可以把它们放在表单中提交，轨道数据可以自己加密验证，判断是否合法。

具体实现

下面是如何实现这一点的详细解释。其实核心代码只有200行。以下是整个核心流程的描述。

既然Vue这么热，我这里就用Vue来实现。这里将不描述具体的环境配置。需要安装的是：

节点. js:https://nodejs.org/en/Vue-Cli:https://cli.vuejs.org/zh/

安装完成后，您可以使用vue命令创建一个新项目：

vue创建拖动验证码

然后找一张好的风景图放在公共目录里，我们以后再引用。

另外这里需要一个叫做vue-拖拽的核心包，它的GitHub地址是：https://github.com/cameronhimself/vue-drag-drop.使用这个命令把它安装在目录中：

npm安装-保存vue-拖放

一旦安装好，我们就可以用它来实现验证码。

起初，vue-Drag-Drop提供了两个组件，一个叫做Drag，另一个叫做Drop。前者是拖动对象，后者是放置目标。我们使用这两个组件来构建两个滑块，并将拖动滑块拖到拖放滑块上。因此，我们所要做的就是声明它们并添加一些检测方法。至于拖拽功能，组件vue-drag-drop已经为我们打包好了。

这里我们直接在App.vue中修改内容，先在模板中声明两个组件：

模板div id=' app ' div id=' wrapper ' : style=' wrapper style ' drop class=' drop ' id=' target ' : class=' { ' over ' : state . over } ' @ drag over=' onDragOver ' @ drag leave=' onDragLeave ' : style=' target style '/drop drag class=' drag ' id=' source ' : transfer-data=' true ' @ drag start=' onDragStart ' @国家。拖拽' : style=' source style ' div slot=' image ' id=' float ' : style=' source style '/div/drag/div/div/template非常清晰。拖放组件与一些属性绑定在一起。这两个组件的共同属性解释如下。

滴

对于拖放组件，它是一个放置的对象，拖动的滑块将放置在此拖放滑块上，这意味着拖动成功。它有两个主要的事件要监控，一个叫做Dragover，另一个叫做dragleave，用于监控拖动和拖动拖动对象的事件。

这里，onDragOver和onDragLeave的回调函数分别为两个事件设置。当拖动对象放在放置对象上时，将触发onDragOver对象，当拖动对象离开时，将触发onDragLeave事件。

在这种情况下，我们只需要一个全局变量来记录滑块是否已经被拖动到目标位置。例如，我们可以设置一个全局变量状态，并使用over属性来表示它是否已经被拖动到目标位置。

因此，onDragOver和onDragLeave事件可以如下实现：

onDragOver(){ this . state . over=true }，onDragLeave(){ this . state . over=false }拖动

对于“拖动”组件，它是一个“拖动”对象。我们需要将拖动滑块拖到拖放滑块上，这意味着拖动成功。它有三个主要的监控时间：dragstart、dragand dragend，分别代表三个事件：拖动开始、拖动进入和拖动结束。我们还分别设置了dragstart、onDrag和onDragEnd三种回调方法。

我应该如何实现onDragStart方法？在这里，我们应该处理拖动后的动作。因为我们需要记录拖动轨迹，所以我们声明一个轨迹全局变量来保存轨迹信息。onDragStart需要做的是将trace对象初始化为空，并记录初始拖动位置，以便后续计算拖动路径，这样可以实现如下：

Ondragstart(数据，事件){this。init={x:event。offsetx，y:event。这是。trace=[]}对于onDrag方法来说，是处理拖动过程中的一系列拖动动作，实际上是计算当前拖动的偏移位置，然后保存在trace变量中，所以可以实现如下：

onDrag(data，event){ let offset x=event . offset x-this . init . x let offset=event . offset-this . init . y this . trace . push({ x : offset x，Y:offset，})对于onDragEnd方法来说，其实就是检测的最终结果。刚才，我们使用了状态变量中的over属性来表示是否拖动到目标位置。这里，我们还定义了另一个dragged属性来表示拖动是否已经完成，以及dragging属性来表示拖动是否正在进行。所以整个方法的逻辑是检测over属性，然后给拖拽和被拖拽的属性赋值，然后做一些相应的提示，实现如下：

Ondragend () {if (this。{这个。state.dragging=false this。state.dragged=true this。$ message.success('拖动成功')} Else {this。state.dragging=false this。state.dragged=false this。$ message.error('拖动失败')} this.state.over=false }OK，这是主要的逻辑实现，这样我们就可以完成拖动滑块和监视器拖动的定义。

接下来是一些风格问题。对于图片的呈现，这里直接使用CSS的背景图像样式。如果要显示一定范围的图片，可以设置背景-位置，这是核心点。

好的，这里的样式设置也可以用JavaScript实现，我们将它们定义为一些计算属性：

wrapperStyle(){ return { width : this . size . width ' px '，height: this.size.height 'px '，background image : ' URL(' this . image ')'，backgroundSize: 'cover' }，target style(){ return { left : this . block . x ' px '，top: this.block.y 'px' }，source style(){ return { background image 3: ' URL(' thisblock . x ' px '-这个。block.y' px'}}这里还有一个值得注意的点，那就是Drag组件的槽部分：

div slot=' image ' id=' float ' : style=' source style '/div

这部分定义了拖动时用鼠标移动的图片样式，也定义了与拖动滑块相同的样式，这样拖动时会显示一个用鼠标移动的滑块。

最后，拖拽完成后，会输出滑动轨迹，我会直接呈现在这里的页面上。模板区域可以定义如下：

Div p v-if='状态。dragged ' id=' trace '拖动轨迹：{{ trace }} /p/div OK，那是一些核心代码的介绍，还有一些细节可以改进，比如滑块的随机初始化位置，拖动样式的设置。

最后，再看看效果：

您可以看到，我们首先拖动了拖动滑块，当拖动滑块被拖动到拖放滑块上时，出现了一个白色的笔画，证明它已经被拖动到目标位置。然后放开后，触发onDragEnd方法呈现拖拽轨迹，整个验证码验证成功。

当然，这只是前端部分。如果在此基础上增加表单验证，那么再加上后端验证和轨迹识别，就可以说是一个完整的验证码系统，到此为止。

最后，如果您想模拟它，您可以参考这个组件：https://github.com/cameronhimself/vue-drag-drop,它也引入了一些其他属性和事件，在某些情况下仍然非常有用。

摘要

以上是使用Vue实现滑动验证码的介绍，对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！