接入腾讯验证码

文档地址：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});//验证成功后发送验证码  执行一些自定义逻辑
                }
            });

很好用：

效果图：