更新记录

1.00（2020-02-23）

无

平台兼容性

滑块拼图验证组件文档

鉴于目前没有关于行为验证的组件,就自制了一个,实现方法并不复杂,本组件并没有收集用户的行为信息, 因为这些毕竟是前端的操作,并没有实际的安全性,且不便二次开发,如果有这方面需求可以自行开发;

• 使用场景 可以有效的防止机器刷一些重要的接口;比如提交接口,注册接口,登录接口,发短信接口
• 验证流程
  1. 前端会先请求服务器拿到需要验证的2个缺图和拼图,以及验证token;这里如果后端拼图图片长宽不是每个都一样;会动态适应屏幕
  2. token过期时间 我设置的是100秒,且最多是错三次(后端处理可自行开发);token包含过期时间和验证id及签发人等
  3. 用户滑动后会提交加密过后的宽度和token,验证成功时会此token会失效;所以每次验证通过对应一次调用接口的机会
  4. 这里后端有几个很暗的图片,出现概率很低,但是基本只能靠人眼判断,或是人都看不清楚,用户可以进行刷新;可以有效防止机器

     使用说明

此组件引用colorUi作为部分全局样式 把文件夹静态文件复制到项目根目录(jsencrypt.js已进行过兼容处理) 再main.js加上

import JSEncrypt from '静态资源路径/jsencrypt.js'
...
//带时间戳的rsa加密
Vue.prototype.$resJm = function(x) {
    var e=new JSEncrypt();
    //这里配置你的私钥,此仅为测试用
    e.setPublicKey("MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCy9dLbrtE2yPJ2nxoeYuZZczWNCOxijYKpttdS9cVsqb4xeycXbfeAfIghLcfxW/fUB/we/oyHwdUSc9E+s2oFA5Ed5F2fEUbZ23jzUsfYvqbYHzHbn2m1eGaAIOLgVow/DqRubZzv2/Qz4mNNRrkO+jJVCf9oTwmtmC5/ZEBNCQIDAQAB");
    return(encodeURIComponent(e.encrypt(x+"&"+new Date().getTime())))
};

//服务地址
Vue.prototype.$testUrl ="http://w479634319.6655.la/"

需要生成rsa非对称加密的公钥和私钥,用于加密滑动距离用(如不需要可不加密) 在App.vue Style里加上全局样式

<style>
<!-- colorUi组件 -->
@import "静态资源路径/colorui/main.css";
@import "静态资源路径/colorui/icon.css";
<!-- colorUi组件 -->
@import "静态资源路径/css/index-app.css";
</style>

最后引入组件即可

import verification  from '@/components/ccjp-SlideVerification/verification.vue'
export default {
        components: {verification},
...

使用
<verification ></verification>

测试服务器->http://w479634319.6655.la/ 下午1点到凌晨3点可测

组件属性说明

这里的验证框为图1的验证框,滑块的验证框会动态适应屏幕

• 后端采用java springBoot开发,需要源码可+wx w479634319