今天给Vue项目中加了一个第三方的滑动解锁组件，效果图稍后贴出，一般做这个的目的就是为了减少一些恶意注册、频繁登录等，虽说一般都需要后端的支持，只是前端做处理的话，并没有啥卵用。。不过总比没有好。
组件的demo地址：https://www.ukobd2.com/wholesale/fvdi-j2534-diagnostic-interface-147.html
实现后的效果如下图：
(未解锁的情况)
(解锁后的情况）
这个组件是基于Vue2.x的，其他版本没试过。在样式上稍作了改动，因为还得适配elementUI的总体风格。
先说一下这个第三方组件吧，我这里用的是vue-drag-verify（传送门），GitHub里基本也写了安装，使用方法和参数列表，但有一点没有提及的就是验证成功后的回调，自己去看源代码的话，可以发现是支持的，不过我并没有用它的回调，哈哈哈。
下面说一下用法：
1. 安装组件包：
1 |
npm install vue-drag-verify --save |
2. 在Vue文件中使用，主要是引入组件和使用components
1 2 3 4 5 6 7 8 9 |
import Vue from 'vue'
import dragVerify from 'vue-drag-verify'
export default {
name: 'app',
components:{
dragVerify
}
} |
3. 具体使用：
GitHub links上是这样写的：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<drag-verify :width="width" :height="height" :text="text" :success-text="successText" :background="background" :progress-bar-bg="progressBarBg" :completed-bg="completedBg" :handler-bg="handlerBg" :handler-icon="handlerIcon" :text-size="textSize" :success-icon="successIcon" :circle="getShape"> </drag-verify> |
我举个例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<drag-verify :width="358" :height="40" handlerIcon='el-icon-d-arrow-right' successIcon='el-icon-check' text="请将滑块拖动到右侧" success-text="验证成功" background="#ddd" progress-bar-bg="#2ACBF8" text-size="14px" :circle="true" ref="Verify"> </drag-verify> |
这里参数都可以自定义的，不懂的话可以参考文档哦。
参数的图如下：
4. 简单的调整样式，这一步非必须，根据自己项目来。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// drag verify
.drag_verify {
border-radius: 4px!important;
.dv_progress_bar {
border-radius: 4px!important;
}
.dv_handler {
border-radius: 4px!important;
top: 1px!important;
}
.dv_text{
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-size-adjust: none;
-webkit-animation: slidetounlock 5s infinite;
}
@-webkit-keyframes slidetounlock {
0% {background-position: -200px 0;}
100%{background-position: 200px 0;}
}
} |
Tips: 我这里加了一个文字的动画效果，组件本身是没有的哦。但动画兼容性不是很好，建议谨慎使用。
5. 在提交表单的时候，做验证，因为我用的是elementUI的表单验证和提交，所以部分代码是下面这样的，仅做参考：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
onSubmit (formName) {
let $self = this
$self.$refs[formName].validate((valid) => {
if (valid) {
// 如果没有滑动到右侧，则提示
if (!$self.$refs.Verify.isPassing) {
$self.$message.warning('请将滑块拖动到右侧')
return false
}
// 通过验证
let _params = {
account: $self.loginForm.username,
password: $self.loginForm.password
}
$self.$http.post('/signin', _params).then((response) => {
let data = response.data
if (data.code !== '1000') {
$self.$message.warning(data.msg)
// 恢复滑动到原点
$self.resetVerify()
return false
}
// 这里做接口请求成功后的逻辑。。。
}).catch(err => {
$self.resetVerify()
})
} else {
// 未通过验证
return false
}
})
},
resetVerify () {
// 恢复滑动到原点
this.$refs.Verify.isMoving = false
this.$refs.Verify.x = 0
this.$refs.Verify.isPassing = false
this.$refs.Verify.$refs.handler.style.left = '0';
this.$refs.Verify.$refs.progressBar.style.width = '0';
} |
ok，以上即实现了滑动组件的使用，具体大家可根据需求调整。
槽点
貌似这种组件可能对抗通用型打码登录、注册程序
但是很少有通用型机器人能“通用”的登录各种常用网站
如果是专门针对某一网站进行机器人注册、登录，用这个组件进行“防御”显然只是摆设
先不说最Low也可以通过“按键精灵”系软件进行破解（基本不用编码）
通过分析登录、注册http协议就可以简单绕过
通过浏览器插件，引入原有js代码后直接调用(ajax)api进行登录也一样可以
所以条条大路都可以“攻击”的情况下，这么搞还不如干脆使用验证码，或者手机短信登录
从未来趋势上讲，通过微信扫码登录总体更为恰当，用户不太麻烦，网站也不用负担短信费用
写在最后
好了，本文到此结束！
如果还有什么疑问或者建议，欢迎多多交流，如果觉得文章对你有帮助，打个赏，让我有更大的动力去创作，谢谢！
本文参考：https://www.ukobd2.com/wholesale/fvdi-j2534-diagnostic-interface-147.html