Vue引入阿里云滑块验证
2019-11-08 本文已影响0人
拾壹丶ban
1.在index.html中引入相关js文件
<!DOCTYPE html>
<html>
<head>
...<!--一些配置-->
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<!--引入js文件,注意t的版本，不同t的版本操作不同-->
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
</html>
2.在组件中使用
<div id="captcha" class="captcha"></div>
3.初始化
let that = this;
let nc = NoCaptcha.init({
renderTo: '#captcha',
appkey: this.appkey,//这个参数需要后台返回
scene: this.scene,//这个也是
token: this.token,//这个同理
trans: {"key1": "code200"},
// elementID: ["usernameID"],
is_Opt: 0,
language: "cn",
timeout: 10000,
retryTimes: 5,
errorTimes: 5,
inline: false,
apimap: {
// 'analyze': '//a.com/nocaptcha/analyze.jsonp',
// 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
},
bannerHidden: false,
initHidden: false,
callback: function (data) {
console.log(data);
that.verify_token = this.token;
that.sessionid = data.csessionid;
that.sig = data.sig;
},
error: function (s) {
console.log(s)
}
});
NoCaptcha.setEnabled(true);
nc.reset();//请务必确保这里调用一次reset()方法
NoCaptcha.upLang('cn', {
'LOADING': "加载中...",//加载
'SLIDER_LABEL': "请向右滑动验证",//等待滑动
'CHECK_Y': "验证通过",//通过
'ERROR_TITLE': "非常抱歉，这出错了...",//拦截
'CHECK_N': "验证未通过", //准备唤醒二次验证
'OVERLAY_INFORM': "经检测你当前操作环境存在风险，请输入验证码",//二次验证
'TIPS_TITLE': "验证码错误，请重新输入"//验证码输错时的提示
});
