一款媲美极验的开源行为验证解决方案,用户通过拖动滑块行为来完成校验,支持 PC 端及移动端。可以将用户拖动行为的时间、精度,滑动轨迹等信息到服务器,然后进行后台算法验证。
安装使用
组件依赖 font-awesome
CSS
<link href=”./src/slidercaptcha.css”>
将引入样式表的 标签复制并粘贴到 中,并放在所有其他样式表之前。
JS
<script src=”./src/longbow.slidercaptcha.js”></script>
将引入脚本的<script> 标签复制并粘贴到 <body> 最后面。
用法
添加网页 Html 元素
<div id="captcha"></div>
API
通过 javascript 初始化控件
<div id="captcha"></div>
<script>
sliderCaptcha({
id: 'captcha'
});
</script>
Options
可以根据自己需要设置宽度与高度等配置
<div id="captcha"></div>
<script>
sliderCaptcha({
id: 'captcha',
width: 280,
height: 150,
sliderL: 42,
sliderR: 9,
offset: 5,
loadingText: '正在加载中...',
failedText: '再试一次',
barText: '向右滑动填充拼图',
repeatIcon: 'fa fa-redo',
setSrc: function () {
},
onSuccess: function () {
},
onFail: function () {
},
onRefresh: function () {
}
});
</script>
方法
<div id="captcha"></div>
<script>
var captcha = sliderCaptcha({
id: 'captcha'
});
captcha.reset();
</script>
属性
名称 | 类型 | 默认值 | 说明 |
width | integer | 280 | 背景图片宽度 |
height | integer | 150 | 背景图标高度 |
sliderL | integer | 42 | 拼图宽度 |
sliderR | integer | 9 | 拼图突出半径 |
offset | integer | 5 | 验证容错偏差值 默认 5 个像素偏差即认为验证通过 |
loadingText | string | “正在加载中…” | 图片加载时显示的文本信息 |
failedText | string | “再试一次” | 验证失败时显示的文本信息 |
barText | integer | “向右滑动填充拼图” | 拖动滑块准备拖动时显示的文本信息 |
repeatIcon | string | “fa fa-redo” | 重新加载图标 需引用 font-awesome |
setSrc | function | “” | 设置图片加载路径 |
onSuccess | function | null | 验证通过时回调此函数 |
onFail | function | null | 验证失败时回调此函数 |
onRefresh | function | null | 点击重新加载图标时回调此函数 |
localImages | function | 图床图片加载失败时调用此方法返回本地图片路径 | |
remoteUrl | string | null | 服务器端验证请求地址,请求方式默认为 post 方式 |
verify | function | function (arr, url) { return true; } | 服务器端验证方法 arr 为客户端拖动滑块轨迹,url 为服务器端请求地址,返回值为布尔值 |
服务端认证
客户端代码示例
1. JavaScript
控件配置信息中有 remoteUrl 和 verify 两个配置项,合理正确的设置这两个配置项即可达到想要的服务器端认证逻辑
remoteUrl 默认值为 null 表示未启用服务器端认证方式,设置请求的 webapi 地址后启用服务器端认证方法 控件默认请求服务器端方法如下,可适当进行更改
verify: function (arr, url) {
var ret = false;
$.ajax({
url: url,
data: JSON.stringify(arr),
async: false,
cache: false,
type: 'POST',
contentType: 'application/json',
dataType: 'json',
success: function (result) {
ret = result;
}
});
return ret;
}
完整示例代码
sliderCaptcha({
id: 'captcha',
repeatIcon: 'fa fa-redo',
setSrc: function () {
return 'https://imgs.blazor.zone/images/Pic' + Math.round(Math.random() * 136) + '.jpg';
},
onSuccess: function () {
window.location.href = 'https://gitee.com/LongbowEnterprise/SliderCaptcha';
},
remoteUrl: "api/Captcha"
});
服务器端代码示例
- 1. NETCore WebApi
/// <summary>
/// 滑块服务器端验证方法
/// </summary>
[Route("api/[controller]")]
[ApiController]
[AllowAnonymous]
public class CaptchaController : ControllerBase
{
/// <summary>
/// 服务器端滑块验证方法
/// </summary>
/// <returns></returns>
[HttpPost]
public bool Post([FromBody]List<int> datas)
{
var sum = datas.Sum();
var avg = sum * 1.0 / datas.Count;
var stddev = datas.Select(v => Math.Pow(v - avg, 2)).Sum() / datas.Count;
return stddev != 0;
}
}
2.JAVA SpringBoot
可能会存在精度问题,采用 BigDecimal 计算即可
@RestController
@RequestMapping("/sliderCaptcha")
public class SliderCaptchaController {
@PostMapping("/isVerify")
public boolean isVerify(List<Integer> datas) {
int sum = 0;
for (Integer data : datas) {
sum += data;
}
double avg = sum * 1.0 / datas.size();
double sum2 = 0.0;
for (Integer data : datas) {
sum2 += Math.pow(data - avg, 2);
}
double stddev = sum2 / datas.size();
return stddev != 0;
}
}
截图
开源地址
https://gitee.com/LongbowEnterprise/SliderCaptcha