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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
微信小程序点击滚动到指定位置的实现
May 22 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
JS实现多功能计算器
Oct 28 Javascript
JavaScript实现网页动态生成表格
Nov 25 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求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
详解从react转职到vue开发的项目准备
2019/01/14 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
利用Python检测URL状态
2019/07/31 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
python绘制高斯曲线
2021/02/19 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
DNA基因检测和分析:23andMe
2019/05/01 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
应届毕业生自荐信例文
2014/02/26 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
员工工作自我评价
2014/09/26 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书