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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
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 危险函数全解析
2009/09/09 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python新手实现2048小游戏
2015/03/31 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
法制宣传实施方案
2014/03/13 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
红色旅游心得体会
2014/09/03 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
内勤岗位职责范本
2015/04/13 职场文书
如何写好闭幕词
2019/04/02 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书