做网络爬虫的学生一定见过各种各样的验证码吧。 高级物品有滑动和点击等样式，虽然看起来很复杂，但实际上其核心原理还很明确。 本文大致介绍了这些认证码的原理和滑动认证码的实现。
我以前做过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命令创建新项目。
vuecreatedrag-captcha
然后，找一张好的风景图，放在public目录下，稍后引用它。
此外，还需要一个名为vue-drag-drop的核心包。 其GitHub地址为https://github.com/Cameron himself/vue-drag-drop，在目录下使用此命令进行安装。
NPMinstall----savevue-drag-drop
安装后，可以利用它实现验证码。
首先，vue-Drag-Drop提供了两个组件： drag和drop。 前者是要拖动的对象，后者是放置目标。 使用这两个组件构建两个滑块，然后将“Drag”滑块拖动到“Drop”滑块上即可成功。 因此，我们应该做的就是声明它们两个，并添加一些检测方法就可以了。 关于拖动的功能，打包了一个名为vue-drag-drop的组件。
这里直接在App.vue中修改内容就可以了，但是在template中声明了两个组件：
为了清楚起见，drop和drag组件绑定了一些属性。 介绍这两个组件的常规属性。
杜罗普
对于Drop组件，这是一个放置的对象，拖动的滑块将放置在此Drop滑块上。 这意味着拖动成功了。 有两个主要事件： dragover和dragleave，它们分别用于监听
Drag 对象拖上和拖开的事件。在这里，分别对两个事件设置了 onDragOver 和 onDragLeave 的回调函数，当 Drag 对象放到 Drop 对象上面的时候，就会触发 onDragOver 对象，当拖开的时候就会触发 onDragLeave 事件。
那这样的话我们只需要一个全局变量来记录是否已经将滑块拖动到目标位置即可，比如可以定一个全局变量 state，我们用 over 属性来代表是否拖动到目标位置。
因此 onDragOver 和 onDragLeave 事件可以这么实现：
Drag
对于 Drag 组件来说，它是一个被拖动的对象，我们需要将这个 Drag 滑块拖动到 Drop 滑块上，就代表拖动成功了。它有三个主要的时间需要监听：dragstart、drag、dragend，分别代表拖动开始、拖动中、拖动结束三个事件，我们这里也分别设置了三个回调方法 onDragStart、onDrag、onDragEnd。
对于 onDragStart 方法来说，应该怎么实现呢？这里应该处理刚拖动的一瞬间的动作，由于我们需要记录拖动的轨迹，所以声明一个 trace 全局变量来保存轨迹信息，onDragStart 要做的就是初始化 trace 对象为空，另外记录一下初始的拖动位置，以便后续计算拖动路径，所以可以实现如下：
对于 onDrag 方法来说，就是处理拖动过程中的一系列拖动动作，这里其实就是计算当前拖动的偏移位置，然后把它保存到 trace 变量里面，所以可以实现如下：
对于 onDragEnd 方法来说，其实就是检测最后的结果了，刚才我们用 state 变量里面的 over 属性来代表是否拖动到目标位置上，这里我们也定义了另外的 dragged 属性来代表是否已经拖动完成，dragging 属性来代表是否正在拖动，所以整个方法的逻辑上是检测 over 属性，然后对 dragging、dragged 属性做赋值，然后做一些相应的提示，实现如下：
OK 了，以上便是主要的逻辑实现，这样我们就可以完成拖动滑块的定义以及拖动的监听了。
接下来就是一些样式上的问题了，对于图片的呈现，这里直接使用 CSS 的 background-image 样式来设置的，如果想显示图片的某一个范围，那就用 background-position 来设置，这是几个核心的要点。
好，这里的样式设置其实也可以用 JavaScript 来实现，我们把它们定义为一些计算属性：
另外这里还有一个值得注意的地方，就是 Drag 组件的 slot 部分：
这部分定义了在拖动过程中随鼠标移动的图片样式，这里也和 Drag 滑块一样定义了一样的样式，这样在拖动的过程中，就会显示一个和 Drag 滑块一样的滑块随鼠标移动。
最后，就是拖拽完成之后，将滑动轨迹输出出来，这里我就直接呈现在页面上了，<template> 区域加入如下定义即可：
好，以上就是一些核心代码的介绍，还有一些细节的问题可以完善下，比如滑块随机初始化位置，以及拖动样式设置。
最后再看一遍效果：
拖动验证码示例
可以看到我们首先拖动了 Drag 滑块，当 Drag 滑块拖动到 Drop 滑块上时，出现了白色描边，证明已经拖动到目标位置了。然后松手之后，触发 onDragEnd 方法，呈现拖动轨迹，整个验证码就验证成功了。
当然这只是前端部分，如果在这个基础上添加表单验证，然后再添加后端校验，并加上轨迹识别，那可谓是一个完整的验证码系统了，在这里就点到为止啦。
最后如果大家想也仿照实现一下的话，可以参考这个组件：
https://github.com/cameronhimself/vue-drag-drop，
里面也介绍了其他的一些属性和事件，在某些情况下还是很有用的。