网站引入阿里云滑块验证码实现人机交互教程 _滑块验证码

滑动验证码相比于传统的图片验证码有了更强的安全性，对我们的网站保驾护航提供了跟好的防御措施，主要是加入了人机交互的设计模式，别看这一个小小的滑动，可不是一般平台能够搞出来的哟，很多都要借助第三方，目前大家看到的网站很多都加入了这个滑动验证码，想给自己的网站搞一个么，今天就来介绍一下这个玩法。

文章插图

目录

滑块验证码样例
关于滑块验证码
开发准备
系统编码
附录

滑块验证码样例

文章插图

关于滑块验证码滑块验证码主要的作用是方便用户进行快捷验证操作，但是同时要合理的辨别到底是机器操作还是人工操作，这一点显得难度比较大，是属于人机识别的智能开发范畴，所以相对于之前的传统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>   </head> <body> <div id="your-dom-id" class="nc-container"></div>   <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>