js實現滑塊式驗證碼校驗插件，可以收藏起來

紹

用戶通過拖動滑塊行為來完成校驗，支持PC端及移動端。可以將用戶拖動行為的時間、精度，滑動軌跡等信息到服務器，然后進行后臺算法驗證

快速開始

組件依賴 font-awesome

CSS

<link href="./src/slidercaptcha.css">

將引入樣式表的 <link> 標簽復制并粘貼到 <head> 中，并放在所有其他樣式表之前。

JS

<script src="./src/longbow.slidercaptcha.js"></script>

將引入腳本的 <script> 標簽復制并粘貼到 <body> 最后面。

用法

添加網頁Html元素

<div id="captcha"></div>

API

通過 javascript 初始化控件

<div id="captcha"></div>
<script>
    sliderCaptcha({
        id: 'captcha'
    });
</script>

Options

可以根據自己需要設置寬度與高度等配置

<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

請前往 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

/// <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;
    }
}

2. JAVA SpringBoot

可能會存在精度問題，采用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）滑動拼圖驗證，無感驗證碼，文字點選驗證碼，凱格云盾

在線咨詢

上一篇：這 12 個實用的 HTML標簽（組件）建議盡早用上
下一篇：div標簽添加滾動條

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商