ThinkPHP5 集成阿里雲滑動驗證功能實例指導

• 背景
  最近，項目後臺上線後，有人覺得登錄頁的四位驗證碼有時候看不出來，需要刷新好幾次填對；於是在搜索滑動驗證時注意到了阿里雲的這個人機驗證功能；雖然也有好多網友提供實現方法，但是經過自己的操作，覺得自己整理一番，不僅可以幫助新手，也能作爲自己以後的經驗備忘，歡迎指摘 …

• 瞭解概念，不然也找不到自己選擇這個功能的理由吧：
  滑動驗證（No-Captcha，簡稱NC），是阿里巴巴集團打破傳統驗證碼技術推出的最新人機識別服務。阿里雲的滑動驗證採用先進的風險分析引擎來區分來自人類與機器人的訪問行爲。用戶通過類似滑動解鎖的方式來通過人機驗證，對用戶來說無需思考即可通過人機識別（圖靈測試）的挑戰。

• 環境：

框架: ThinkPHP5.1
系統：Nginx、Win10、CentOS7.2

㈠ 前期準備

• 首先，建議閱讀【人機滑動驗證 官方文檔】,鄙人覺得裏面介紹的很詳細，作爲指導博文，不可能全給摘過來的
• 既然考慮到使用人家的服務，當然得了解一下是不是免費啥的唄，0.002元/條，好在也是不貴吧?
• 【創建 AccessKey (指導)】，請使用子賬號（RAM用戶）AccessKey，併爲子賬號授予雲盾人機驗證權限(AliyunYundunAFSFullAccess)
• 根據 【滑動驗證 —— 快速入門】,在【雲盾人機驗證控制檯】開通、配置
  

㈡ 前端接入代碼集成

首先，給出官方文檔介紹【 滑動驗證前端代碼集成文檔-PCWEB版】,然後對比我的實際操作代碼即可

• Html 核心代碼 (至於樣式的優化，文檔中有，自行融合唄)

<!-- 國內使用 -->
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
    
<div id="your-dom-id" class="layui-form-item nc-container"></div>
<input type="hidden" class="nc_token" name="nc_token" value="X">

• js 核心代碼：

	var nc_appkey = "Your appkey";//寫入自己的 appkey
    var nc_token = [nc_appkey , (new Date()).getTime(), Math.random()].join(':');
    var NC_Opt =
        {
            renderTo: "#your-dom-id",
            appkey: nc_appkey ,
            scene: "nc_login",
            token: nc_token,
            customWidth: 300,
            trans:{"key1":"code0"},
            elementID: ["usernameID"],
            is_Opt: 0,
            language: "cn",
            isEnabled: true,
            timeout: 3000,
            times:5,
            callback: function (data) {
                //window.console && console.log(nc_token);
                //console.log('sss',data);
                //TODO 此處 toUrl 即爲後臺驗證鏈接，根據自己的業務定義即可
                var toUrl = "{:url('cms/login/ajaxAfsCheck')}";
                $.post(
                    toUrl,
                    data,
                    function (result) {
                        if (result.status == 1) {
                            $(".nc_token").val(nc_token);
                        } else {
                            //失敗
                            layer.msg(result.message);
                        }
                    }, "JSON");
            }
        };
    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>",
    });

㈢ 服務端代碼集成

此時可以根據 【滑動驗證服務端代碼集成文檔】，進行整合處理

• 在【雲盾·人機控制檯】下載對應語言的SDK
  以鄙人的 ThinkPHP5.1.2框架環境，服務端 SDK代碼放置位置參考：
  
• 應用服務器 請求處理類的設計：
  此驗證方法即爲前端js中回調所觸發的請求鏈接地址
  注意：YOUR ACCESS_KEY、YOUR ACCESS_SECRET請替換成您的阿里雲子賬號（RAM用戶）的 accesskey id和secret ; YOUR APP_KEY 寫入自己的 appkey

   /**
     * ajax 測試阿里雲滑動驗證
     * @param Request $request
     * TODO YOUR ACCESS_KEY、YOUR ACCESS_SECRET請替換成您的阿里雲子賬號（RAM用戶）的 accesskey id和secret
     * YOUR APP_KEY : 寫入自己的 appkey
     */
    public function ajaxAfsCheck(Request $request)
    {
        if ($request->isPost()) {
            $postData = $request->post();
            include_once '../extend/aliyun/aliyun-php-sdk-core/Config.php';

            $iClientProfile = \DefaultProfile::getProfile("cn-hangzhou", "YOUR ACCESS_KEY",
                "YOUR ACCESS_SECRET");
            $client = new \DefaultAcsClient($iClientProfile);
            \DefaultProfile::addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");

            $request = new Afs\AuthenticateSigRequest();
            $ip = get_real_ips(); //自定義的一個獲取IP地址的方法
            $request->setSessionId($postData["csessionid"]);// 必填參數，從前端獲取，不可更改，android和ios只傳這個參數即可
            $request->setToken($postData['token']);// 必填參數，從前端獲取，不可更改
            $request->setSig($postData['sig']);// 必填參數，從前端獲取，不可更改
            $request->setScene('nc_login');// 必填參數，從前端獲取，不可更改
            $request->setAppKey("YOUR APP_KEY");//必填參數，後端填寫(寫入自己的 appkey)
            $request->setRemoteIp($ip);//必填參數，後端填寫

            $response = $client->getAcsResponse($request);//返回code 100表示驗籤通過，900表示驗籤失敗
            $opTag = ($response->Code === 100) ? 1 : 0;
            $message = ($response->Code === 100)? "驗籤通過":"驗籤失敗";

            if ($opTag){
                Session::set('NC_TOKEN',$postData['token']);
            }else{
                Session::set('NC_TOKEN','NULL');
            }
        } else {
            $opTag = 0;
            $message = "請求不合法";
        }
        return showMsg($opTag, $message,$response); //就是返回 json_encode()處理後的數據
    }

㈣ 後期處理以及效果

在前面的操作完成後，按照完整的業務處理邏輯，緊接着就是要處理登錄按鈕的觸發事件了

> 鄙人的操作是：
   在登錄按鈕觸發的 ajax 請求驗證中；
   判斷當前 Session 中的 "NC_TOKEN " 是否和 前端隱藏域傳來的 "nc_token" 值相等 ；
   如果相等，說明已成功滑動驗證通過，繼而判斷賬號和密碼是否能成功登錄；
   反之提示刷新再次進行驗證 ...

• 執行效果圖：
  

附錄：

• 頻繁查看的鏈接：【雲盾·人機控制檯】
• 一方面覺得寫得太詳細了，有點顯得冗雜了，其實看文檔仔細點也是沒問題的
  提示：多留意一下，我在 "㈠ 前期準備" 中提及的信息，尤爲重要！！
• 補充，後臺獲取IP 地址的函數：

/**
 * 此方法返回用戶的IP地址，同時如果擁有代理IP，將會以逗號追加在後面
 * 如果只取用當前IP，可參考 ：
 * $ips = explode(',', $bargainModel->get_real_ips());
 * $ip = $ips[0];
 */
function get_real_ips()
{
    global $ip;
    if (getenv("HTTP_CLIENT_IP")) {
        $ip = getenv("HTTP_CLIENT_IP");
    } else if (getenv("HTTP_X_FORWARDED_FOR")) {
        $ip = getenv("HTTP_X_FORWARDED_FOR");
    } else if (getenv("REMOTE_ADDR")) {
        $ip = getenv("REMOTE_ADDR");
    } else {
        $ip = "NULL";
    }
    return $ip;
}