js验证码教程（js实现滑块式验证码校验插件）
介绍
用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证
快速开始组件依赖 font-awesomeCSS
<link href="./src/slidercaptcha.css">
将引入样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。
JS
<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请前往 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"
});
/// <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;
}
}
截图：
想要源码，记得转发 关注 私信
私信回复【滑块式验证码】
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
