如何用Vue技术实现一个滑动验证码组件的功能？

本文共计3324个文字，预计阅读时间需要14分钟。

编写网络爬虫的学者可以通过分析各种类型的验证码，比较高级的滑动、点选等样式，看似复杂。但实际上，它们的核心原理仍较为清晰，本文将简述这些验证码的原理。

做网络爬虫的同学肯定见过各种各样的验证码，比较高级的有滑动、点选等样式，看起来好像挺复杂的，但实际上它们的核心原理还是还是很清晰的，本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码。

我之前做过 Web 相关开发，尝试对接过 Lavavel 的极验验证，当时还开发了一个 Lavavel 包： github.com/Germey/LaravelGeetest ，在开发包的过程中了解到了验证码的两步校验规则。

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

1.第一步就是前端的校验。一般来说，登录注册页面在点击提交的时候都会伴随着一个表单提交，在表单提交的时候会有 JavaScript 事件的触发。如果加入了验证码，那么在表单提交的时候会多加一个额外的验证，判断这个验证码是否已经成功完成了操作。如果没有的话，那就直接取消表单的提交，然后顺便提示说”您的验证没通过，请重新验证“，诸如此类的话。所以这一步就能防范”君子“只为了。

2.第二步就是服务端的校验。意思就是说表单提交之后，会有请求发送到服务器，这个请求中包含了很多数据，比如用户名、密码，如果对接了验证码的话，还会有额外的验证码的值，或者更复杂的加密后的 Token 值，服务器会对发过来的信息进行校验，如果验证通过，那么整个请求就成功了，返回正常的响应，否则返回错误的响应。所以如果想要通过程序来直接构造表单提交的时候，服务端就可以做进一步的校验，由于提交的验证码相关的信息都是和服务端的 Session 相关联的，另外再加上一些 CSRF 等的校验，所以这一步就能防范”小人“之为了。