1.在index.html页面中引入js
<!--适用于主要访问来自中国内地地区用户的业务场景-->
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
<!--适用于主要访问来自非中国内地地区用户的业务场景-->
<!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012">
</script> -->
2.在vue.config.js中添加配置
configureWebpack: {
externals: {
'NoCaptcha': 'NoCaptcha'
}
}
3.在页面引入
import NoCaptcha from 'NoCaptcha'
<div id="__nc">
<div id="nc"></div>
</div>
var nc_token = ['你的appkey', (new Date()).getTime(), Math.random()].join(':');
let nc = NoCaptcha.init({
//声明滑动验证需要渲染的目标元素ID。
renderTo: '#nc',
//应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
appkey: '你的appkey',
//使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
scene:'你的scene',
//滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
token: nc_token,
//业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
trans: {"key1": "code0"},
//语言，默认值为cn（中文）。HTML5应用类型默认支持简体中文、繁体中文、英文语言。
language: "cn",
//内部网络请求的超时时间。一般情况建议保持默认值（10000ms）。
timeout: 10000,
//允许服务器超时重复次数，默认5次。
retryTimes: 5,
//验证通过后，验证码组件是否自动隐藏，默认不隐藏（false）。
bannerHidden:false,
//是否默认不渲染，默认值false。当设置为true时，不自动渲染，需要自行调用show方法进行渲染。
initHidden:false,
//前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
callback: (data)=> {
/* 前端滑动验证通过时会触发该回调参数。
您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，
随业务请求一同发送至您的服务端调用验签。 */
// window.console && console.log(nc_token)
// window.console && console.log(data.csessionid)
// window.console && console.log(data.sig)
//验证通过 发送验证码
this.sendVerify(data);
},
error: function () {
//console.log(s,'********失败***************')
}
});
NoCaptcha.setEnabled(true);
nc.reset();//请务必确保这里调用一次reset()方法
NoCaptcha.upLang('cn', {
'LOADING':"加载中...",//加载
'SLIDER_LABEL': "请向右滑动验证",//等待滑动
'CHECK_Y':"验证通过",//通过
'ERROR_TITLE':"非常抱歉，这出错了...",//拦截
});
网友评论