vue 插件 滑块验证_vue之滑块验证码

image.png

本文章采用阿里云的滑块验证，如果要使用的话，首先注册并申请appKey。

服务器采用python验证:https://segmentfault.com/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("http://g.alicdn.com/sd/ncpc/nc.js?t=2015052012",{

success(data){

self.generarte();

}

});

},

generarte(){

var nc = new noCaptcha(this.NC_Opt)

nc.upLang('cn', {

_startTEXT: "请按住滑块，拖动到最右边",

_yesTEXT: "验证通过",

_error300: "哎呀，出错了，点击刷新再来一次",

_errorNetwork: "网络不给力，请点击刷新",

});

}

}

}

引入方法就是一般组件的方法，后续还有很多可以完善的地方，不过都是vue的知识，可以在网上相互借鉴。