Vue集成阿里云做滑块验证的实践

目录

• 前言
• 集成阿里云验证
• 前端需要什么
• 引入阿里云验证
• 封装一个验证组件
• 使用组件
• 思考

前言

滑块验证是比较常见的人机鉴别手段，但是自己做一时半会还真搞不出来，想想这玩意还挺难琢磨，怎么识别是否是人机呢？本文介绍Vue+阿里云验证做出这个小功能。

集成阿里云验证

前端需要什么

• appkey
• scene
• 后端配合

引入阿里云验证

public/index.html

vue.config.js

module.exports = {
  configureWebpack: {
    externals: {
      AWSC: 'AWSC',
    },
  }
}

封装一个验证组件

思路其实很简单，功能也单一。

• 初始化加载阿里云验证控件
• 可刷新验证控件

下面说两个重点

1. 初始化放在mounted，是因为涉及到Dom加载问题，created时Dom并未加载完成会报错。
2. Watch里面监听是否刷新
3.. 记得样式自定义下

下面开始写组件
NoCaptcha.vue

使用组件

需要考虑的问题

• 验证控件没加载出来的情况怎么办？（例如IE不支持）
• 运维人员不需要
• 有用户名密码，再去验证自动调用登录事件

很简单验证控件加载失败会有个回调，让后端加个参数，没加载验证组件，让他知道予以通行就好

思考

• 如果这个控件让前端自己做或者后端自己做，能实现吗？
• 这个滑动验证机制明白吗？
• 这个能实现绝对安全吗？

PS:我思考了一下，前端需要引入阿里云的sdk，这个sdk会收集用户数据。然后滑块滑动完成后会将这些数据进行分析判断是否为人机。当然这算法是人家的机密，毕竟要赚钱的嘛。其实这个滑动算法是可以模拟的，也不是绝对安全，只是增加了一个步骤而已。

到此这篇关于Vue集成阿里云做滑块验证的实践的文章就介绍到这了,更多相关Vue 滑块验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！