在Vue项目中引入腾讯验证码服务的教程
什么是腾讯验证码?它长这个样子……:point_down:
最近公司项目要求引入腾讯云验证,要求是这样的: 为了防止别人恶意刷短信验证码,当用户短时间内多次获取验证码的时候,需要调用腾讯验证码,验证成功后会继续自动发送验证码 ,刚开始的我听的一脸蒙蔽,网上搜索也没有多少相关的文章,然而现在我接通啦,发现是很简单点事(或许就是因为太简单了所以没有人写2333…)
不多BB,开始吧!
先看文档的接口调用流程:
(文档地址: cloud.tencent.com/document/pr… )
总共分成几个小步骤:
- 后台去腾讯云获取一个JS地址;
- 后台通过接口传给前端;
- 前端依据JS地址去加载验证码;
- 验证成功后会得到一个ticket票据(就是一堆字符串),将其再传给后台;
- 后台验证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项目中引入腾讯验证码服务的教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- Java并发学习之线程状态及Thread常用方法详解
- Java并发学习之四种线程创建方式的实现与对比
- Google protocol buffer简介
- Java反射的使用姿势一览
- [一对一讲什么] 之 测完了接口、搞好了目录,然后做啥?
- Java容器篇小结之List自问自答
- android断点下载
- [一对一讲什么] 之 什么叫切图?
- SpringMVC统一异常处理
- React Native开发之调试
- JavaWeb三大组件之Filter学习详解
- JavaWeb三大组件之Servlet学习
- Android App瘦身实战
- [先行者周末课程] 日历组件的开发思路讲解&&日历组件在实际工作中的使用方式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在 Visual Basic .NET 或 JScript 代码中使用早期绑定
- 腾讯云TKE-GPU案例: TensorFlow 在TKE中的使用
- 使用pyppeteer 下载chromium 报错 或速度慢
- layui数据表格自定义每页条数limit设置
- dotnet OpenXML 幻灯片 PPTX 的 Slide Id 和页面序号的关系
- springboot 国际化
- Windows/Android/iOS全平台支持的视频播放器EasyPlayerPro,iOS版播放无音频问题如何解决?
- java之springboot之快速入门(一)- maven方式创建项目
- java之springboot之快速入门-Spring Initializr方式创建项目
- springboot之Web综合开发
- springboot之mybatis
- springboot之mybatis多数据源最简解决方案
- 蓝桥杯突击复习准备——部分算法汇总
- 小解c# foreach原理
- 多包依赖管理--Lerna