整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
紹
用戶通過拖動滑塊行為來完成校驗，支持PC端及移動端?？梢詫⒂脩敉蟿有袨榈臅r間、精度，滑動軌跡等信息到服務器，然后進行后臺算法驗證
<link href="./src/slidercaptcha.css">將引入樣式表的 <link> 標簽復制并粘貼到 <head> 中，并放在所有其他樣式表之前。
<script src="./src/longbow.slidercaptcha.js"></script>將引入腳本的 <script> 標簽復制并粘貼到 <body> 最后面。
添加網頁Html元素
<div id="captcha"></div><div id="captcha"></div>
<script>
sliderCaptcha({
id: 'captcha'
});
</script> 可以根據自己需要設置寬度與高度等配置
<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 | "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>
var captcha=sliderCaptcha({
id: 'captcha'
});
captcha.reset();
</script> Method | Example | Description |
reset | captcha.reset() | 重置控件 |
無
請前往 Issue 頁面添加問題
控件配置信息中有 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"
});/// <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;
}
}可能會存在精度問題，采用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;
}
}截圖：
想要源碼，記得轉發+關注+私信
私信回復【滑塊式驗證碼】
據中文語義，按順序依次點擊圖中文字，語義理解能力結合行為軌跡。適用于安全要求較高的業務場景
HTML語序點選
Python語序點選
Jave語序點選
PHP語序點選
C#語序點選
可以調整語序點選驗證碼的樣式：
全部內容的素材地址：凱格行為驗證碼（KgCaptcha）滑動拼圖驗證，無感驗證碼，文字點選驗證碼，凱格云盾
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
