接入腾讯 验证码
文档地址:https://cloud.tencent.com/document/product/1110/36839
首先需要在控制台建立appid什么的:
注册完成后,您可以在控制台的 基础配置 中查看 AppID 以及 AppSecret。
快速接入
在 Head 标签的最后加入以下代码,引入验证 JS 文件(建议直接在 HTML 中引入)。
<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
2.在您需要激活验证码的 DOM 元素(button、div、span)内加入以下 ID 及属性。
<!--点击此元素会自动激活验证码--> <!--id : 元素的 ID (必须)--> <!--data-appid : AppID(必须)--> <!--data-cbfn : 回调函数名(必须)--> <!--data-biz-state : 业务自定义透传参数(可选)--> <button id="TencentCaptcha" data-appid="appId" data-cbfn="callback" type="button" >验证</button>
3.为验证码创建回调函数。
注意:
函数名要与 data-cbfn 相同。
window.callback = function(res){ console.log(res) // res(用户主动关闭验证码)= {ret: 2, ticket: null} // res(验证成功) = {ret: 0, ticket: "String", randstr: "String"} if(res.ret === 0){ alert(res.ticket) // 票据 } }
下面是实际应用:
我是将这个滑块验证的代码封装到工具js中了,方便统一调用:
/** * * @param {*} captchaId //appId * @param {*} callback //验证成功回调 */ function tencentCaptchaVerify(captchaId,callback){ let langtion = 'zh-hk'; let appId = captchaId?captchaId:'2069772036'; //腾讯滑块验证码appid 默认为登录验证 //生成一个滑块验证码对象 var captcha = new TencentCaptcha(appId, function(res) { callback(res); captcha.destroy();//隐藏验证码 没有这一句好像也会自动消失 captcha=null; }); // 滑块多语言调用 captcha.initOpts.forceLang = langtion; captcha.langFun(); // 滑块显示 captcha.show(); }
参数说明:
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标签
然后在项目中就可以这样来用了:
tools.tencentCaptchaVerify('xxxxx',res=>{ if(res.ret===0){ self.getPhoneVerifyCode({mobile:self.loginByPhoneObj.mobile,type:1});//验证成功后发送验证码 执行一些自定义逻辑 } });
很好用:
效果图:
。