PHP结合阿里云实现网站滑块验证码的具体实例

爱被打了一巴掌 2022-05-14 15:19 151阅读 0赞

### 目录 ###

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

## 滑块验证码样例 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70]

## 关于滑块验证码 ##

滑块验证码主要的作用是方便用户进行快捷验证操作，但是同时要合理的辨别到底是机器操作还是人工操作，这一点显得难度比较大，是属于人机识别的智能开发范畴，所以相对于之前的传统4位或者6位图片验证码来说，开发起来显得更加困难，所以一般来说都会接入一些第三方的Api来辅助开发人员进行滑块识别和验证。主要是根据用户在页面内的一些鼠标点击，停留，滑动距离等信息，综合来断定这个滑动操作是否是人为发起的。本文将结合阿里云的滑块验证技术来实现网站安全登录操作。

## 开发准备 ##

1.  进入阿里云的云盾·数据风控·人机识别，配置管理里面添加对应的服务  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70 1]
2.  可以在系统集成板块找到你想要的代码  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70 2]
3.  根据语言需求下载对应的sdk  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70 3]

## 系统编码 ##

1.  将上面图片中的代码放到一个定义的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>

1.  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);

1.  浏览器输出结果，下面结果表示验证成功，现在一般来说就可以创建一个session标识验证成功，前台点击登录就可以放行了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70 4]

## 附录 ##

1.  [https://help.aliyun.com/document\_detail/66317.html][https_help.aliyun.com_document_detail_66317.html] 阿里云关于滑动验证码的说明
2.  [https://promotion.aliyun.com/ntms/act/captchaIntroAndDemo.html][https_promotion.aliyun.com_ntms_act_captchaIntroAndDemo.html] 阿里云关于滑动验证码实例

**每天进步一点，更多精彩，欢迎关注公众号“编程社”！**  
![在这里插入图片描述][aHR0cDovL3d3dy5taTEyLndhbmcvd2VsY29tZS8xLmpwZw]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70]: /images/20220504/3a8b45bafbc94cd6a6bb02a4708daa1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70 1]: /images/20220504/4d253bfab71644d0a6a9d7aadada773e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70 2]: /images/20220504/5635b1695cdd4a44b4388fea8609e5f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70 3]: /images/20220504/b087f1edacd9463bbeb2086d3efca74b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODkxNzQz_size_27_color_FFFFFF_t_70 4]: /images/20220504/57a9c29b8a094217ae6a686c125cf802.png
[https_help.aliyun.com_document_detail_66317.html]: https://help.aliyun.com/document_detail/66317.html
[https_promotion.aliyun.com_ntms_act_captchaIntroAndDemo.html]: https://promotion.aliyun.com/ntms/act/captchaIntroAndDemo.html
[aHR0cDovL3d3dy5taTEyLndhbmcvd2VsY29tZS8xLmpwZw]: /images/20220504/872c1bba1f8642e0897a28e8b778d1fa.png