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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
Vue-component全局注册实例
Sep 06 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 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开发GUI
2006/10/09 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
华润集团网上药店:健一网
2016/09/19 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
护理自荐信范文
2013/10/05 职场文书
毕业生精彩的自我评价分享
2013/10/06 职场文书
门卫班长岗位职责
2013/12/15 职场文书
农场厂长岗位职责
2013/12/28 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
体现团队精神的口号
2014/06/06 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis