介绍
从v2.5.6版本起，SW-X内置了一个点图验证码类，类似于Google，基于\x\verify\Click类做驱动支持。
在使用创建点图验证码前，需要先使用php sw-x click start命令，安装框架提供的行为校验控制器。
效果图
点击前:
校验成功后:
生成验证码
前端依赖样式：
<!--Jquery组件-->
<script src="https://www.sw-x.cn/public/js/jquery.min.js"></script>
<!--JS组件-->
<script src="https://www.sw-x.cn/api/click/swx_click_captcha.js"></script>
依赖类：\x\verify\Click
方法名：create()
返回值：验证码组件的HTML代码
参数：
-
string $name- 功能：表单name值
- 默认值：
verify_code
-
bool $status- 功能：校验失败后，是否清空session
- 默认值：
true
-
string $key- 功能：Session名称
- 默认值：
swx_click
注意：如果create()时，修改了$name或$status参数，那么也需要手动将/app/http/SwClick.php文件中的\x\verify\Click::analysis()方法传入对应的参数。
核验验证码
依赖类：\x\verify\Click
方法名：check()
返回值：bool
参数：
-
string $key- 功能：Session名称
- 默认值：
swx_click
图床依赖
点图验证码，需要依赖图库加载，\x\verify\Click类提供了图库选择算法，却不提供图库来源。
开发者在使用php sw-x click start命令，安装完行为校验控制器后。
需要编辑/app/http/SwClick.php文件，将里面get_img()方法里的$img_list图库变量，改成自己的图库列表即可。
图库格式如下：
[
'动物' => [
'图片地址1',
'图片地址2',
],
'箱子' => [
'图片地址1',
'图片地址2',
]
]/**
* @RequestMapping(route="/SwClick/get_img", method="post", title="获取图片列表")
*/
public function get_img() {
$param = \x\Request::post();
if (empty($param['key'])) return $this->_json('301', '非法请求');
$img_list = [
'动物' => [
'https://www.sw-x.cn/api/click/img/1599207574.jpg',
'https://www.sw-x.cn/api/click/img/1599207586.jpg',
'https://www.sw-x.cn/api/click/img/1599207587.jpg',
'https://www.sw-x.cn/api/click/img/1599207588.gif',
'https://www.sw-x.cn/api/click/img/1599209862.jpg',
'https://www.sw-x.cn/api/click/img/1599209863.jpg',
'https://www.sw-x.cn/api/click/img/1599210010.jpg',
'https://www.sw-x.cn/api/click/img/1599210011.jpg',
'https://www.sw-x.cn/api/click/img/1599210012.jpg',
'https://www.sw-x.cn/api/click/img/1599210013.jpg',
'https://www.sw-x.cn/api/click/img/1599210014.jpg',
'https://www.sw-x.cn/api/click/img/1599210015.jpg',
'https://www.sw-x.cn/api/click/img/1599210031.jpg',
'https://www.sw-x.cn/api/click/img/1599210032.jpg',
'https://www.sw-x.cn/api/click/img/1599210034.jpg',
'https://www.sw-x.cn/api/click/img/1599210035.jpg',
'https://www.sw-x.cn/api/click/img/1599210036.jpg',
],
'箱子' => [
'https://www.sw-x.cn/api/click/img/1599207601.jpg',
'https://www.sw-x.cn/api/click/img/1599207602.jpg',
'https://www.sw-x.cn/api/click/img/1599207603.jpg',
'https://www.sw-x.cn/api/click/img/1599207604.jpg',
'https://www.sw-x.cn/api/click/img/1599209581.jpg',
'https://www.sw-x.cn/api/click/img/1599209582.jpg',
'https://www.sw-x.cn/api/click/img/1599209583.jpg',
'https://www.sw-x.cn/api/click/img/1599209584.jpg',
'https://www.sw-x.cn/api/click/img/1599209585.jpg',
'https://www.sw-x.cn/api/click/img/1599209586.jpg',
'https://www.sw-x.cn/api/click/img/1599209587.jpg',
'https://www.sw-x.cn/api/click/img/1599209580.jpg',
'https://www.sw-x.cn/api/click/img/1599209588.jpg',
'https://www.sw-x.cn/api/click/img/1599209589.jpg',
'https://www.sw-x.cn/api/click/img/1599209590.jpg',
]
];
$arr = \x\verify\Click::create_img($img_list, $param['key']);
return $this->_json('200', "请点击下列所有<font color='red'> ".$arr['title']." </font>图片后，点击提交！", $arr['list']);
}
图床$img_list变量，建议读取Mysql或Redis等存储器生成，也可以根据示例代码中写死，官方也提供了一个简单的图床库表：点击查看。
建议：图片存储的时候不要使用目录对图片进行分类，否则很容易被人用爬虫对图库进行分类采集，从而实现验证码的破解。
使用示例
示例控制器代码：
namespace app\http;
use x\controller\Http;
class Index extends Http
{
/**
* @RequestMapping(route="/test", method="get", title="调用点图验证码的页面")
*/
public function index() {
// 生成点图验证码组件所需的HTML代码
$this->assign('click', \x\verify\Click::create());
return $this->display();
}
/**
* @RequestMapping(route="/test_check", method="post", title="AJAX校验的接口")
*/
public function test_check() {
// 进行校验
$res = \x\verify\Click::check();
if ($res === true) {
return $this->_json('200', '校验通过');
}
return $this->_json('301', $res);
}
// 假设这是你的接口返回值格式
private function _json($code, $msg, $data=null) {
return $this->fetch(json_encode([
'code' => "{$code}",
'msg' => $msg,
'data' => $data,
], JSON_UNESCAPED_UNICODE));
}
}
view视图示例代码：
<html lang="en">
<head>
<!--Jquery组件-->
<script src="https://www.sw-x.cn/public/js/jquery.min.js"></script>
<!--JS组件-->
<script src="https://www.sw-x.cn/api/click/swx_click_captcha.js"></script>
</head>
<body>
<!--输出行为验证码-->
<div style="margin-top:500px">
{$click}
</div>
<br>
<!--下面模拟下接口提交-->
<button type="button">发送调试</button><script>
$("button").click(function(){
$.ajax({
url : "/test_check",
type : "post",
data : {},
success : function(arr){
var array = eval("("+arr+")");
// 调用 swx_vif_captcha() 刷新验证码
swx_vif_captcha();
alert(array.msg);
}
});
})
</script>
</body>
</html>
