介绍
用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证
快速开始
组件依赖 font-awesome
CSS
<link href="./src/slidercaptcha.css"> 将引入样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。
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> 名称 | 类型 | 默认值 | 说明 |
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 | “#34; | 设置图片加载路径 |
onSuccess | function | null | 验证通过时 回调 此函数 |
onFail | function | null | 验证失败时回调此函数 |
onRefresh | function | null | 点击重新加载图标时回调此函数 |
localImages | function | function () { return ‘images/Pic’ + Math.round(Math.random() * 4) + ‘.jpg’; } | 图床 图片加载失败时调用此方法返回本地图片路径 |
remoteUrl | string | null | 服务器端验证请求地址，请求方式默认为 post 方式 |
verify | function | function (arr, url) { return true; } | 服务器端验证方法 arr 为客户端拖动滑块轨迹，url 为服务器端请求地址，返回值为布尔值 |
方法
<div id="captcha"></div>
<script>
var captcha = sliderCaptcha({
id: 'captcha'
});
captcha.reset();
</script> Method | Example | Description |
reset | captcha.reset() | 重置控件 |
事件
无
Issue
请前往 Issue 页面添加问题
服务器端认证
客户端代码示例
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;
} 参数 | 类型 | 默认值 | 说明 |
arr | array | object | 客户端拖动滑块轨迹数组 |
url | string | remoteUrl | 配置项中的 remoteUrl 参数值 |
完整示例代码
sliderCaptcha({
id: 'captcha',
repeatIcon: 'fa fa-redo',
setSrc: function () {
return '#39; + Math.round(Math.random() * 136) + '.jpg';
},
onSuccess: function () {
window.location.href = '#39;;
},
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 计算即可
@ Rest Controller
@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;
}
}
截图：
想要源码，记得转发+关注+私信
私信回复【 滑块式验证码 】
