整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
绍
用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证
<link href="./src/slidercaptcha.css">将引入样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。
<script src="./src/longbow.slidercaptcha.js"></script>将引入脚本的 <script> 标签复制并粘贴到 <body> 最后面。
添加网页Html元素
<div id="captcha"></div><div id="captcha"></div>
<script>
sliderCaptcha({
id: 'captcha'
});
</script> 可以根据自己需要设置宽度与高度等配置
<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 | "https://picsum.photos/?image=random" | 设置图片加载路径 |
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 页面添加问题
控件配置信息中有 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 '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"
});/// <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;
}
}可能会存在精度问题，采用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;
}
}截图：
想要源码，记得转发+关注+私信
私信回复【滑块式验证码】
据中文语义，按顺序依次点击图中文字，语义理解能力结合行为轨迹。适用于安全要求较高的业务场景
HTML语序点选
Python语序点选
Jave语序点选
PHP语序点选
C#语序点选
可以调整语序点选验证码的样式：
全部内容的素材地址：凯格行为验证码（KgCaptcha）滑动拼图验证，无感验证码，文字点选验证码，凯格云盾
*请认真填写需求信息，我们会在24小时内与您取得联系。
