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


Posted in Javascript onMay 07, 2019

最近在用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="https://ssl.captcha.qq.com/TCaptcha.js"></script>

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接入腾讯验证码功能(滑块验证)备忘,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
JavaScript访问样式表代码
Oct 15 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
javascript中this的四种用法
May 11 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
taro开发微信小程序的实践
May 21 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
vue接入腾讯防水墙代码
May 07 #Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 #Javascript
详解vue中使用protobuf踩坑记
May 07 #Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 #Javascript
微信小程序扫描二维码获取信息实例详解
May 07 #Javascript
Vue数据绑定简析小结
May 07 #Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
Smarty+QUICKFORM小小演示
2007/02/25 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python线程池的实现实例
2013/11/18 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
python中函数默认值使用注意点详解
2016/06/01 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python实现图片识别汽车功能
2018/11/30 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
python如何保存文本文件
2020/06/07 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
两年的个人工作自我评价
2014/01/10 职场文书
医院工作检讨书范文
2014/02/10 职场文书
个性车贴标语
2014/06/24 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
MySQL创建管理子分区
2022/04/13 MySQL