滑动验证交互样式
image.png
前端集成
- 在页面中引入插件js
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
- 集成demo
<div id="your-dom-id" class="nc-container"></div>
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: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
_errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
});
后端下载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验签失败
