正在加载....
厦门网站建设-世敏网络科技
  • 当前位置: 首页 > 建站百科 > 常见问题
  • 滑块式验证码配置教程

    时间:2020-02-15 浏览量:

    用户通过拖动滑块行为来完成校验,支持PC端及移动端。可以将用户拖动行为的时间、精度,滑动轨迹等信息到服务器,然后进行后台算法验证。

    在线演示

    单页面演示: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

    https://www.xmsmwl.cn
    厦门世敏网络科技有限公司

    点击这里给我发消息
    嘿!有什么能帮到您的吗?