angularjs 滑块验证码 移动端_SliderCaptcha
滑块式验证码
用户通过拖动滑块行为来完成校验，支持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
更多相关：
-
Ktor 是一个使用 Kotlin 以最小的成本快速创建 Web 应用程序的框架。Ktor 是一个用于在连接系统(connected systems)中构建异步服务器和客户端的 Kotlin 框架。它由 Kotlin 团队创建，因此，它充分利用了 Kotlin 的语言特性，为开发者提供出色的体验和运行时性能。import io.kto...
-
l VDI (Virtual Desktop Infrastructure)VDI构架采用的“集中存储、集中运算”构架，所有的桌面以虚拟机的方式运行在服务器硬件的虚拟化层上，桌面以图像传输的方式发送到客户端。l IDV (Intelligent Desktop Virtualization) 由于VDI方案对服务器资源、网络带宽要求比...
-
受昨晚闰秒问题影响，今天内网和线上的ATS服务器都出现了CPU负载增高的问题，参见下面的截图 下面是tsar监控到负载异常记录，从今天(20150701)早上8:05分开始： 我们内网和线上的服务器Linux kernel内核版本都是 经过实践摸索，发现如下规律： 1.如果已经开启ntpd，如果昨晚没有关闭n...
-
下面的安装假定是以root用户身份进行的，Linux服务器已经安装好系统，磁盘已经做好分区。 首先需要认识我们的Linux服务器的硬件配置和软件情况 硬件配置： DELL R720 2U服务器 CPU 8核 Intel(R) Xeon(R) CPU E5-2609 0 @ 2.40GHz 内存 32G 硬盘 系统盘 /...
-
http://outofmemory.cn/code-snippet/8408/python-regular-expression-replace-sub-method 我验证了它的方法，可行...
-
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成。 以下实例代码用于判断表单字段(fname)值是否存在，如果存在，则弹出信息，否则阻止表单提交： JavaScript 实例 function validateForm() { var x = document...
-
1. 什么是Struts2 验证器 一个健壮的 web 应用程序必须确保用户输入是合法、有效的.Struts2 的输入验证 基于 XWork Validation Framework 的声明式验证：Struts2 提供了一些基于 XWork Validation Framework 的内建验证程序. 使用这些验证程序不需要编程, 只要...
-
链接地址：http://blog.csdn.net/tjcyjd/article/details/48416405 验证数字：^[0-9]*$验证n位的数字：^d{n}$验证至少n位数字：^d{n,}$验证m-n位的数字：^d{m,n}$验证零和非零开头的数字：^(0|[1-9][0-9]*)$验证有两位小数的正实数：^[0-9...
-
不少朋友在登陆DedeCMS后台的时候遇到验证码错误的问题，明明已经正确输入了，却提示错误，导致登录不进后台。如果遇到这个问题，可以通过下面的方法检测修复。 1、空间满了。我遇到的验证码错误都是空间满了，如果也遇到验证码错误的问题，可以先检查是否空间满了。 2、用ftp进入你的dedecms程序空间，把data/session目...
-
/*禁止缩放safari浏览器*/ var scale = {disabledSafari: function () {/* 阻止双击放大*/var lastTouchEnd = 0;document.addEventListener("touchstart", function (event) {if (event.touch...
-
$g.$utils = {/**舒工Ajax-lite 1.0 -- 最精简的ajax自定义访问方法*/ajax: function (o) {var p = o.post, g = o.get, d = p.data, a = p.async, J = 'json', j = p[J], s = g.success, e =...
-
Sg.js框架核心概念： 1）所有变量、方法、类对象全部都是从属于$g主树，由$g分支出很多$g.变量名、$g.方法、$g.对象id、$g.类；2）获取控件内部属性必须使用公开的get方法获取，禁止直接用访问内部变量方式来获取控件内部变量、属性值；3）修改控件内部属性、绑定方法等都必须使用公开的set方法来操作，禁止直接用访问...
-
一、ios header导航栏被推起解决方法 1 设置弹出软键盘时自动改变webview的高度 plus.webview.currentWebview().setStyle({ softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度 }); 2 增加样式 html...
-
前端发送Ajax请求到服务器，服务器返回数据这一过程，因原因不同耗时长短也有差别，且这段时间内页面显示空白。如何优化这段时间内的交互体验，以及长时间内服务器仍未返回数据这一问题，是我们开发中不容忽视的重点。 常见的做法是： 1、设置超时时间，一旦时间超过设定值，便终止请求；2、页面内容加载之前，手动增加一个 loading 层。 代码...