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优化尝试小结
Feb 06 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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
php 一元分词算法
2009/11/30 PHP
PHP的加密方式及原理
2012/06/14 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
Python中如何定义一个函数
2016/09/06 面试题
职业规划书如何设计?
2014/01/09 职场文书
预备党员转正考核材料
2014/06/03 职场文书
个人租房协议书范本
2014/09/30 职场文书
工作试用期自我评价
2015/03/10 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
家电创业计划书
2019/08/05 职场文书