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

什么是腾讯验证码？它长这个样子……:point_down:

最近公司项目要求引入腾讯云验证，要求是这样的： 为了防止别人恶意刷短信验证码，当用户短时间内多次获取验证码的时候，需要调用腾讯验证码，验证成功后会继续自动发送验证码 ，刚开始的我听的一脸蒙蔽，网上搜索也没有多少相关的文章，然而现在我接通啦，发现是很简单点事（或许就是因为太简单了所以没有人写2333…）

不多BB，开始吧！

先看文档的接口调用流程：

（文档地址： cloud.tencent.com/document/pr… ）

总共分成几个小步骤：

  1. 后台去腾讯云获取一个JS地址；
  2. 后台通过接口传给前端；
  3. 前端依据JS地址去加载验证码；
  4. 验证成功后会得到一个ticket票据（就是一堆字符串），将其再传给后台；
  5. 后台验证ticket，如果通过，你就会收到短信（或邮件）验证码了。

后台的事不去管它，那我们前端都需要做什么呢？

首先在需要引入腾讯验证码的.vue组件内加入一个标签:point_down:：

<div id="TCaptcha" style="width:300px;height:40px;" ></div>

然后当你频繁多次调用发送短信的接口，直到触发了需要调用腾讯验证码时（ 这个判断是后台告诉你的 ，比如我们项目中接口传参的JSON中有个isShow的变量，如果等于1则要触发腾讯云验证了，默认状态下是0，就是不需要腾讯验证。具体情况问你们的后台去，手动滑稽）

上图是我们项目中实际的接口回调，可以看到回调中有个 Js地址 和 businessId ;

这个Js地址就是你去获取云验证的方式，你需要写一个方法，把这个Js动态添加到body标签内:point_down:：

参数src是调用获取验证码接口返回数据时，将Js地址传过来。

capInit这个函数是当你将Js引入进去后才会有的，否则报错，所以设置一个延迟（代码比较简陋，可以用promise）。

然后这个callback回调函数就是 用户验证之后，会调用该函数，传入json格式验证参数。:point_down:

//回调函数：验证码页面关闭时回调
cbfn(res) {
 if (res.ret == 0) {
  // 用户验证成功,获取到ticket，然后你需要将这个ticket和之前的businessId一起传给后台
  // 若后台验证成功，用户就可以收到验证码了，无需你再做其他操作
  alert(res.ticket);
  capDestroy()
 }
 else {
  //用户关闭验证码页面，没有验证
  capDestroy() //销毁之前创建的script标签
 }
}

重复一遍：用户验证成功,获取到ticket，然后你需要将这个ticket和之前的businessId一起传给后台。若后台验证成功，用户就可以收到验证码了，无需你再做其他操作

最后再说（复制）一下 capInit(iframe_div, options) 这个函数，options是一个Json对象，可以设置多个参数。:point_down:

1. iframe_div（必填）：嵌入验证码 iframe 的元素。

2. options： {callback:xxx,showheader:xxx, themeColor:xxxxxx,type:"embed"}，json 格式对象

callback： 验证码页面关闭回调函数。用户验证之后，会调用该函数，传入json格式验证参数。

{ret:xxx,ticket:"xxx"}

ret=0 表示用户验证完成，业务可以校验 ticket；

ret=1 表示用户未验证验证码，此时没有 ticket 参数。

参数 ticket 需要提交给业务后台，具体填哪个字段参考后面后台 server 开发部分。

themeColor ：设置页面的主题色彩，值为 16 进制色彩，比如 ff572d。设置后页面里的按钮和图标会变成设置的颜色

showHeader
：显示验证码页面的 header (返回和帮助，只对手机页面有效)

false：不显示

type ：PC 端可选选项，配置验证码的样式。具体样式表现可以查看验证码官网

"point"：触发式（默认）

"embed"：嵌入式

"popup"：弹窗式

pos：设置弹框验证码的位置属性，该参数只对 PC 弹框验证码有效

absolute: 绝对定位

fixed：相对于浏览器窗口的绝对定位

static：静态定位

relative：相对定位

keepOpen：设置验证通过页面属性

false：验证通过刷新（默认）

lang：设置验证码语言类型

简体中文：2052（默认）

繁体中文：1028

英文：1033

要记得及时调用capDestroy()来销毁你创建的script标签，否则就会出现很多个script标签……

文档上说的是在调用capInit()之前调用capDestroy()，但是我试了一下，不好使，最后放在了回调里，无论验证成功还是用户没有验证，关闭了验证弹窗，都调用一下capDestroy()。

总结

以上所述是小编给大家介绍的在Vue项目中引入腾讯验证码服务的教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • vue实现验证码输入框组件
  • Vue中添加手机验证码组件功能操作方法
  • 简单实现vue验证码60秒倒计时功能
  • vue生成随机验证码的示例代码
  • 基于vue的短信验证码倒计时demo
  • Vue.js实现移动端短信验证码功能
  • Vue 短信验证码组件开发详解
赞 (0)

相关推荐

  • Vue 短信验证码组件开发详解

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js 自身不是一个全能框架--它只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 摘要: 1.该组件基于Vue 2.1.X版本: 1. Vue 组件代码如下: Vue.component('timerBtn

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

  • 简单实现vue验证码60秒倒计时功能

    本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''

  • vue生成随机验证码的示例代码

    vue生成随机验证码的示例代码

    本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"

  • vue实现验证码输入框组件

    vue实现验证码输入框组件

    先来看波完成效果图 需求 输入4位或6位短信验证码,输入完成后收起键盘 实现步骤 第一步 布局排版 <div class="security-code-wrap"> <label for="code"> <ul class="security-code-container"> <li class="field-wrap" v-for="(item, index) in num

  • 基于vue的短信验证码倒计时demo

    基于vue的短信验证码倒计时demo

    最近做了一个小的demo,分享给大家,在很多地方都能用到. 一般获取短信验证码的时候会用到这个demo: button里面包两个span标签,根据点击状态,显示不同的span,关键代码就是倒计时: <div id="example"> <button @click="send"> <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span> <span

  • Vue.js实现移动端短信验证码功能

    Vue.js实现移动端短信验证码功能

    现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框,如图所示 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框是循环出来的,代码如下: <div class="sms_input"> <div v-for="n in sms.numbers-1"><input v-if="sms.show[n-1]" disabled=&q

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

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

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue项目中引入noVNC远程桌面的方法

    1 .首先,先简单介绍一下概念. VNCServer 是一个为了满足分布式用户共享服务器资源,而在服务器开启的一项服务,对应的客户端软件有图形化客户端 VNCViewer,而 noVNC 则是 HTML5 VNC 客户端,它采用 HTML 5 WebSocket, Canvas 和 JavaScript 实现. noVNC 被普遍用在各大云计算.虚拟机控制面板中.noVNC 采用 WebSockets 实现,但是当前大多 VNC 服务器不支持 WebSocket,所以 noVNC 不能直连 VN

  • 在vue项目中引入高德地图及其UI组件的方法

    引入高德地图: 打开index.html,引用高德地图的JavaScript API: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的API key"></script> 在"key="这里添加你申请的key,key不需要加引号. 引入高德地图UI组件,只需要在上面代码后面再加一串代码: <script

  • vue项目中引入vue-datepicker插件的详解

    项目需求中有一个日期选择限制的功能点:今天之前不可选,周末不可选. 传统的input type='date无法做到,所以使用了这个插件来实现功能. 1.引入vue-datepicker loader:npm install vue-datepicker 2.引入moment loader:npm install moment --save 因为vue-datepicker是依赖vue和moment的,所以也应提前 引入moment: 3.在用到该插件的地方引入: import myDatepic

  • vue项目中引入Sass实例方法

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g,安装vue-cli脚手架,若是已经安装了,则不必再次安装,直接 跳过这一步.接下来执行命令行vue init webpack mypro(注:mypro是项目名). 接下来安装Sass依赖包,使用以下命令行: npm install sass-loader --save-dev npm instal

  • 在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.

  • 在vue项目中引入vue-beauty操作方法

    vue-beauty有丰富的vue组件库,使用vue-beauty方便项目的开发,下面介绍在vue项目中引入vue-beauty. 1.vue项目初始化 npm install --global vue-cl:全局安装vue脚手架vue init webpack my-projec:初始化cd my-project:进入目录npm install:安装依赖 2.安装vue-beauty 3.查看配置文件package.json,是否有vue-beauty组件的版本号 4.在main.js中引入

  • Vue项目中引入 ECharts

    Vue项目中引入 ECharts

    目录 1.安装 2.引入 3.使用 4.按需引入 ECharts 图表和组件 1.安装 使用如下命令通过 npm 安装 ECharts npm install echarts --save 2.引入 安装完成以后,可以将echarts全部引入,这样一来,我们可以在该页面使用echarts所有组件:引入代码如下: import * as echarts from "echarts"; 3.使用 引入完毕之后,我们可通过echarts提供的接口画出对应的图表,使用方法如下: <tem

  • VUE项目中引入JS文件的方法总结

    目录 1.在index.html页面使用script标签引入 2.在main.js中使用window.moduleName 使用 3.手动添加export 4. 使用import方式,把需要的js库中的方法挂载到全局 补充:Vue3如何引用全局JS文件 总结 在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,可以有如下方法实现: 1.在index.html页面使用script标签引入 当然也可以使用cdn的地址.这样引入后的内容是全局的,可以在所有地方使用. <!D

随机推荐