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
總結
以上是生活随笔為你收集整理的angularjs 滑块验证码 移动端_SliderCaptcha的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux sort 源码_Linux:
- 下一篇： android的xml置底_Androi