vue滑块验证码插件,vue滑块验证插件
滑块验证是一种常见的人机识别方法。本文主要介绍Vue与阿里云的集成作为滑块验证，有一定的参考价值。有兴趣的可以看看。
目录
前言集成阿里云验证前端需要什么介绍阿里云验证封装一个验证组件使用组件思维
前言
验证是人机识别的常用手段，但你自己做一会儿也真的搞不清楚。想这个事情挺难的。怎么能鉴别是不是人机呢？本文介绍Vue阿里云验证做这个小功能。
集成阿里云验证
前端需要什么
Appkeyscene后端协调
引入阿里云验证
public/index.html
头
script src= https://g . alicdn . com/AWSC/AWSC/awsc . js /script
/头
vue .配置. js
模块.导出={
configureWebpack: {
外部：{
AWSC:“AWSC”，
},
}
}
封装一个验证组件
其实想法很简单，功能单一。
初始化阿里云验证控件可以刷新验证控件。这里有两个关键点。
1.初始化放在mounted中，因为它涉及Dom加载。创建时，Dom没有完全加载，并且会报告一个错误。
2.手表里的显示器刷新了吗？
3.记得定制风格。
让我们开始编写组件。
NoCaptcha.vue
模板
差异
div id=nc
/div
/div
/模板
脚本
导出默认值{
//验证成功后，服务器报错(比如账号/密码错误)，需要重置滑块。
道具：{
重新加载：{
类型：布尔型，
默认值：false，
},
},
data() {
返回{
Ic: ，//noCaptcha实例
};
},
观察：{
重新加载：{
处理器(新版本){
console . log(newV)；
if (newV) {
this . NC . reset()；//重置滑块
}
},
},
},
已安装(){
this . init()；//初始化方法
},
方法：{
init() {
const self=this
//实例化nc
//eslint-disable-next-line no-undef
AWSC.use(nc ，函数(状态，模块){
//初始化
self.nc=module.init({
//可以在阿里云验证码控制台的配置管理选项卡中找到对应的appkey字段值。请正确填写。
appkey: ffff 0n 0000000005 ce 9 ，
//可以在阿里云验证码控制台的配置管理选项卡中找到对应的场景值。请正确填写。
场景： nc_login ，
//滑块呈现的DOM id。
renderTo: nc ，
//可以在这个回调参数中记录会话ID(sessionId)、签名字符串(sig)和请求唯一标识符(token)字段，随业务请求一起发送给你的服务器进行签名验证。
成功：函数(数据){
data.scene=nc_login
自我。$emit(slideCallback ，data)；
},
//滑动验证失败时触发此回调参数。
失败：函数(失败代码){
这个。$message(`滑动验证失败，失败号$ { fail code } `)；
console.log(故障代码)；
},
//验证码加载异常时触发回调参数。
错误：函数(错误代码){
这个。$message(`异常代码加载，异常编号$ { error code } `)；
console.log(错误代码)；
自我。$emit(slideCallback ，{ cls:false })；
},
});
});
},
},
};
/脚本
style lang=scss 范围
#nc {
宽度：100%；
显示：内容；
}
/深/。NC-容器#nc_1_wrapper {
宽度：100%；
高度：36px
行高：36px
#nc_1_n1t，
#nc_1__bg，
#nc_1_n1z，
#nc_1__scale_text。nc-lang-cnt
高度：36px
行高：36px
}
}
/风格
使用组件
需要考虑的问题
如果验证控件没有加载怎么办？(比如IE不支持)运维人员不需要有用户名和密码，然后验证自动调用登录事件。很简单。如果验证控件加载失败，将会有一个回调。让后端加一个参数，验证组件没有加载，让他知道会通过。
模板
//其他代码省略。
NoCaptcha @ slide callback= finish slide :reload= reload /
/模板
脚本
//其他代码省略。
从“@/components/no captcha . vue”导入NoCaptcha
data() {
返回{
reload: false，
}
},
方法：{
//点击登录
登录(){
//省略验证
this.reload=false//验证通过后，重置滑块设置为false
//后端登录界面
xx()。然后(()={
//省略登录成功代码。
})。catch((err)={
//其他代码省略。
this.reload=true//滑块需要重置
Console.log(err 该用户没有菜单权限，请联系管理员)；//错误提示
});
},
//完成滑动
finishSlide(数据){
//根据需要使用返回值
Console.log(会话ID ，data.sessionId)
Console.log(签名字符串，data.sig)
Console.log(滑块请求的令牌，data.token)
If (data.cls===false) {//验证加载失败
this.loginForm.cls=false
}
If (data.sessionId) {//非人机操作
this . loginform . scene=data . scene
this . loginform . nctoken=data . token
this.loginForm.sig=data.sig
this . loginform . session id=data . session id
删除this.loginForm.cls
}
if(this . log in form . username this . log in form . password){//用户名密码已填写。
this.login()
}
},
}
/脚本
思考
如果这个控制是前端做的还是后端做的，能实现吗？这个滑动验证机制清楚了吗？这能绝对安全吗？PS:我想了想。前端需要引入阿里云的sdk，会收集用户数据。然后滑块滑动后，会对数据进行分析，判断是否是人机。当然，这个算法是人家的秘密。毕竟是要赚钱的。其实这种滑动算法是可以模拟的，并不是绝对安全的。它只是增加了一个步骤。
关于Vue集成阿里云做滑块验证的实践这篇文章到此为止。更多相关Vue滑块验证内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。