如何在Vue项目中引入腾讯验证码服务 - 行业资讯 - 肥雀云

　　介绍

今天就跟大家聊聊有关如何在Vue项目中引入腾讯验证码服务,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

步骤:

<李>

后台去腾讯云获取一个JS地址;

<李>

后台通过接口传给前端;

<李>

前端依据JS地址去加载验证码;

<李>

验证成功后会得到一个机票票据(就是一堆字符串),将其再传给后台;

<李>

后台验证票,如果通过,你就会收到短信(或邮件)验证码了。

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

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

& lt; div id=癟Captcha",在& lt;/div>

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

如何在Vue项目中引入腾讯验证码服务”>, 上图是我们项目中实际的接口回调,可以看到回调中有个Js地址和businessId; 这个Js地址就是你去获取云验证的方式,你需要写一个方法,把这个Js动态添加到身体标签内:point_down:: <img src=

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

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

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

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

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

最后再说(复制)一下<代码> capInit (iframe_div、期权)这个函数,选择是一个Json对象,可以设置多个参数。point_down:

1。iframe_div(必填):嵌入验证码iframe的元素。

2。选择:{回调:xxx, showheader: xxx, themeColor: xxxxxx,类型:“embed"}, json格式对象

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

{ret: xxx,票:“xxx"}

ret=0表示用户验证完成,业务可以校验票;

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

参数票需要提交给业务后台,具体填哪个字段参考后面后台服务器开发部分。

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

showheader
:显示验证码页面的头(返回和帮助,只对手机页面有效)

错误:不显示

类型:PC端可选选项,配置验证码的样式。具体样式表现可以查看验证码官网

“point":触发式(默认)

“embed":嵌入式

“popup":弹窗式

pos:设置弹框验证码的位置属性,该参数只对电脑弹框验证码有效

绝对:绝对定位

固定:相对于浏览器窗口的绝对定位

静态:静态定位

相对:相对定位

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

假:验证通过刷新(默认)

朗:设置验证码语言类型

简体中文:2052(默认)

繁体中文:1028

英文:1033

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

文档上说的是在调用capInit()之前调用capDestroy(),但是我试了一下,不好使,最后放在了回调里,无论验证成功还是用户没有验证,关闭了验证弹窗,都调用一下capDestroy ()。
如何在Vue项目中引入腾讯验证码服务