裴大头-秦可爱

裴大头-秦可爱

vue项目集成腾讯滑块验证

发表于 2021-06-16
裴大头
阅读量 327

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

首先需要获取腾讯云的CaptchaAppId

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

image.png

第二步:在腾讯云里新增图形验证,记录好==CaptchaAppId==

image.png

然后开始集成

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

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
js

2、新建TencentCaptcha.js

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

3、main.js中全局引入

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

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')
})
js

大功告成,是不是很简单~ 4~UE16WOU`UFZM3AP.jpg

博客的留言功能已经加上了,可以体验一下,效果图如下: image.png

评论
来发一针见血的评论吧!
表情
  • eli

    2021-06-17 15:52

    666


    0
    回复
      共0条回复,点击查看
  • 2021-06-16 17:46

    骗我来留言吗?


    0
    回复
    • 裴大头

      男博主

      2021-06-16 17:49

      @帅

      你脑袋多少有点问题

      MNT~K_M12JN2I15CN.gif


      0
      回复
    • 共1条回复,点击查看
  • 2021-06-16 17:46

    骗我来留言?


    0
    回复
    • 2021-06-16 17:46


      0
      回复
    • 共1条回复,点击查看
推荐文章
  • Vue项目代码规范

    1点赞1评论

  • JavaScript 的事件循环机制

    1点赞1评论

  • 聊一聊我的文本编辑器

    1点赞11评论

  • JavaScript的常用遍历方法整理

    1点赞8评论

  • 前端面试精选-基础篇

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 865 天访客 23353

© 2023 Pei你看雪鲁ICP备19037910号-2