接入騰訊 驗證碼

文檔地址：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});//驗證成功后發送驗證碼  執行一些自定義邏輯
                }
            });

很好用：

效果圖：

 

 

。