阿里云滑动验证

滑动验证交互样式

image.png

前端集成

• 在页面中引入插件js

• 集成demo

 

var nc_token = ['appkey', (new Date()).getTime(), Math.random()].join(':');
var NC_Opt = {
            renderTo: #your-dom-id, //页面中滑块位置 div 的 id
            appkey: cfKey, //阿里云申请的 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) {
               // 滑动滑块验证通过, 插件的回调, 用于后端验证 
               // data 中包含 csessionid sig token value
            }
        }
        var nc = new noCaptcha(NC_Opt);
        nc.upLang('cn', {
            _startTEXT: "请按住滑块，拖动到最右边",
            _yesTEXT: "验证通过",
            _error300: "哎呀，出错了，点击刷新再来一次",
            _errorNetwork: "网络不给力，请点击刷新",
        });

后端下载SDK并进行验证(PHP + CI框架)

• 下载阿里滑动验证SDK,放在项目文件夹下

  
  
  

  image.png
• 在控制器中一如配置文件

include_once APPPATH . 'libraries/AliyunAfs/aliyun-php-sdk-core/Config.php';
use afs\Request\V20180112 as Afs;

注意:确保 aliyun-php-sdk-core 文件夹下的 Config.php 配置文件中包含自动加载

Autoloader::addAutoloadPath("aliyun-php-sdk-afs")

• 新定义一个验证方法

$iClientProfile = DefaultProfile::getProfile("cn-hangzhou", "YOUR ACCESSKEY", "YOUR ACCESS_SECRET"); // ACCESSKEY 和 ACCESS_SECRET 分别由阿里获取, 此插件是一个收费项目
$client = new DefaultAcsClient($iClientProfile);
DefaultProfile::addEndpoint("cn-hangzhou", "cn-hangzhou", "afs", "afs.aliyuncs.com");
$request = new Afs\AuthenticateSigRequest();
$request->setSessionId("xxx");// 必填参数，从前端获取的 csessionid
$request->setToken("xxx");// 必填参数，从前端获取 token
$request->setSig("xxx");// 必填参数，从前端获取的 sig
$request->setScene("xxx");// 必填参数，从前端获取，不可更改
$request->setAppKey("xxx");//必填参数，后端填写, 阿里申请的 appkey
$request->setRemoteIp("xxx");//必填参数，后端填写, 请求客户端的ip, CI框架下可以用 $this->input->ip_address() 获取
$response = $client->getAcsResponse($request);//response的code枚举：100验签通过，900验签失败

前段文档
PHP后端文档