VUE接入腾讯验证码功能(滑块验证)备忘录

最近，我们正在使用VUE作为一个简单的用户系统，我们需要一个验证码来登录和注册。如果我们想找一个拖得住的，geetest不再适合小客户(或者只是一个收费套餐)。

腾讯防水墙验证码免费使用，有2000/小时的免费额度。对于小网站来说已经足够了。阿里也应该有。我觉得discuz有插件可以直接使用，但是找不到入口

腾讯在这里的存在与腾讯云无关：https://007.qq.com/captcha/#/申请api非常简单。当QQ登录创建一个应用时，ID和secretkey会出来，直接显示在文档中，有一个会被点赞。

Vue，有人做了一个插件，封装了geetest腾讯验证码，但是无法实现我想要的逻辑，似乎把简单的事情复杂化了，所以我自己放弃了回答。

我的申请要求是：

用户点击按钮后，先执行我的验证逻辑，验证逻辑通过后再执行验证码逻辑。该插件实现了一个vue组件的绑定验证过程，但是不能满足我的需求。而且我开始找插件是因为我以为腾讯提供的JS没有自带UI，但是后来发现它已经自带UI了，一个功能可以调优自适应验证码界面，非常方便。

存取方法

那就开始记录吧

1.JS的引入

在VUE index.html的头像上加上以下内容

脚本src=' http:https://sl.captcha.qq.com/tcaptcha.js'/script2.调用腾讯验证码

有两种方法可以调整它。第一种方法是使用dom元素加上数据属性

button id=' Tencent captcha ' data-APPID=' your APPID ' data-cbfn=' callback ' verify/button，点击这个元素就会触发(实现了前面提到的第三方插件的功能，所以不知道插件是什么意思.)

第二种方式是我用的，JS写作逻辑：

新腾讯验证码('腾讯验证码appid '，(RSP)={if (RSP。ret==0){//我的验证码通过后的逻辑写在这里} else {this。$ vux.toast.show ({text: '请完成滑块验证'，键入：' warn。这种方式可以满足我的要求。验证表单数据的逻辑通过后，调用这个逻辑，然后在这个逻辑中写入表单提交请求。

3.腾讯验证码的一些设置

今天又看了一遍腾讯验证码的后台，感觉功能还是挺齐全实用的。作为免费产品，它非常棒：

你可以看看数据：

可以稍微定义一下界面(界面本身不会有广告):

可以设置体验更好的认证模式等。

摘要

以上是VUE访问边肖介绍的腾讯验证码功能(滑块验证)的备忘录。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！