您当前的位置:首页 > 电脑百科 > 站长技术 > 网站

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

时间:2019-09-27 09:29:15  来源:  作者:

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

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

 

目录

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

滑块验证码样例

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

 

关于滑块验证码

滑块验证码主要的作用是方便用户进行快捷验证操作,但是同时要合理的辨别到底是机器操作还是人工操作,这一点显得难度比较大,是属于人机识别的智能开发范畴,所以相对于之前的传统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");// 必填参数,从前端获取,不可更改,AndroidIOS只传这个参数即可
$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标识验证成功,前台点击登录就可以放行了,这些操作就是结合我们具体的业务场景灵活实现了。

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

 



Tags:滑块验证码   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
开头语: 除非是很简单的参数能够解决滑块问题或者追求效率的业务,否则的话,我还是会selenium来解决,并且接下来的验证码模式的话不需要使用到原图进行比较!!我发现很多网站都是基...【详细内容】
2020-09-25  Tags: 滑块验证码  点击:(167)  评论:(0)  加入收藏
前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。作者:MingyueyixiPS:如有需要Python学习资料的...【详细内容】
2020-06-18  Tags: 滑块验证码  点击:(34)  评论:(0)  加入收藏
滑动验证码相比于传统的图片验证码有了更强的安全性,对我们的网站保驾护航提供了跟好的防御措施,主要是加入了人机交互的设计模式,别看这一个小小的滑动,可不是一般平台能够搞出...【详细内容】
2019-09-27  Tags: 滑块验证码  点击:(377)  评论:(0)  加入收藏
▌简易百科推荐
今天我们来聊一下北京地区的《ICP经营许可证》有多好办,现在的互联网上提供的商机越来越多,增值电信业务十分火爆,企业通过互联网突破地域的限制,把公司产品卖到更远的地方,同时...【详细内容】
2021-12-17  梦想理应飞翔Yy    Tags:《ICP经营许可证》   点击:(12)  评论:(0)  加入收藏
转自: https://blog.kermsite.com/p/blog-intro/由于格式问题,部分链接、表格可能会失效,若失效请访问原文此专题将详细介绍如何从零开始搭建一个个人博客。Dec 01, 2021阅读时...【详细内容】
2021-12-17  LaLiLi    Tags:个人博客   点击:(7)  评论:(0)  加入收藏
SP证是第二类增值电信业务经营许可证的简称。分为全网SP证和地网SP证。申请经营许可证是在工信部申请,全网SP经营许可证的有效期是5年,全网SP许可证在工信部办理全网SP续期,地...【详细内容】
2021-11-01  s陳述    Tags:sp证书   点击:(39)  评论:(0)  加入收藏
现在还有许多人不知道EDI许可证是什么东西今天我就来给大家讲解一下.EDI许可证就是一种增值电信业务经营许可证。是针对在线数据处理和交易处理业务需求的专业资格证书。 《...【详细内容】
2021-10-28  soberXx    Tags:edi许可证   点击:(75)  评论:(0)  加入收藏
元素的化学概念,如周期表中的化学元素,一切物质都是由元素构成的。对程序员而言,网站建设制作就是代码构成网站。企业网站设计者也收集了各种各样的元素,但并非所有元素都需要运...【详细内容】
2021-10-26  南宁云尚网络    Tags:企业网站   点击:(40)  评论:(0)  加入收藏
在运营网站的过程中,有一件不可忽略的事情。那就是网站上线之前需要完成 ICP 备案。说到这里,很多朋友就提出疑问了~&middot; 什么是 ICP 备案呢?&middot; ICP 备案需要哪些材...【详细内容】
2021-10-22  启测云    Tags:ICP备案   点击:(46)  评论:(0)  加入收藏
最近有朋友问我,我公司有外资就不能申请ICP许可证了么?外资的定义是什么?其实是可以的,但有一个特定条件必须满足,外资公司是指公司有外资股东,比如香港、加拿大、美国、韩国等等,...【详细内容】
2021-10-21  小白速看Z    Tags:ICP   点击:(51)  评论:(0)  加入收藏
自互联网出现以来,超文本传输协议http协议被广泛用于在Web浏览器和网站服务器之间传递信息,但随着互联网的发展,另一种协议&mdash;&mdash;https出现,并与http一同服务于这个互联...【详细内容】
2021-10-20  我是FEIYA    Tags:https   点击:(44)  评论:(0)  加入收藏
Grafana Loki 是一个日志聚合工具,它是功能齐全的日志堆栈的核心。图片来自 包图网先看看结果有多轻量吧: Loki 是一个为有效保存日志数据而优化的数据存储。日志数据的高效索...【详细内容】
2021-09-14    51CTO  Tags:Loki日志   点击:(97)  评论:(0)  加入收藏
背景最近做微信小程序开发比较多,大家知道线上微信小程序为了安全起见,要求后端通信协议必须是HTTPS,这就要求需要安装证书。为了测试预发布线上环境,特地买了个最便宜的域名,为...【详细内容】
2021-09-14  小李子说程序    Tags:HTTPS证书   点击:(125)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条