如何在Vue项目中引入腾讯验证码服务
什么是腾讯验证码?它长这个样子……?
最近公司项目要求引入腾讯云验证,要求是这样的:为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333…)
不多BB,开始吧!
先看文档的接口调用流程:
(文档地址:cloud.tencent.com/document/pr…)
总共分成几个小步骤:
- 后台去腾讯云获取一个JS地址;
- 后台通过接口传给前端;
- 前端依据JS地址去加载验证码;
- 验证成功后会得到一个ticket票据(就是一堆字符串),将其再传给后台;
- 后台验证ticket,如果通过,你就会收到短信(或邮件)验证码了。
后台的事不去管它,那我们前端都需要做什么呢?
首先在需要引入腾讯验证码的.vue组件内加入一个标签?:
<div id="TCaptcha" style="width:300px;height:40px;" ></div>
然后当你频繁多次调用发送短信的接口,直到触发了需要调用腾讯验证码时(这个判断是后台告诉你的,比如我们项目中接口传参的JSON中有个isShow的变量,如果等于1则要触发腾讯云验证了,默认状态下是0,就是不需要腾讯验证。具体情况问你们的后台去,手动滑稽)
上图是我们项目中实际的接口回调,可以看到回调中有个Js地址和businessId;
这个Js地址就是你去获取云验证的方式,你需要写一个方法,把这个Js动态添加到body标签内?:
参数src是调用获取验证码接口返回数据时,将Js地址传过来。
capInit这个函数是当你将Js引入进去后才会有的,否则报错,所以设置一个延迟(代码比较简陋,可以用promise)。
然后这个callback回调函数就是用户验证之后,会调用该函数,传入json格式验证参数。?
//回调函数:验证码页面关闭时回调
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对象,可以设置多个参数。?
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:验证通过刷新(默认)
true:保持显示,不刷新lang:设置验证码语言类型
简体中文:2052(默认)
繁体中文:1028
英文:1033
要记得及时调用capDestroy()来销毁你创建的script标签,否则就会出现很多个script标签……
文档上说的是在调用capInit()之前调用capDestroy(),但是我试了一下,不好使,最后放在了回调里,无论验证成功还是用户没有验证,关闭了验证弹窗,都调用一下capDestroy()。
腾讯验证码PC网页API地址:cloud.tencent.com/document/pr…
如果有问题,或者哪里说的不对,欢迎留言讨论~~
如何在Vue项目中引入腾讯验证码服务相关推荐
- 如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图(含vue项目创建教程)
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
- 如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法 第一种:/static/page.html 第二种:通过iframe嵌入 第一种:/static/page.html 在static或public文件夹下,新 ...
- 详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库: https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体 ...
- 如何在vue项目中引入video.js插件
借鉴了不少文章,照着来净报错,恼了自己给自己留一篇绝不报错的! 参考文章:https://www.jianshu.com/p/8b8023c7ed37 一.安装 $ npm install video ...
- 如何在 vue 项目中引入 html 文件
这里以 vue-cli3 为例子,在pubilc目录下引入html就行了 如果需要查看的可用下面的方法 1 window.open(`/ssh-terminal-template/index.html ...
- 如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求 思路 分析 实现 第一步:引入 第二步:介绍一下这个world是个啥. 第三步:调用 注意点(十分重要) 写在最后 功能需求 近日我接到了这么一个需求 ...
- 如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标 前言 iconfont的特色 官网注册 在项目中使用的方式 前言 今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
- vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
- 如何在vue项目中修改less变量,多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案 参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...
最新文章
- Mongodb数据分片的实现
- 多除了1次100的FM BAPI_CURRENCY_CONV_TO_INTERN_9
- RabbitMQ -- Hello world
- 教你如何解决JS/TS里特定String进行拆分然后遍历各个元素
- Java基础:什么是返回对象
- 不能从远程创建com+对象_链路追踪SkyWalking源码分析——Collector Remote远程通信服务...
- Python高性能编程
- 找出连续最长数字串python_在字符串中找出连续最长的数字串 | 学步园
- 计算机ppt制作培训心得,ppt培训心得体会总结范文
- 明解C语言第七章习题
- 医院信息化项目实施工作总结
- 10年软件测试行业经验教你如何写简历【绝对靠谱】
- viper4android 2.1,viper4android fx 2.2.1.1 调解
- 数据库系统原理与应用教程(081)—— MySQL 视图(View)的创建与使用
- win10虚拟机连接服务器失败怎么办,Win10虚拟机无法连接网络的解决方法教程
- 算法与数据结构-常用算法
- Java Spring MVC框架 VIII 之 Spring MVC拦截器
- 共享单车变天: 竞争尚未结束,哈罗已超摩拜ofo?
- 大叔c语言,中年大叔的 C Coupe
- 怎样解决PHP中文乱码问题