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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
页面装载js及性能分析方法介绍
Mar 21 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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 多线程上下文中安全写文件实现代码
2009/12/28 PHP
基于pear auth实现登录验证
2010/02/26 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php链表用法实例分析
2015/07/09 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
加班费申请报告
2015/05/15 职场文书
董事长致辞
2015/07/29 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技