滑块式验证码
用户通过拖动滑块行为来完成校验,支持PC端及移动端。可以将用户拖动行为的时间、精度,滑动轨迹等信息到服务器,然后进行后台算法验证。
特别介绍
Blazor 版本的滑块验证码 传送门
在线演示
效果图
快速开始
组件依赖 font-awesome
CSS
将引入样式表的 标签复制并粘贴到
中,并放在所有其他样式表之前。JS
将引入脚本的
用法
添加网页Html元素
API
通过 javascript 初始化控件
sliderCaptcha({
id: 'captcha'
});
Options
可以根据自己需要设置宽度与高度等配置
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 () {
}
});
名称
类型
默认值
说明
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
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 为服务器端请求地址,返回值为布尔值
方法
var captcha = sliderCaptcha({
id: 'captcha'
});
captcha.reset();
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 '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
///
/// 滑块服务器端验证方法
///
[Route("api/[controller]")]
[ApiController]
[AllowAnonymous]
public class CaptchaController : ControllerBase
{
///
/// 服务器端滑块验证方法
///
///
[HttpPost]
public bool Post([FromBody]List 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 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;
}
}
常见问题
服务端验证的返回结果怎么一直都是true
示例代码中演示的是前端提交用户滑动轨迹到服务器端进行了 Y 轴的平方差校验,为零时才返回 false,否则返回 true,为 true 表示 Y 轴有偏移,简单的认为此操作是人为操作,因为人手拖动过程中的抖动 Y 轴理论上是不可能没有偏移的。因此依据此值进行是否是人为拖动滑块。
参与贡献
Fork 本项目
新建 Feat_xxx 分支
提交代码
新建 Pull Request