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


Posted in Javascript onApril 03, 2018

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

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

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

不多BB,开始吧!

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

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

(文档地址: 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,就是不需要腾讯验证。具体情况问你们的后台去,手动滑稽)

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

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

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

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

参数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项目中引入腾讯验证码服务的教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
详解vue过滤器在v2.0版本用法
Jun 01 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
使用Angular CLI生成路由的方法
Mar 24 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
详解如何用babel转换es6的class语法
Apr 03 #Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 #Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 #Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 #Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 #Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 #Javascript
vue 组件中slot插口的具体用法
Apr 03 #Javascript
You might like
咖啡的种类和口感
2021/03/03 新手入门
PHP中几个常用的魔术常量
2012/02/23 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
python opencv之SURF算法示例
2018/02/24 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
解决Mac下使用python的坑
2019/08/13 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python 函数中的参数类型
2020/02/11 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
职业教育毕业生求职信
2013/11/09 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
户籍证明模板
2014/09/28 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
Python面试不修改数组找出重复的数字
2022/05/20 Python