image.png
本文章采用阿里云的滑块验证，如果要使用的话，首先注册并申请appKey。
服务器采用python验证:/a/1190000010594386
本文章讲的是如何在vue框架集成阿里的滑块验证，所以服务器的部分不会涉及。
好了，其实集成中最关键的就是js的加载，相关的知识请看本文章提到的另一篇文章：vue动态加载远程js完美实践
好了，新建文件no-captcha.vue，直接上代码：
export default {
data () {
return {
'appKey':'',
'modelName':'no-captcha',
'nc_token':null,
'lang':'cn',
'NC_Opt':null,
}
},
mounted(){ this.init(); },
components:{
},
methods: {
init(){
var self = this;
this.nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
this.NC_Opt = {
renderTo: "#no-captcha",
appkey: "",
scene: "nc_login",
token: this.nc_token,
customWidth: 300,
trans:{"key1":"code0"},
// elementID: ["usernameID"],
is_Opt: 0,
language: this.lang,
isEnabled: true,
timeout: 3000,
times:5,
apimap: {},
callback: function (data) {
window.console && console.log(self.nc_token)
window.console && console.log(data.csessionid)
window.console && console.log(data.sig)
//将这三个参数在这里回调服务器的接口，进行服务器的验证
}
}
$api.loadJs("/sd/ncpc/nc.js?t=05",{
success(data){
self.generarte();
}
});
},
generarte(){
var nc = new noCaptcha(this.NC_Opt)
nc.upLang('cn', {
_startTEXT: "请按住滑块，拖动到最右边",
_yesTEXT: "验证通过",
_error300: "哎呀，出错了，点击刷新再来一次",
_errorNetwork: "网络不给力，请点击刷新",
});
}
}
}
引入方法就是一般组件的方法，后续还有很多可以完善的地方，不过都是vue的知识，可以在网上相互借鉴。
