vue如何在项目中调用腾讯云的滑动验证码

在项目中使用滑动验证，可以调用腾讯云的组件和接口（付费项目）

导言

首先看看官方的步骤教学：

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 腾讯云滑动验证码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue插件之滑动验证码用法详解

    本文实例讲述了Vue插件之滑动验证码用法.分享给大家供大家参考,具体如下: 目录 预览 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 安装 使用方法 更新记录 V1.1.2 版本 V1.1.1 描述(此版本有bug,请使用最新版) V1.1.0 版本新增属性`imgs`: 内置方法 props传参(均为可选) 自定义回调函数 注意事项 预览 基于滑动式的验证码,免于字母验证码的繁琐输入 用于网页注册或者登录 目前仅前端实现,支持移动端滑动事件.版本V1.1.2 github

  • Vue插件之滑动验证码

    Vue插件之滑动验证码

    本文实例为大家分享了Vue插件之滑动验证码的具体代码,供大家参考,具体内容如下 预览 目前仅前端实现,支持移动端滑动事件.版本V1.0.5 github文档地址 安装 npm install --save vue-monoplasty-slide-verify 使用方法: // main.js import Vue from 'vue'; import SlideVerify from 'vue-monoplasty-slide-verify'; Vue.use(SlideVerify); //

  • vue仿淘宝滑动验证码功能(样式模仿)

    vue仿淘宝滑动验证码功能(样式模仿)

    我们知道验证码的目的 是为了验证到底是人还是机器. 淘宝滑动验证码会采集用户的操作数据,环境数据等等,通过算法加密成一个字符串,提交到服务器分析,判断是不是人工在操作. 我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器). 因为touch事件和mouse事件不同,和获取clientX在移动端和pc端也不同!!!所以分两端 下面有PC端和移动端!!!(2019-03-12更新) 本文基于vue,引入下面组件 可以直接使用 1.实际效果 2.PC端!!! vue组

  • 使用Vue 实现滑动验证码功能

    做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码. 我之前做过 Web 相关开发,尝试对接过 Lavavel 的极验验证,当时还开发了一个 Lavavel 包: https://github.com/Germey/LaravelGeetest ,在开发包的过程中了解到了验证码的两步校验规则. 实际上这类验证码的校验是分为两个步骤的: 1.第一步就是前端的

  • vue如何在项目中调用腾讯云的滑动验证码

    在项目中使用滑动验证,可以调用腾讯云的组件和接口(付费项目) 导言 首先看看官方的步骤教学: https://cloud.tencent.com/document/product/1110/36839 其中,前端涉及到的是"步骤3:客户端接入",里面介绍了两种接入方法:"快速接入"和"定制接入". 项目是原生HTML 或者 jQuery 开发,那么可以使用"快速接入". 项目使用 vue.react 等框架开发,则需要使用&q

  • 在Vue项目中引入腾讯验证码服务的教程

    什么是腾讯验证码?它长这个样子--:point_down: 最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333-) 不多BB,开始吧! 先看文档的接口调用流程: (文档地址: cloud.tencent.com/document/pr- ) 总共分成几

  • 详解vue项目中调用百度地图API使用方法

    详解vue项目中调用百度地图API使用方法

    步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"

  • vue中使用腾讯云Im的示例

    在vue中使用腾讯云Im 通信时,官方给出的文档及sdk提供的都是es5的写法.我们在vue中使用均需要用es6的方式来改写sdk的js文件及按自己所需要的业务调用对应的api就行了 对sdk的js文件改写 使用exports方法导出函数.官方原先提供的api不变,只需在外加一层exports方法暴露即可,webim.js里有一处long需要修改(问过腾讯也没给出一个具体的方案),其他不变. 在相应需要的地方引入即可 例如:webIm的登录 遇到的问题: 曾经使用过低版本的sdk 导致登录成功后

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • vue移动端项目中如何实现页面缓存的示例代码

    背景 在移动端中,页面跳转之间的缓存是必备的一个需求. 例如:首页=>列表页=>详情页. 从首页进入列表页,列表页需要刷新,而从详情页返回列表页,列表页则需要保持页面缓存. 对于首页,一般我们都会让其一直保持缓存的状态. 对于详情页,不管从哪个入口进入,都会让其重新刷新. 实现思路 说到页面缓存,在vue中那就不得不提keep-alive组件了,keep-alive提供了路由缓存功能,本文主要基于它和vuex来实现应用里的页面跳转缓存. vuex里维护一个数组cachePages,用以保存当前

  • Vue3+Vue-cli4项目中使用腾讯滑块验证码的方法

    Vue3+Vue-cli4项目中使用腾讯滑块验证码的方法

    简介: 滑块验证码相比于传统的图片验证码具有以下优点: 验证码的具体验证不需要服务端去验证,服务端只需要核验验证结果即可. 验证码的实现不需要我们去了解,也不需要我们去具体实现. 滑块验证码的安全程度相比于传统验证码高不少. ... 由于网络上和腾讯api文档中缺少关于vue3中组合式api怎么应用腾讯的滑块验证码,所以出此教程.本人也非vue大佬,对vue的理解也不过停留在初级使用的程度上,有错误之处,敬请指出. 开始: 首先,我们需要去腾讯云申请一个图形验证的api,使用场景中选择自己的使用

  • vue 2.0项目中如何引入element-ui详解

    vue 2.0项目中如何引入element-ui详解

    前言 本文主要介绍了关于在vue 2.0项目中引入element-ui的相关内容,从新建vue项目到引入组件Element介绍的非常详细,下面话不多说了,来一起看看详细的介绍吧. 一.新建项目 1.查看 node和npm是不是已经安装好命令:node -v  npm -v (没有安装的先安装环境); 2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件,后面的安装npm可以全部改为cnpm)

  • vue多页面项目中路由使用history模式的方法

    前言 之前写了一个vue项目中需要添加一个打印的页面,需要使用多页面的模式进行开发,vue-cli3出初始化的项目配置多页面还是很容易的,但是发现print.html没有办法配置history模式的路由,一旦使用history模式的路由.写了一个简单的demo在网上寻求帮助没有能解决问题,后来没有办法只能使用hash模式完整项目了. 如何解决 有一天看webpack文档的时候,突然看到了historyApiFallback配置项,一瞬间感觉找到方法了.下班后回家就下载下之前的项目折腾了. 之前的

  • Vue在H5 项目中使用融云进行实时个人单聊通讯

    Vue在H5 项目中使用融云进行实时个人单聊通讯

    由于其他博客的相关融云的Vue项目开发不是特别完善,此项目加入了自己的一些思考,可供大家有一点方向. 1.融云官网注册账号,创建应用并获取必要的初始化参数 appkey 2.融云web开发文档 本人使用3.x 版本 3.vue项目引入cdn(index.html) ​ 项目需求:用户当前会话列表+用户当前会话页面 // 注意在dom之前引入 <script src="https://cdn.ronghub.com/RongIMLib-3.0.0-dev.js"></s

随机推荐