调用腾讯云滑块验证码（vue框架+web前端接入）
前提：企业已购买改权限并配置好信息（参考楼上地址步骤）
滑块验证码说明：
抗破解性强，交互简单，用户轻轻一滑即可快速完成验证。（这里可做多语言适配）
中文
英文
前端接入步骤：
第一步：
条件：接入验证码前，进入图形验证 页完成新建验证。可在验证列表查看 验证码接入所需的 CaptchaAppId 以及 AppSecretKey。
第二步
在index.html中的head中引入相关.js文件
// 加载滑块验证
<script src="https://ssl.captcha.qq.com/TCaptcha.js" type = 'text/javascript'></script>
或者在App.vue文件中
// 加载滑块验证
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://ssl.captcha.qq.com/TCaptcha.js';
document.getElementsByTagName('head')[0].appendChild(script);
第三步
dom结构
<div ref="captcha1" class="outter">
<span @click="handleSlide($event)" class="inner">点我就可以出现滑块验证</span>
</div>
样式
第四步
js
methods: {
handleSlide(e) {
try {
//这里书写调用滑块前逻辑
let dom = this.$refs.captcha1;
//多语言适配（作为参考）
let userLanguage = this.$store.state.language;
userLanguage = userLanguage.indexOf('zh') != -1 ? userLanguage : userLanguage.split('-')[0];
// 滑块插件实例
this.captcha = new TencentCaptcha(
dom,
'204099xxx',//这个是在配置时生成的
this.myCallBack,
{ userLanguage }
// { bizState: '自定义透传参数' }
);
} catch (error) {
// 滑块验证调用失败
// 这里可以写调用失败逻辑
console.log('调用失败');
}
},
myCallBack(res) {
let { ret } = res;
//ret==0表示调用成功
if (ret == 0) {
//这里书写调用成功逻辑
let { randstr, ticket, ret } = res;
console.log('randstr--' + randstr + '\n', 'ticket--' + ticket + '\n', 'ret--' + ret + '\n', '回调成功相关参数');
}
},
}
实例滑块时的参数说明：
new TencentCaptcha(element, CaptchaAppId, callback, options);
// element HTMLElement 需要绑定click事件的元素
// CaptchaAppId String 验证码应用 ID
// callback Function 回调函数
// options Object 更多配置参数, 请参见 配置参数
回调中的res参数说明：
// ret Int 验证结果，0：验证成功。2：用户主动关闭验证码。
// ticket String 验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
// CaptchaAppId String 验证码应用ID。
// bizState Any 自定义透传参数。
// randstr String 本次验证的随机串，请求后台接口时需带上。
/*
res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
res（客户端出现异常错误 仍返回可用票据） = {ret: 0, ticket: "String", randstr: "String",errorCode: Number, errorMessage: "String"}
res（用户主动关闭验证码）= {ret: 2}
*/
一个成功调用滑块返回的部分参数：
//randstr-----@wFQ
//ticket-----t03RkzgnDZes3SCWPl23I1YFbinjp0uN7WoJkvNeI0rKs5u_bmid0VTCxoF7YUDq1Vu4fEMjbGuFLEhi3Zvu9nEX6-HvCdVOlMnfLRUyrULJpXptBjPqHkGeA**
//ret-----0
//回调成功相关参数
第五步
点击，即可成功调起
划重点，划重点！！！！
这里有个坑：
点击触发这个事件的dom结构和你传入实例的dom结构一定不要是同一个（应像本文档这样写结构）
不然你点击第一次的时候并不会触发这个滑块验证，第二次第三次....才会触发
