騰訊滑動驗證 · php常用實例

1. 驗證碼申請當前應用應用名稱: 網站驗證碼產品域名: www.***.com 驗證碼 App ID 用于客戶端接入驗證碼服務 *** App Secret Key 用于服務器端校驗驗證碼票據的驗證密鑰，請妥善保密，請勿泄露給第三方。 ***** 2. 客戶端接入 a、在Head的標簽內最后加入以下代碼引入驗證JS文件（建議直接在html中引入） ```html <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script> ``` b、在你想要激活驗證碼的DOM元素（eg. button、div、span）內加入以下id及屬性 ```html      <button id="TencentCaptcha" data-appid="***" data-cbfn="callback" >驗證</button> ``` c、為驗證碼創建回調函數，注意函數名要與data-cbfn相同 ```javascript 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) // 票據 } } ``` 完成以上操作后，點擊激活驗證碼的元素，即可彈出驗證碼。 3. 服務器接入在驗證完成后，客戶端收到獲得一個驗證票據(ticket)。將票據上傳至服務器，并發送GET請求到下方接口可以校驗驗證碼的票據，判斷當次驗證是否成功。 URL: https://ssl.captcha.qq.com/ticket/verify |字段名 |描述| |-|-| |aid |(必填)*** |AppSecretKey| (必填) ***** |Ticket |(必填) 驗證碼客戶端驗證回調的票據 |Randstr| (必填) 驗證碼客戶端驗證回調的隨機串 |UserIP| (必填) 提交驗證的用戶的IP地址（eg: 10.127.10.2）|| 返回值 Json格式，eg：{response:1, evil_level:70, err_msg:""} |字段名| 描述| |-|-| |response |1:驗證成功，0:驗證失敗，100:AppSecretKey參數校驗錯誤[required] |evil_level |[0,100]，惡意等級[optional] |err_msg |驗證錯誤信息[optional]，查看詳細說明至此，驗證碼接入已完成，如需對驗證碼進行定制請往下閱讀詳細配置，更多配置項可訪問配置中心。附：前后端調用時序圖定制接入驗證碼會在全局注冊一個TencentCaptcha類，業務方可以使用這個類自行初始化驗證碼，并對驗證碼進行顯示或者隱藏。默認的，驗證碼的js（TCaptcha.js）在加載完成后會檢測頁面中是否存在id="TencentCaptcha"的元素，如果有則會自動將驗證碼的觸發事件綁定在該元素上。如不希望默認綁定請避免使用id="TencentCaptcha"的元素。構造函數 TencentCaptcha支持多種參數的重載。 1. 手動初始化 ```javascript new TencentCaptcha(appId, callback, options); ``` |參數|說明| |-|-| |appId|String, 申請的場景Id| |callback|Function, 回調函數| |options|Object, 更多配置參數, 詳見配置參數| 2. 綁定到一個元素 ```javascript new TencentCaptcha(element); ``` |參數|說明| |-|-| |element| HTMLElement, 驗證碼將綁定click事件到該元素上。該方式需要確保元素上有data-appid和data-cbfn屬性| 3. 綁定到一個元素 ```javascript new TencentCaptcha(element, appId, callback, options); ``` |參數|說明：| |-|-|-| |element |HTMLElement, 需要綁定click事件的元素| |appId |String, 申請的場景Id| |callback| Function, 回調函數| |options| Object, 更多配置參數, 詳見配置參數| 示例代碼 ```javascript // 直接生成一個驗證碼對象 var captcha1 = new TencentCaptcha('appid', function(res) {/* callback */}); captcha1.show(); // 顯示驗證碼 // 綁定一個元素并手動傳入場景Id和回調 new TencentCaptcha( document.getElementById('TencentCaptcha'), 'appid', function(res) {/* callback */}, { bizState: '自定義透傳參數' } ); // 綁定一個元素并自動識別場景id和回調 // 驗證碼會讀取dom上的`data-appid`和`data-cbfn`以及`data-biz-state`(可選)自動初始化 new TencentCaptcha(document.getElementById('TencentCaptcha')); ``` 回調內容前端驗證成功會驗證碼會調用業務傳入的回調函數，并在第一個參數中傳入回調結果。結果字段說明如下： |字段名 |值類型| 說明| |-|-|-| |ret| Int |驗證結果，0-驗證成功，2-用戶主動關閉驗證碼| |ticket| String |驗證成功的票據，當且僅當ret=0時ticket有值| |appid| String |場景Id| |bizState| Any |自定義透傳參數| 實例方法 TencentCaptcha的實例提供一些常用操作驗證碼的方法： |方法名 |說明 |傳入參數| 返回內容| |-|-|-|-| |show |顯示驗證碼 |無 |無| |destroy |隱藏驗證碼|無| 無| |getTicket| 獲取驗證碼驗證成功后的ticket |無| Object:{"appid":"","ticket":""}| * show與destroy可以反復調用配置參數 options提供以下配置參數： |配置名 |值類型 |說明| |-|-|-| |bizState |Any |自定義透傳參數，業務可用該字段傳遞少量數據，該字段的內容會被帶入callback回調的對象中|