滑塊驗證碼 · API無憂接口文檔

# 滑塊驗證碼 ## 接入說明 ### 步驟1：動態引入驗證碼 JS Web 頁面需動態引入驗證碼 JS，在業務需要驗證時，喚起驗證碼進行驗證。 ```  <script src="http://libs.kis6.com/js/capter/stable.js"></script> ``` >[info] 注意：必須動態引入驗證碼 JS。如使用本地緩存，或通過其他手段規避動態加載，會導致驗證碼無法正常更新，對抗能力無法保證，甚至引起誤攔截。 ### 步驟2：設置發起驗證碼的按鈕ID ```  <button id="CaptchaId" type="button" class="btn btn-primary">發起驗證按鈕</button> ``` ### 步驟3：在回調函數中發起后端驗證 ~~~ <script src="http://libs.kis6.com/js/jquery/1.8.3.min.js"></script> <script> // 定義回調函數 function callback(res) { // 第一個參數傳入回調結果，結果如下： // ret Int 驗證結果，0：驗證成功。2：用戶主動關閉驗證碼。 // ticket String 驗證成功的票據，當且僅當 ret = 0 時 ticket 有值。 // randstr String 本次驗證的隨機串，后續票據校驗時需傳遞該參數。 console.log('callback:', res); // res（用戶主動關閉驗證碼）= {ret: 2, ticket: null} // res（驗證成功） = {ret: 0, ticket: "String", randstr: "String"} // res（請求驗證碼發生錯誤） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"} // 此處代碼僅為驗證結果的展示示例，真實業務接入，建議基于ticket和errorCode情況做不同的業務處理 if (res.ret === 0) { // 復制結果至剪切板 var str = '【randstr】->【' + res.randstr + '】【ticket】->【' + res.ticket + '】'; var ipt = document.createElement('input'); ipt.value = str; document.body.appendChild(ipt); ipt.select(); document.execCommand("Copy"); document.body.removeChild(ipt); alert('1. 返回結果（randstr、ticket）已復制到剪切板，ctrl+v 查看。\n2. 打開瀏覽器控制臺，查看完整返回結果。'); if($('#appcode').val().length!=32){ alert('APPCODE不正確，請重新輸入'); return false; } //前端用戶滑動成功，傳入后端進行安全驗證 $.ajax({ type: "GET", url:"http://capter.market.alicloudapi.com/", dataType: "json", data: {"Randstr":res.randstr,"Ticket":res.ticket},//接口的參數 headers : {'Authorization':'APPCODE '+$('#appcode').val() }, success: function(data){ //獲取到數據，打印到控制臺 console.log(data); if(data.response===1){ alert('后端驗證成功'); }else{ alert('后端驗證失敗，原因為：'+data.err_msg); } }, error: function(data){ console.log(data); } , }); } } </script> ~~~ ## 代碼示例以下代碼示例，單擊**驗證**，激活驗證碼，并彈窗展示驗證結果。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滑動驗證碼前端接入示例</title> <link rel="stylesheet" href="http://libs.kis6.com/css/bootstrap/3.3.4.min.css">  <script src="http://libs.kis6.com/js/capter/stable.js"></script> </head> <body> <div class="container" style="margin-top:9%;"> <div class="jumbotron"> <div class="panel panel-success"> <div class="panel-heading"> <h2>滑動驗證碼前端接入示例</h2> <p>可直接使用本頁源代碼</p> <p> 填入appcode<input name="appcode" id="appcode" type="text" style="min-width:320px;" class=input> <a href="https://market.aliyun.com/products/57124001/cmapi00056930.html" target="_blank">如何獲取?</a> </p>  <button id="CaptchaId" type="button" class="btn btn-primary">發起驗證按鈕</button> <p id="output" name="Word" ></p> </div> </div> </body> <script src="http://libs.kis6.com/js/jquery/1.8.3.min.js"></script> <script> // 定義回調函數 function callback(res) { // 第一個參數傳入回調結果，結果如下： // ret Int 驗證結果，0：驗證成功。2：用戶主動關閉驗證碼。 // ticket String 驗證成功的票據，當且僅當 ret = 0 時 ticket 有值。 // randstr String 本次驗證的隨機串，后續票據校驗時需傳遞該參數。 console.log('callback:', res); // res（用戶主動關閉驗證碼）= {ret: 2, ticket: null} // res（驗證成功） = {ret: 0, ticket: "String", randstr: "String"} // res（請求驗證碼發生錯誤） = {ret: 0, ticket: "String", randstr: "String", errorCode: Number, errorMessage: "String"} // 此處代碼僅為驗證結果的展示示例，真實業務接入，建議基于ticket和errorCode情況做不同的業務處理 if (res.ret === 0) { // 復制結果至剪切板 var str = '【randstr】->【' + res.randstr + '】【ticket】->【' + res.ticket + '】'; var ipt = document.createElement('input'); ipt.value = str; document.body.appendChild(ipt); ipt.select(); document.execCommand("Copy"); document.body.removeChild(ipt); alert('1. 返回結果（randstr、ticket）已復制到剪切板，ctrl+v 查看。\n2. 打開瀏覽器控制臺，查看完整返回結果。'); if($('#appcode').val().length!=32){ alert('APPCODE不正確，請重新輸入'); return false; } //前端用戶滑動成功，傳入后端進行安全驗證 $.ajax({ type: "GET", url:"http://capter.market.alicloudapi.com/", dataType: "json", data: {"Randstr":res.randstr,"Ticket":res.ticket},//接口的參數 headers : {'Authorization':'APPCODE '+$('#appcode').val() }, success: function(data){ //獲取到數據，打印到控制臺 console.log(data); if(data.response===1){ alert('后端驗證成功'); }else{ alert('后端驗證失敗，原因為：'+data.err_msg); } }, error: function(data){ console.log(data); } , }); } } </script> </html> ```