尝试了一下午,弄成功了下阿里云的人机验证功能,感觉文档说得有点跳脱,做个记录。
现在的验证码越来越简单人性化,阿里云的人机验证结合了鼠标轨迹记录获取,点击触点分析等,使得原来需要劳心费神输文字点汉字的验证可以消停了。
缺点:不兼容ie8以下。不过这在大多数场景下不是个事。对于商业项目来说,除了政国企,这年头还在用ie67(xp系统)的人想必也不是目标客户。
注意:收费,1000次2块钱。流量包200万次3000块/年。次是指前后端搭好后配合验证一次。单前端点击不算一次。
1、aliyun.com 注册阿里云账号。支持淘宝账号登录。
2、搜下人机验证,先开通(不要钱),
再点击产品文档,可以看看说明。这里的文档看看流程图就行了,具体代码实际上各种key都没有填,会让人看得有点晕,可以直接跳过。
然后进入右上角的控制台,在最近使用的产品里选数据风控,就能进入人机验证的控制台。
可以点击新增配置建一个验证,智能验证、滑动验证等代码大同小异,但滑动支持ie8,智能验证、刮刮卡等支持ie9及以上。
我用的是智能验证。
新增了之后就是点击系统代码集成,里面提供php sdk下载,下载完解压放网站的特定目录记得路径就行了。
另外还自动生成填了一些特定key的前后端代码,复制下来:
这里要注意的是,sessionId,sig,token是在前端验证通过后,向阿里请求获得的,appKey、scene是上图人机验证控制台自带的,都要传入后台,
后台获得了这些后,加上一个客户端ip,就能完成验证。
后台php的两个重要key:阿里云accesskey id和secret是在阿里云RAM控制台获取,获取步骤查看:
<script>
window.NVC_Opt = {
appkey:'FFFF0N0000000',//appKEY,自动点击系统代码集成后,页面里生成的,每个配置不同,复制你自己的
scene:'ic_login',//这个是验证码类型,这里是智能验证
renderTo:'#sc',//放验证码的div id
trans: {"key1": "code0", "nvcCode":200},
elements: [
'//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
'//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
],
bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
bg_front: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC',
obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
upLang:{"cn":{
_ggk_guide: "请摁住鼠标左键,刮出两面盾牌",
_ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
_ggk_loading: "加载中",
_ggk_fail: ['呀,盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
_ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
_ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
_ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']
}
}
}
</script>
<script src="//g.alicdn.com/sd/nvc/1.1.112/guide.js"></script>
<script>
window.onload = function(){
window.DATA='';
var ic = new smartCaptcha({
renderTo: '#sc',
width: 300,
height: 42,
default_txt: '点击按钮开始智能验证',
success_txt: '验证成功',
fail_txt: '验证失败,请在此点击按钮刷新',
scaning_txt: '智能检测中',
success: function(data) {
//验证成功后返回的data,主要包含了sig、sessionId这两个重要的阿里返回的数据。
//下面是 我自己建的js,将返回的数据放到hidden状态下的input控件中,以便表单提交时传输。
$('#clicked').val('clicked');//加了个控件标记在前端判断是否验证成功
$('#sessionId').val(data.sessionId);//下面几个是要传到服务器的值。
$('#token').val(NVC_Opt.token);
$('#sig').val(data.sig);
$('#scene').val(NVC_Opt.scene)
},
fail: function(data) {
console.log('ic error');
}
});
ic.init();
}
</script>
<script src="//g.alicdn.com/sd/smartCaptcha/0.0.4/index.js"></script>
<script src="//g.alicdn.com/sd/quizCaptcha/0.0.1/index.js"></script>
<style>
#sc{margin: 0 auto}
</style>
<div id="sc"></div>
后端验证代码:
// check.php
use afs\Request\V20180112 as Afs;
//改为此php文件相对目录
include_once 'aliyun-php-sdk-afs-20180112/aliyun-php-sdk-core/Config.php';
//YOUR ACCESS_KEY、YOUR ACCESS_SECRET请替换成您的阿里云accesskey id和secret
//如何在RAM创建两个KEY ,访问 https://help.aliyun.com/document_detail/53045.html?spm=a2c4g.11186623.2.14.54706b68yMtDpx#concept-53045-zh
//注意这里的\DefaultProfile和\DefaultAcsClient,我用的框架,所以在文件首use了Afs,并且加了\才能访问到。用框架的童鞋可以参考下。
$iClientProfile = \DefaultProfile::getProfile("cn-hangzhou", "这两个key需要登录RAM控制台另外创建", "这两个key需要登录RAM控制台另外创建");
$client = new \DefaultAcsClient($iClientProfile);
\DefaultProfile::addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");
$request = new Afs\AuthenticateSigRequest();
//下面的几个从前端获取参数填$_POST['sessionId'],框架里填$this->post("sessionId")等接受从前端input控件传来的值。
$request->setSessionId($this->post("sessionId"));// 必填参数,从前端获取,不可更改,android和ios只传这个参数即可
$request->setToken($this->post('token'));// 必填参数,从前端获取,不可更改
$request->setSig($this->post('sig'));// 必填参数,从前端获取,不可更改
$request->setScene($this->post("scene"));//必填参数,从前端获取,不可更改
//=================================================
$request->setAppKey("FFFF0N00000000");//这个appKey和前端的一样即可。必填参数,后端填写
$request->setRemoteIp(get_ip());//必填参数,后端填写。php获取访问的ip,网上程序很多我是搬了discuz的。
$response = $client->getAcsResponse($request);//返回code 100表示验签通过,900表示验签失败
print_r($response->Code)
print_r($response);
if($response->Code=='100'){
print_r('验证通过');
} else{
print_r('服务器验证不通过'.$response->Msg);
}