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 相关文章推荐
extjs之去除s.gif的影响
Dec 25 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
js模态对话框使用方法详解
Feb 16 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
eslint 的三大通用规则详解
May 16 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
介绍一下28个JS常用数组方法
May 06 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
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
使用PHP编写发红包程序
2015/07/22 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
Python实现LRU算法的2种方法
2015/06/24 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python科学计算之Pandas详解
2017/01/15 Python
Python下载网络小说实例代码
2018/02/03 Python
Python3解释器知识点总结
2019/02/19 Python
python 中如何获取列表的索引
2019/07/02 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
ASP.NET中的身份验证有那些
2012/07/13 面试题
幼儿园中班上学期评语
2014/04/18 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python