vue如何在项目中调用腾讯云的滑动验证码


Posted in Javascript onJuly 15, 2020

在项目中使用滑动验证,可以调用腾讯云的组件和接口(付费项目)

导言

首先看看官方的步骤教学:

https://cloud.tencent.com/document/product/1110/36839

其中,前端涉及到的是“步骤3:客户端接入”,里面介绍了两种接入方法:“快速接入”和“定制接入”。

项目是原生HTML 或者 jQuery 开发,那么可以使用“快速接入”。

项目使用 vue、react 等框架开发,则需要使用“定制接入”。

步骤

1、新建项目对应 appid

在 验证码控制台 中注册 AppID 和 AppSecret。

其中的“所在网址”可以填本地开发IP地址,例如 “192.168.20.28”

注意,自己测试的话,需要先领取免费包。即在 APPID 列表里新建验证成功后,选择列表 table 上面的 “领取免费包”,领取2万次调用次数

2、在 index.html 中引入验证 js 文件

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

3、在按钮中绑定点击事件,实例化 TencentCaptcha ,制定回调函数

// vue 例子

// 点击按钮,出现拼图弹窗
<el @click="varify" > 验证</el - button >

methods: {
 varify() {
  let appid = 'xxxxx'; // 腾讯云控制台中对应这个项目的 appid
  //生成一个滑块验证码对象
  let captcha = new TencentCaptcha(appid, function (res) {
   // 用户滑动结束或者关闭弹窗,腾讯返回的内容 
   console.log(res)
   if (res.ret === 0) {
    //成功,传递数据给后台进行验证
    axios.post('接口路径', {
     Ticket: res.ticket,
     CaptchaAppId: res.appid,
     Randstr: res.randstr,
     // 其他参数
    })
     .then(
      // 后台验证通过,返回用户信息
      // 前端接收并登陆系统 
     )
     .catch(
      // 验证失败  
     )
   } else {
    // 提示用户完成验证
   }
  });
  // 滑块显示
  captcha.show();
 }
}

其中,腾讯返回的数据格式是这样的:

appid: "xxxx"
bizState: "xxx"
randstr: "@0N2"
ret: 0 // 2 代表用户关闭验证弹窗
ticket: "xxxxx"

4、在线调试

后台未接入腾讯云验证接口,也可以通过腾讯云提供的在线调试工具,测试验证结果

步骤:

  • 前端滑动验证,打印返回结果
  • 在工具网页点选 “只看必填参数”,将所需内容填好,Ticket 啥的就填返回的结果
  • 选择右侧 在线调用 -> 发送请求

到此这篇关于vue如何在项目中调用腾讯云的滑动验证码的文章就介绍到这了,更多相关vue 腾讯云滑动验证码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
jQuery实现滚动效果
Nov 17 jQuery
Vue.js样式动态绑定实现小结
Jan 24 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
解析vue、angular深度作用选择器
Sep 11 Javascript
React如何创建组件
Jun 27 Javascript
Vue中keep-alive的两种应用方式
Jul 15 #Javascript
js实现浏览器打印功能的示例代码
Jul 15 #Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 #Javascript
详解JavaScript 作用域
Jul 14 #Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 #Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 #jQuery
javaScript实现一个队列的方法
Jul 14 #Javascript
You might like
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
Python实现像awk一样分割字符串
2020/09/15 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
python中time.ctime()实例用法
2021/02/03 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
文化宣传方案
2014/03/13 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
小学元宵节活动总结
2015/02/06 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
python自动化测试之Selenium详解
2022/03/13 Python
Java 多态分析
2022/04/26 Java/Android