時間：2020-02-15
瀏覽量：
用戶通過拖動滑塊行為來完成校驗，支持PC端及移動端?？梢詫⒂脩敉蟿有袨榈臅r間、精度，滑動軌跡等信息到服務器，然后進行后臺算法驗證。
單頁面演示：http://longbowenterprise.gitee.io/slidercaptcha/
項目內演示：http://ba.sdgxgz.com/ (本項目為開源后臺管理框架 [BootstrapAdmin])
輸入三次錯誤密碼后第四次出現滑塊式行為驗證碼
(+86) 0592-6892551
<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><div id="captcha"></div><script> $('#captcha').sliderCaptcha();</script>可以根據自己需要設置寬度與高度等配置
<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 頁面添加問題
控件配置信息中有 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"});/// <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; } }示例代碼中演示的是前端提交用戶滑動軌跡到服務器端進行了 Y 軸的平方差校驗，為零時才返回 false，否則返回 true，為 true 表示 Y 軸有偏移，簡單的認為此操作是人為操作，因為人手拖動過程中的抖動 Y 軸理論上是不可能沒有偏移的。因此依據此值進行是否是人為拖動滑塊。
RELATED RECOMMEND
