帝王谷资源网

VUE接入腾讯验证码功能（滑块验证）备忘
网络编程 2024/12/23 佚名
3 2
帝王谷资源网 Design By www.wdxyy.com

最近在用VUE做个简单的用户系统，登录注册需要验证码，想找个那种拖动的，找geetest居然已经不面向小客户了（或者说只有收费套餐）。

腾讯防水墙的验证码免费使用，有2000/小时的免费额度，对于小网站完全足够了，阿里应该也有，我看discuz有插件直接能用，但没找到入口

腾讯的在这，和腾讯云无关：https://007.qq.com/captcha/#/  申请api很简单，QQ登录，创建应用，ID和secretkey就出来了，直接在文档里展示，赞一个。

vue有人做了封装了geetest+腾讯验证码的插件，但实现不了我想要的逻辑，而且似乎把简单的东西复杂化了，遂放弃自己接。

我的应用的需求是：

用户点击按钮后，先执行我的验证逻辑，验证逻辑通过后再执行验证码逻辑，插件实现了一个vue组件进行绑定验证过程，但这样就没法实现我的需求了。而且我一开始找插件是因为以为腾讯提供的JS没有带UI，后来发现其实已经自带UI，一个函数就可以调起自适应的验证码界面，很方便。

接入方法

那么进入记录的正题

1.引入JS

在VUE的index.html头部加入以下内容即可

<script src="/UploadFiles/2021-04-02/TCaptcha.js">


2.调起腾讯验证码


有两种方式可以调起，第一种采用dom元素加data属性





<button id="TencentCaptcha"
  data-appid="你的APPID"
  data-cbfn="callback"
>验证</button>





这样这个元素被点击的时候就会触发了（也就实现了前面说的第三方插件的功能了，所以不知道那个插件有啥意义..）


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





new TencentCaptcha('腾讯验证码APPID', (rsp)=>{
   if(rsp.ret===0){
   //我的验证码通过后的逻辑写在此
   }else{
   this.$vux.toast.show({
    text: '请完成滑块验证',
    type: 'warn'
   })
   }
  },{});






这种方式可以完成我的需求，在验证表单数据的逻辑通过后调用此逻辑，此逻辑内再写表单提交请求，就可以了


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


今天又看了下腾讯验证码的后台，感觉功能做的挺齐全也很实用。作为一个免费产品非常不错了：


可以看数据：


VUE接入腾讯验证码功能（滑块验证）备忘


可以轻微定义界面（本身界面不会有广告）：


VUE接入腾讯验证码功能（滑块验证）备忘


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


VUE接入腾讯验证码功能（滑块验证）备忘


总结


以上所述是小编给大家介绍的VUE接入腾讯验证码功能（滑块验证）备忘,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
标签：
vue,接入腾讯验证码,vue,验证码
帝王谷资源网 Design By www.wdxyy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
www.wdxyy.com 帝王谷资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接