在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 相关文章推荐
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
javascript常用的方法分享
Jul 01 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
js实现显示手机号码效果
Mar 09 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
Vue formData实现图片上传
Aug 20 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
详解如何用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
使用adodb lite解决问题
2006/12/31 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
Javascript 布尔型分析
2008/12/22 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python list删除元素时要注意的坑点分享
2018/04/18 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
python如何构建mock接口服务
2021/01/28 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
业务内勤岗位职责
2015/04/13 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
学前教育见习总结
2015/06/23 职场文书
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript