滑块验证码 · 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> ```