驗證碼申請
當前應用
應用名稱: 網(wǎng)站驗證碼
產(chǎn)品域名: www.***.com
驗證碼 App ID
用于客戶端接入驗證碼服務

---

App Secret Key
用于服務器端校驗驗證碼票據(jù)的驗證密鑰，請妥善保密，請勿泄露給第三方。

---

客戶端接入
a、在Head的標簽內(nèi)最后加入以下代碼引入驗證JS文件（建議直接在html中引入）

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

b、在你想要激活驗證碼的DOM元素（eg. button、div、span）內(nèi)加入以下id及屬性

<!--點擊此元素會自動激活驗證碼--> <!--id : 元素的id(必須)--> <!--data-appid : AppID(必須)--> <!--data-cbfn : 回調(diào)函數(shù)名(必須)--> <!--data-biz-state : 業(yè)務自定義透傳參數(shù)(可選)--> <button id="TencentCaptcha"data-appid="***"data-cbfn="callback" >驗證</button>

c、為驗證碼創(chuàng)建回調(diào)函數(shù)，注意函數(shù)名要與data-cbfn相同

window.callback = function(res){console.log(res)// res（未通過驗證）= {ret: 1, ticket: null}// res（驗證成功） = {ret: 0, ticket: "String", randstr: "String"}if(res.ret === 0){alert(res.ticket) // 票據(jù)} }

完成以上操作后，點擊激活驗證碼的元素，即可彈出驗證碼。

服務器接入
在驗證完成后，客戶端收到獲得一個驗證票據(jù)(ticket)。將票據(jù)上傳至服務器，并發(fā)送GET請求到下方接口可以校驗驗證碼的票據(jù)，判斷當次驗證是否成功。

URL: https://ssl.captcha.qq.com/ticket/verify

字段名描述

aid	(必填)***
AppSecretKey	(必填) *****
Ticket	(必填) 驗證碼客戶端驗證回調(diào)的票據(jù)
Randstr	(必填) 驗證碼客戶端驗證回調(diào)的隨機串
UserIP	(必填) 提交驗證的用戶的IP地址（eg: 10.127.10.2）

返回值
Json格式，eg：{response:1, evil_level:70, err_msg:""}

字段名描述

response	1:驗證成功，0:驗證失敗，100:AppSecretKey參數(shù)校驗錯誤[required]
evil_level	[0,100]，惡意等級[optional]
err_msg	驗證錯誤信息[optional]，查看詳細說明

至此，驗證碼接入已完成，如需對驗證碼進行定制請往下閱讀詳細配置，更多配置項可訪問配置中心。
附：前后端調(diào)用時序圖

定制接入
驗證碼會在全局注冊一個TencentCaptcha類，業(yè)務方可以使用這個類自行初始化驗證碼，并對驗證碼進行顯示或者隱藏。
默認的，驗證碼的js（TCaptcha.js）在加載完成后會檢測頁面中是否存在id="TencentCaptcha"的元素，如果有則會自動將驗證碼的觸發(fā)事件綁定在該元素上。如不希望默認綁定請避免使用id="TencentCaptcha"的元素。
構造函數(shù)
TencentCaptcha支持多種參數(shù)的重載。

手動初始化

new TencentCaptcha(appId, callback, options); 參數(shù)說明

appId	String, 申請的場景Id
callback	Function, 回調(diào)函數(shù)
options	Object, 更多配置參數(shù), 詳見配置參數(shù)

綁定到一個元素

new TencentCaptcha(element); 參數(shù)說明

element	HTMLElement, 驗證碼將綁定click事件到該元素上。該方式需要確保元素上有data-appid和data-cbfn屬性

綁定到一個元素

new TencentCaptcha(element, appId, callback, options); 參數(shù)說明：

element	HTMLElement, 需要綁定click事件的元素
appId	String, 申請的場景Id
callback	Function, 回調(diào)函數(shù)
options	Object, 更多配置參數(shù), 詳見配置參數(shù)

示例代碼

// 直接生成一個驗證碼對象 var captcha1 = new TencentCaptcha('appid', function(res) {/* callback */}); captcha1.show(); // 顯示驗證碼// 綁定一個元素并手動傳入場景Id和回調(diào) new TencentCaptcha(document.getElementById('TencentCaptcha'),'appid',function(res) {/* callback */},{ bizState: '自定義透傳參數(shù)' } );// 綁定一個元素并自動識別場景id和回調(diào) // 驗證碼會讀取dom上的`data-appid`和`data-cbfn`以及`data-biz-state`(可選)自動初始化 new TencentCaptcha(document.getElementById('TencentCaptcha'));

回調(diào)內(nèi)容
前端驗證成功會驗證碼會調(diào)用業(yè)務傳入的回調(diào)函數(shù)，并在第一個參數(shù)中傳入回調(diào)結果。結果字段說明如下：

字段名值類型說明

ret	Int	驗證結果，0-驗證成功，2-用戶主動關閉驗證碼
ticket	String	驗證成功的票據(jù)，當且僅當ret=0時ticket有值
appid	String	場景Id
bizState	Any	自定義透傳參數(shù)

實例方法
TencentCaptcha的實例提供一些常用操作驗證碼的方法：

方法名說明傳入?yún)?shù)返回內(nèi)容

show	顯示驗證碼	無	無
destroy	隱藏驗證碼	無	無
getTicket	獲取驗證碼驗證成功后的ticket	無	Object:{“appid”:"",“ticket”:""}

• show與destroy可以反復調(diào)用
  配置參數(shù)
  options提供以下配置參數(shù)：

配置名值類型說明

bizState	Any	自定義透傳參數(shù)，業(yè)務可用該字段傳遞少量數(shù)據(jù)，該字段的內(nèi)容會被帶入callback回調(diào)的對象中

---

程序員交流qq群：782974737 點擊加入

總結

以上是生活随笔為你收集整理的腾讯滑动验证的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。