滑块式验证码配置教程_世敏网络科技有限公司

厦门

福建

厦门

福州

莆田

泉州

三明

龙岩

漳州

宁德

南平

武夷山
广州

天河

番禺

荔湾

海珠

白云

黄埔

越秀

花都
深圳

罗湖

福田

宝安

龙岗

盐田

龙华
上海

黄浦

徐汇

静安

普陀

闸北

虹口

杨浦

闵行

浦东

奉贤

崇明

金山

松江

青浦

南汇
北京

东城

西城

崇文

宣武

朝阳

丰台

石景山

海淀

门头沟

房山

通州

顺义

昌平

大兴

怀柔

平谷

密云

延庆
海南

海口

三亚

五指山

琼海

儋州

文昌

万宁

东方

定安

屯昌

澄迈

临高

白沙

昌江

乐东

陵水

保亭

琼中

三沙

厦门

厦门

福州

莆田

泉州

三明

龙岩

漳州

宁德

南平

武夷山
福州
莆田
泉州
三明
龙岩
漳州
宁德
南平
武夷山

语言

简体中文

繁體中文

关键词聚合

热搜：厦门企业建站多语言建站厦门建站厦门网站建设

我们承诺100%包做好，完善的售后服务

世敏网络是一家专注于企业建站系统开发，网站建设，网站设计，网站制作，小程序开发，功能定制开发等互联网领域设计的专业公司
多年企业网站建设系统的研发经验

世敏网络拥有多年的企业建站系统研发经验，在不断对方案优化的过程中搭建了"创意+技术+营销"一体化的服务模式

当前位置：首页 / 厦门建站百科 / 厦门常见问题

滑块式验证码配置教程

时间：2020-02-15 浏览量：收藏

用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证。

在线演示

单页面演示：http://longbowenterprise.gitee.io/slidercaptcha/
项目内演示：http://ba.sdgxgz.com/ (本项目为开源后台管理框架 [BootstrapAdmin])
输入三次错误密码后第四次出现滑块式行为验证码

效果图

滑块式验证码配置教程(图1) 滑块式验证码配置教程(图2)

快速开始

组件依赖 jQuery bootstrap font-awesome

CSS

<link href="https://cdn.bootcss.com/Twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css">
<link href="./src/slidercaptcha.css">

将引入样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./src/longbow.slidercaptcha.js"></script>

将引入脚本的 <script> 标签复制并粘贴到 <body> 最后面。

用法

添加网页Html元素

<div id="captcha"></div>

API

通过 javascript 初始化控件

<div id="captcha"></div>
<script>    
    $('#captcha').sliderCaptcha();
</script>

Options

可以根据自己需要设置宽度与高度等配置

<div id="captcha"></div>
<script>
    $('#captcha').sliderCaptcha({        
        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>    
    $('#captcha').sliderCaptcha();    
    $('#captcha').sliderCaptcha('reset');
</script>

Method	Example	Description
reset	$('#captcha').sliderCaptcha('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 参数值

完整示例代码

$('#captcha').sliderCaptcha({
    repeatIcon: 'fa fa-redo',
    setSrc: function () {
       return 'https://imgs.sdgxgz.com/images/Pic' + Math.round(Math.random() * 136) + '.jpg';    
    },    
    onSuccess: function () {
       window.location.href = 'https://gitee.com/LongbowEnterprise/SliderCaptcha';    
    },    
    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计算即可

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

常见问题

服务端验证的返回结果怎么一直都是true

示例代码中演示的是前端提交用户滑动轨迹到服务器端进行了 Y 轴的平方差校验，为零时才返回 false，否则返回 true，为 true 表示 Y 轴有偏移，简单的认为此操作是人为操作，因为人手拖动过程中的抖动 Y 轴理论上是不可能没有偏移的。因此依据此值进行是否是人为拖动滑块。