介绍

用户通过拖动滑块行为来完成校验，支持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;
}
 
}

截图：

想要源码，记得转发+关注+私信

私信回复【 滑块式验证码 】

	<div id="captcha"></div>
	<script>
	sliderCaptcha({
	id: 'captcha'
	});
	</script>

	<div id="captcha"></div>
	<script>
	var captcha = sliderCaptcha({
	id: 'captcha'
	});
	captcha.reset();
	</script>

	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 '#39; + Math.round(Math.random() * 136) + '.jpg';
	},
	onSuccess: function () {
	window.location.href = '#39;;
	},
	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;
	}
	}

	@ 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;
	}

	}

js实现滑块式验证码校验插件，可以收藏起来