引入阿里云滑动验证码（人机识别）

     我们的验证码被人盗刷，各种防盗机制用了个遍，可是道高一尺魔高一丈。迫不得已用了阿里验证码

引入阿里验证码的好处

     通过对用户的行为数据、设备特征与网络数据构建多维度数据分析，使用业界先进的风控引擎结合“规则+AI”模型，对风险设备使用、模拟行为、暴力重放等攻击进行综合实时风控判决，解决企业账号、活动、交易等关键业务环节存在的欺诈威胁，降低企业经济损失。

     用户体验好，简单的滑动就进行验证了

引入阿里验证码的坏处    收费，具体价格参照文档的收费说明

官方文档：https://help.aliyun.com/product/28308.html?spm=a2c4g.11186623.6.540.3a057a5cjCWJxm

实现思路

    前端(FE)：   引入js资源包，复制文档上的html和js代码（可根据自己业务灵活修改）

                         调用服务端验签接口进行验证

                         服务端返回验签失败可让用重新拖动滑块试试(可以使用nc.reset()方法)

    服务端(RD)：下载sdk https://help.aliyun.com/document_detail/122000.html?spm=a2c4g.11186623.6.564.156c2bc1H1mOrF

                          收到参数后传给sdk进行验签

                          验签成功再走业务代码的逻辑

实现过程

    1.新增配置获取appkey和scene，把appkey放入项目配置文件

2.获取AccessKeyId和Access Key Secret放入项目配置文件

3.引入所需的JS资源。

• 页面的主要访问来自中国大陆地区用户时，使用以下代码：

  <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>

   

• 页面的主要访问来自非中国大陆地区用户时，使用以下代码： 

  <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script>

   

说明：其中，t字段值建议设置为小时级别的时间戳。随实际时间更新，确保所引入的JS资源不会被浏览器长时间缓存，以免无法享受阿里云对JS资源的动态更新。

4.放入js（scene是新增的配置项里的scene）callback是完成滑动操作后的回调函数，把传给回调函数的参数传给服务端进行验签

var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt = 
        {
            //声明滑动验证需要渲染的目标元素ID。
            renderTo: "#your-dom-id",
            //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
            appkey: "CF_APP_1",
            //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
            scene: "register",
            //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
            token: nc_token,
            //滑动条的宽度。
            customWidth: 300,
            //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
            trans:{"key1":"code0"},
            //通过Dom的ID属性自动填写trans业务键，可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
            elementID: ["usernameID"],
            //是否自定义配置底层采集组件。如无特殊场景，请使用默认值（0），即不自定义配置底层采集组件。
            is_Opt: 0,
            //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
            language: "cn",
            //是否启用。一般情况，保持默认值（true）即可。
            isEnabled: true,
            //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
            timeout: 3000,
            //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
            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'
        },
            //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
            callback: function (data) {
            window.console && console.log(nc_token)
                window.console && console.log(data.csessionid)
                window.console && console.log(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>"
        })

5.服务端引入SDK https://help.aliyun.com/document_detail/122000.html?spm=a2c4g.11186623.6.564.558c51b3A4Qm5I

6.服务端收到前端传的参数后

/**
 * 阿里云滑动验证码签名验证
 *
 * @param $data 前端传的的参数
 *
 * @return \SimpleXMLElement
 *
 */
public function checkSignAli($data){
    //相关的配置文件
    $ali = C('ALIOSS');
    //客户端ip
    $ip = get_client_ip();

    $csessionid = $data['csessionid'];
    $sig        = $data['sig'];
    $scene      = $data['scene'];
    $token      = $data['token'];
    
    //阿里的sdk
    $iClientProfile = \DefaultProfile::getProfile("cn-hangzhou", $ali['id'], $ali['key']);
    $client = new \DefaultAcsClient($iClientProfile);
    \DefaultProfile::addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");

    $request = new Afs\AuthenticateSigRequest();

    $request->setSessionId($csessionid);
    $request->setToken($token);
    $request->setSig($sig);

    $request->setScene($scene);
    $request->setAppKey($ali['appkey_pc']);
    $request->setRemoteIp($ip);
    
    $result = $client->getAcsResponse($request);

    //result->Code为返回的验签结果(100成功,900失败)
    return $result->Code === 100 ? true : false;
}

7.签名校验成功才可发送验证码，每次滑动生成的签名只能使用一次，从而防盗