正在加載....
廈門網站建設-世敏網絡科技
  • 當前位置: 首頁 > 建站百科 > 常見問題
  • 滑塊式驗證碼配置教程

    時間:2020-02-15 瀏覽量:

    用戶通過拖動滑塊行為來完成校驗,支持PC端及移動端??梢詫⒂脩敉蟿有袨榈臅r間、精度,滑動軌跡等信息到服務器,然后進行后臺算法驗證。

    在線演示

    單頁面演示:http://longbowenterprise.gitee.io/slidercaptcha/
    項目內演示:http://ba.sdgxgz.com/ (本項目為開源后臺管理框架 [BootstrapAdmin])
    輸入三次錯誤密碼后第四次出現滑塊式行為驗證碼

    效果圖

    輸入圖片說明 輸入圖片說明

    快速開始

    組件依賴 jQuery bootstrap font-awesome

    CSS

    <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> 中,并放在所有其他樣式表之前。

    JS

    <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>

    API

    通過 javascript 初始化控件

    <div id="captcha"></div><script>    $('#captcha').sliderCaptcha();</script>

    Options

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

    <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>
    名稱類型默認值說明
    widthinteger280背景圖片寬度
    heightinteger150背景圖標高度
    sliderLinteger42拼圖寬度
    sliderRinteger9拼圖突出半徑
    offsetinteger5驗證容錯偏差值 默認5個像素偏差即認為驗證通過
    loadingTextstring"正在加載中..."圖片加載時顯示的文本信息
    failedTextstring"再試一次"驗證失敗時顯示的文本信息
    barTextinteger"向右滑動填充拼圖"拖動滑塊準備拖動時顯示的文本信息
    repeatIconstring"fa fa-redo"重新加載圖標 需引用 font-awesome
    setSrcfunction"https://picsum.photos/?image=random"設置圖片加載路徑
    onSuccessfunctionnull驗證通過時回調此函數
    onFailfunctionnull驗證失敗時回調此函數
    onRefreshfunctionnull點擊重新加載圖標時回調此函數
    localImagesfunctionfunction () { return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg'; }圖床圖片加載失敗時調用此方法返回本地圖片路徑
    remoteUrlstringnull服務器端驗證請求地址,請求方式默認為 post 方式
    verifyfunctionfunction (arr, url) { return true; }服務器端驗證方法 arr 為客戶端拖動滑塊軌跡,url 為服務器端請求地址,返回值為布爾值

    方法

    <div id="captcha"></div><script>    $('#captcha').sliderCaptcha();    $('#captcha').sliderCaptcha('reset');</script>
    MethodExampleDescription
    reset$('#captcha').sliderCaptcha('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;}
    參數類型默認值說明
    arrarrayobject客戶端拖動滑塊軌跡數組
    urlstringremoteUrl配置項中的 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"});

    服務器端代碼示例

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

    常見問題

    服務端驗證的返回結果怎么一直都是true

    示例代碼中演示的是前端提交用戶滑動軌跡到服務器端進行了 Y 軸的平方差校驗,為零時才返回 false,否則返回 true,為 true 表示 Y 軸有偏移,簡單的認為此操作是人為操作,因為人手拖動過程中的抖動 Y 軸理論上是不可能沒有偏移的。因此依據此值進行是否是人為拖動滑塊。


    加載中~
    加載中~

    您已成功復制微信號,去微信立即添加好友!

    點擊下方復制按鈕,復制微信號!

    jzm866081

    http://www.523235.tw
    廈門世敏網絡科技有限公司

    點擊這里給我發消息
    嘿!有什么能幫到您的嗎?
    (^ω^)MG星尘怎么玩 沈阳麻将技巧口诀 黑龙江p62和值走势图 七星彩2元机选中 甘肃11选5前三直开奖结果 体彩p3出号走势图带连线 pk10如何将100玩到一万 在qq上看股票行情 我想开个网上棋牌游戏 水果拉霸机电玩技巧攻略 那个网站买彩票正规 DS真人平台首页 新疆时时彩漂开奖号码 四川体彩顶呱刮官网 nba总决赛比赛比分 比特币行情分析论坛 南昌麻将算子一览表