撸一个Vue手势验证码组件

手势验证码VAPTCHA

这是一种绘制轨迹进行人机的验证码，官网称为手势验证码。以下为官网说明：

VAPTCHA是“Variation Analysis based Public Turing Test to Tell Computers and Humans Apart”（基于变量分析来区分人类和计算机的图灵测试程序）的缩写，又称为手势验证码，一种基于人工智能和大数据的人机验证解决方案 。相对于传统验证码，VAPTCHA更加简单和安全。

使用方式

使用文档中介绍了3种模式，点击式、嵌入式和隐藏式。其中隐藏式需要vip才能使用，并且使用方式与其他两种不同，这里就只针对点击式、嵌入式编写组件，两种方式的配置大致相同。

使用验证码之前我们需要先在官网注册并创建一个验证单元，创建之后可以获取到一个vid和key，这个vid就是用于前端创建验证码的重要参数。在创建验证单元的时候要填域名，这里需要注意的是，这里可以填ip，所填写的域名需要与你的使用验证码的地址一致。

这里我在codepen上写了一个实例，因为结果域名是codepen.io 所以这里创建验证单元时域名就填这个了。

开始动手

• 创建组件Vaptcha.vue，文档中提供了一个预加载动画，这里直接复制过来用。
• 初始化验证码需要先加载https://cdn.vaptcha.com/v2.js，但只需要加载一次就行了，所以写一个加载脚本的函数loadV2Script，放回一个Promise对象。
• 加载验证码需要先获取容器，所以我们在mounted里面来初始化验证按钮，这里默认会加载点击式。

初始化代码：

mounted() {
  this.loadV2Script().then(() => {
    window.vaptcha({
    vid: '5b68f7bffc650e121c835ffc',
    container: this.$refs.vaptcha
  }).then(obj => {
      this.$emit('input', obj)
      obj.render() //渲染按钮 
    })
  })
},

到这里就已经完成了组件的编写，然后就是一些优化，使用props为组件添加参数，完整代码如下。

具体的使用实例可以参考我在codepen上面的示例，地址:https://codepen.io/insertswea...

原文地址: https://insertsweat.cn/2018/0...