angularjs 滑块验证码 移动端_SliderCaptcha
滑塊式驗(yàn)證碼
用戶通過(guò)拖動(dòng)滑塊行為來(lái)完成校驗(yàn)，支持PC端及移動(dòng)端。可以將用戶拖動(dòng)行為的時(shí)間、精度，滑動(dòng)軌跡等信息到服務(wù)器，然后進(jìn)行后臺(tái)算法驗(yàn)證。
特別介紹
Blazor 版本的滑塊驗(yàn)證碼 傳送門(mén)
在線演示
效果圖
快速開(kāi)始
組件依賴 font-awesome
CSS
將引入樣式表的 標(biāo)簽復(fù)制并粘貼到
中，并放在所有其他樣式表之前。JS
將引入腳本的
用法
添加網(wǎng)頁(yè)Html元素
API
通過(guò) javascript 初始化控件
sliderCaptcha({
id: 'captcha'
});
Options
可以根據(jù)自己需要設(shè)置寬度與高度等配置
sliderCaptcha({
id: 'captcha',
width: 280,
height: 150,
sliderL: 42,
sliderR: 9,
offset: 5,
loadingText: '正在加載中...',
failedText: '再試一次',
barText: '向右滑動(dòng)填充拼圖',
repeatIcon: 'fa fa-redo',
setSrc: function () {
},
onSuccess: function () {
},
onFail: function () {
},
onRefresh: function () {
}
});
名稱
類型
默認(rèn)值
說(shuō)明
width
integer
280
背景圖片寬度
height
integer
150
背景圖標(biāo)高度
sliderL
integer
42
拼圖寬度
sliderR
integer
9
拼圖突出半徑
offset
integer
5
驗(yàn)證容錯(cuò)偏差值 默認(rèn)5個(gè)像素偏差即認(rèn)為驗(yàn)證通過(guò)
loadingText
string
"正在加載中..."
圖片加載時(shí)顯示的文本信息
failedText
string
"再試一次"
驗(yàn)證失敗時(shí)顯示的文本信息
barText
integer
"向右滑動(dòng)填充拼圖"
拖動(dòng)滑塊準(zhǔn)備拖動(dòng)時(shí)顯示的文本信息
repeatIcon
string
"fa fa-redo"
重新加載圖標(biāo) 需引用 font-awesome
onSuccess
function
null
驗(yàn)證通過(guò)時(shí)回調(diào)此函數(shù)
onFail
function
null
驗(yàn)證失敗時(shí)回調(diào)此函數(shù)
onRefresh
function
null
點(diǎn)擊重新加載圖標(biāo)時(shí)回調(diào)此函數(shù)
localImages
function
function () { return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg'; }
圖床圖片加載失敗時(shí)調(diào)用此方法返回本地圖片路徑
remoteUrl
string
null
服務(wù)器端驗(yàn)證請(qǐng)求地址，請(qǐng)求方式默認(rèn)為 post 方式
verify
function
function (arr, url) { return true; }
服務(wù)器端驗(yàn)證方法 arr 為客戶端拖動(dòng)滑塊軌跡，url 為服務(wù)器端請(qǐng)求地址，返回值為布爾值
方法
var captcha = sliderCaptcha({
id: 'captcha'
});
captcha.reset();
Method
Example
Description
reset
captcha.reset()
重置控件
事件
無(wú)
Issue
請(qǐng)前往 Issue 頁(yè)面添加問(wèn)題
服務(wù)器端認(rèn)證
客戶端代碼示例
1. JavaScript
控件配置信息中有 remoteUrl 和 verify 兩個(gè)配置項(xiàng)，合理正確的設(shè)置這兩個(gè)配置項(xiàng)即可達(dá)到想要的服務(wù)器端認(rèn)證邏輯
remoteUrl 默認(rèn)值為 null 表示未啟用服務(wù)器端認(rèn)證方式，設(shè)置請(qǐng)求的 webapi 地址后啟用服務(wù)器端認(rèn)證方法
控件默認(rèn)請(qǐng)求服務(wù)器端方法如下，可適當(dāng)進(jìn)行更改
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;
}
參數(shù)
類型
默認(rèn)值
說(shuō)明
arr
array
object
客戶端拖動(dòng)滑塊軌跡數(shù)組
url
string
remoteUrl
配置項(xiàng)中的 remoteUrl 參數(shù)值
完整示例代碼
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"
});
服務(wù)器端代碼示例
1. NETCore WebApi
///
/// 滑塊服務(wù)器端驗(yàn)證方法
///
[Route("api/[controller]")]
[ApiController]
[AllowAnonymous]
public class CaptchaController : ControllerBase
{
///
/// 服務(wù)器端滑塊驗(yàn)證方法
///
///
[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
可能會(huì)存在精度問(wèn)題，采用BigDecimal計(jì)算即可
@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;
}
}
常見(jiàn)問(wèn)題
服務(wù)端驗(yàn)證的返回結(jié)果怎么一直都是true
示例代碼中演示的是前端提交用戶滑動(dòng)軌跡到服務(wù)器端進(jìn)行了 Y 軸的平方差校驗(yàn)，為零時(shí)才返回 false，否則返回 true，為 true 表示 Y 軸有偏移，簡(jiǎn)單的認(rèn)為此操作是人為操作，因?yàn)槿耸滞蟿?dòng)過(guò)程中的抖動(dòng) Y 軸理論上是不可能沒(méi)有偏移的。因此依據(jù)此值進(jìn)行是否是人為拖動(dòng)滑塊。
參與貢獻(xiàn)
Fork 本項(xiàng)目
新建 Feat_xxx 分支
提交代碼
新建 Pull Request
總結(jié)
以上是生活随笔為你收集整理的angularjs 滑块验证码 移动端_SliderCaptcha的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： linux sort 源码_Linux:
- 下一篇： android的xml置底_Androi