vue项目集成腾讯滑块验证

腾讯滑块验证"/>

vue项目集成腾讯滑块验证

项目中需要用到滑块验证，比如说本博客中的留言评论功能，可以使用腾讯的滑块验证，接下来看操作！

首先需要获取腾讯云的CaptchaAppId

可以参考腾讯云图形验证的使用文档。
第一步：登录腾讯云，打开控制台，打开验证码功能。

第二步：在腾讯云里新增图形验证，记录好CaptchaAppId

然后开始集成

1、在index.html中引入js依赖

<script src=".js"></script>

2、新建TencentCaptcha.js

export default {install(Vue) {// 这里的Appid是腾讯工作台配置let Captcha = new TencentCaptcha('2053242547', res => {new Vue().$bus.$emit('getTicket', res)});Vue.prototype.$Captcha = Captcha}
}

3、main.js中全局引入

// 腾讯滑块验证(新建一个js文件)
import TencentCaptcha from '@/assets/js/TencentCaptcha'
Vue.use(TencentCaptcha);
// 使用
Vue.prototype.$bus = new Vue();

4、组件中使用

this.$Captcha.show();
this.$bus.$on('getTicket', res => {// 返回结果// ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。// ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。// CaptchaAppId       String    验证码应用ID。// bizState    Any       自定义透传参数。// randstr     String    本次验证的随机串，请求后台接口时需带上。if (res.ret === 0) {//验证成功的操作} else {this.$notify.warning('请通过验证')}this.$bus.$off('getTicket')
})

大功告成，是不是很简单~

博客的留言功能已经加上了，可以体验一下，效果图如下：