本公众号专注于技术领域，欢迎关注
滑动验证码相比于传统的图片验证码有了更强的安全性，对我们的网站保驾护航提供了跟好的防御措施，主要是加入了人机交互的设计模式，别看这一个小小的滑动，可不是一般平台能够搞出来的哟，很多都要借助第三方，目前大家看到的网站很多都加入了这个滑动验证码，想给自己的网站搞一个么，今天就来介绍一下这个玩法。
目录
- 滑块验证码样例
- 关于滑块验证码
- 开发准备
- 系统编码
- 附录
滑块验证码样例
关于滑块验证码
滑块验证码主要的作用是方便用户进行快捷验证操作，但是同时要合理的辨别到底是机器操作还是人工操作，这一点显得难度比较大，是属于人机识别的智能开发范畴，所以相对于之前的传统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 afs\Request\V20180112 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 Afs\AuthenticateSigRequest();
$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标识验证成功，前台点击登录就可以放行了，这些操作就是结合我们具体的业务场景灵活实现了。
今天的分享就到这里，喜欢的话给个转发关注吧！