智能验证码 阿里云人机验证的使用(PHP)

尝试了一下午,弄成功了下阿里云的人机验证功能,感觉文档说得有点跳脱,做个记录。

现在的验证码越来越简单人性化,阿里云的人机验证结合了鼠标轨迹记录获取,点击触点分析等,使得原来需要劳心费神输文字点汉字的验证可以消停了。

智能验证码 阿里云人机验证的使用(PHP)插图智能验证码 阿里云人机验证的使用(PHP)插图(1)

缺点:不兼容ie8以下。不过这在大多数场景下不是个事。对于商业项目来说,除了政国企,这年头还在用ie67(xp系统)的人想必也不是目标客户。

注意:收费,1000次2块钱。流量包200万次3000块/年。次是指前后端搭好后配合验证一次。单前端点击不算一次。

1、aliyun.com 注册阿里云账号。支持淘宝账号登录。

2、搜下人机验证,先开通(不要钱),

智能验证码 阿里云人机验证的使用(PHP)插图(2)

再点击产品文档,可以看看说明。这里的文档看看流程图就行了,具体代码实际上各种key都没有填,会让人看得有点晕,可以直接跳过。

然后进入右上角的控制台,在最近使用的产品里选数据风控,就能进入人机验证的控制台。

智能验证码 阿里云人机验证的使用(PHP)插图(3)

 

可以点击新增配置建一个验证,智能验证、滑动验证等代码大同小异,但滑动支持ie8,智能验证、刮刮卡等支持ie9及以上。

我用的是智能验证。

 

新增了之后就是点击系统代码集成,里面提供php sdk下载,下载完解压放网站的特定目录记得路径就行了。

另外还自动生成填了一些特定key的前后端代码,复制下来:

这里要注意的是,sessionId,sig,token是在前端验证通过后,向阿里请求获得的,appKey、scene是上图人机验证控制台自带的,都要传入后台,

后台获得了这些后,加上一个客户端ip,就能完成验证。

后台php的两个重要key:阿里云accesskey id和secret是在阿里云RAM控制台获取,获取步骤查看:

https://help.aliyun.com/document_detail/53045.html?spm=a2c4g.11186623.2.14.54706b68yMtDpx#concept-53045-zh

<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);
}

 

没有账号? 忘记密码?

社交账号快速登录