滑動驗證碼相比于傳統的圖片驗證碼有了更強的安全性，對我們的網站保駕護航提供了跟好的防御措施，主要是加入了人機交互的設計模式，別看這一個小小的滑動，可不是一般平臺能夠搞出來的喲，很多都要借助第三方，目前大家看到的網站很多都加入了這個滑動驗證碼，想給自己的網站搞一個么，今天就來介紹一下這個玩法。
目錄
- 滑塊驗證碼樣例
- 關于滑塊驗證碼
- 開發準備
- 系統編碼
- 附錄
滑塊驗證碼樣例
關于滑塊驗證碼
滑塊驗證碼主要的作用是方便用戶進行快捷驗證操作，但是同時要合理的辨別到底是機器操作還是人工操作，這一點顯得難度比較大，是屬于人機識別的智能開發范疇，所以相對于之前的傳統4位或者6位圖片驗證碼來說，開發起來顯得更加困難，所以一般來說都會接入一些第三方的Api來輔助開發人員進行滑塊識別和驗證。主要是根據用戶在頁面內的一些鼠標點擊，停留，滑動距離等信息，綜合來斷定這個滑動操作是否是人為發起的。本文將結合阿里云的滑塊驗證技術來實現網站安全登錄操作。
開發準備
進入阿里云的云盾·數據風控·人機識別，配置管理里面添加對應的服務
可以在系統集成板塊找到你想要的代碼
根據語言需求下載對應的sdk
系統編碼
將上面圖片中的代碼放到一個定義的html里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 國內使用 -->
<script type="text/JAVAscript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
<!-- 若您的主要用戶來源于海外，請替換使用下面的js資源 -->
<!-- <script type="text/JavaScript" charset="utf-8" src="//aeis.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script> -->
</head>
<body>
<div id="your-dom-id" class="nc-container"></div> <!--No-Captcha渲染的位置，其中 class 中必須包含 nc-container-->
<!--構建數據傳遞到后臺-->
<div class="container">
<form action="html.php" method="post">
<input type='hidden' id='nc_token' name='nc_token'/>
<input type='hidden' id='csessionid' name='csessionid'/>
<input type='hidden' id='scene' name='scene'/>
<input type='hidden' id='sig' name='sig'/>
<div class="ln">
<input type="submit" value="提交">
</div>
</form>
</div>
<script type="text/javascript">
var nc_token = ["CF_App_1", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt =
{
renderTo: "#your-dom-id",
appkey: "CF_APP_1",
scene: "register",
token: nc_token,
customWidth: 300,
trans:{"key1":"code0"},
elementID: ["usernameID"],
is_Opt: 0,
language: "cn",
isEnabled: true,
timeout: 3000,
times:5,
apimap: {
// 'analyze': '//a.com/nocaptcha/analyze.jsonp',
// 'get_captcha': '//b.com/get_captcha/ver3',
// 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
// 'get_img': '//c.com/get_img',
// 'checkcode': '//d.com/captcha/checkcode.jsonp',
// 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
// 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
// 'umid_serUrl': 'https://g.com/service/um.json'
},
callback: function (data) {
window.console && console.log(nc_token)
window.console && console.log(data.csessionid)
window.console && console.log(data.sig)
//組裝數據到后臺
document.getElementById('nc_token').value = nc_token;
document.getElementById('csessionid').value = data.csessionid;
document.getElementById('sig').value = data.sig;
}
}
var nc = new noCaptcha(NC_Opt)
nc.upLang('cn', {
_startTEXT: "請按住滑塊，拖動到最右邊",
_yesTEXT: "驗證通過",
_error300: "哎呀，出錯了，點擊<a href="javascript:__nc.reset()">刷新</a>再來一次",
_errorNetwork: "網絡不給力，請<a href="javascript:__nc.reset()">點擊刷新</a>",
})
</script>
</body>
</html>
以PHP語言為例獲取參數并驗證。
<?php
include_once './aliyun-php-sdk-core/Config.php';
use afsRequestV20180112 as Afs;
//YOUR ACCESS_KEY、YOUR ACCESS_SECRET請替換成您的阿里云accesskey id和secret ，這里從阿里云控制臺的個人中心下面去獲取
$iClientProfile = DefaultProfile::getProfile("cn-hangzhou", "YOUR ACCESSKEY", "YOUR ACCESS_SECRET");
$client = new DefaultAcsClient($iClientProfile);
DefaultProfile::addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");
$request = new AfsAuthenticateSigRequest();
$request->setSessionId("xxx");// 必填參數，從前端獲取，不可更改，Android和IOS只傳這個參數即可
$request->setToken("xxx");// 必填參數，從前端獲取，不可更改
$request->setSig("xxx");// 必填參數，從前端獲取，不可更改
$request->setScene("xxx");// 必填參數，從前端獲取，不可更改
$request->setAppKey("xxx");//必填參數，后端填寫，和前端的AppKey保持一致
$request->setRemoteIp("xxx");//必填參數，后端填寫
$response = $client->getAcsResponse($request);//返回code 100表示驗簽通過，900表示驗簽失敗
print_r($response);
瀏覽器輸出結果，下面結果表示驗證成功，現在一般來說就可以創建一個session標識驗證成功，前臺點擊登錄就可以放行了，這些操作就是結合我們具體的業務場景靈活實現了。
