vue项目集成腾讯滑块验证

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

首先需要获取腾讯云的CaptchaAppId

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

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

然后开始集成

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

<script src="https://ssl.captcha.qq.com/TCaptcha.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')
})

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

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