百度360必应搜狗淘宝本站头条
docker systemdzabbix微信报警脚本loadjsqt5.5pagination.js
当前位置：网站首页 > 技术教程 > 正文

js实现滑块式验证码校验插件，可以收藏起来

suiw9 2024-11-04 15:26 30 浏览 0 评论

介绍

用户通过拖动滑块行为来完成校验，支持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;
	}
	
}


截图：

想要源码，记得转发+关注+私信

私信回复【滑块式验证码】

相关推荐

俄罗斯的 HTTPS 也要被废了?（俄罗斯网站关闭）

发布该推文的ScottHelme是一名黑客，SecurityHeaders和ReportUri的创始人、Pluralsight作者、BBC常驻黑客。他表示，CAs现在似乎正在停止为俄罗斯域名颁发...

如何强制所有流量使用 HTTPS一网上用户

如何强制所有流量使用HTTPS一网上用户使用.htaccess强制流量到https的最常见方法可能是使用.htaccess重定向请求。.htaccess是一个简单的文本文件，简称为“.h...

https和http的区别（https和http有何区别）

“HTTPS和HTTP都是数据传输的应用层协议，区别在于HTTPS比HTTP安全”。区别在哪里，我们接着往下看：...

快码住!带你十分钟搞懂HTTP与HTTPS协议及请求的区别

什么是协议？网络协议是计算机之间为了实现网络通信从而达成的一种“约定”或“规则”，正是因为这个“规则”的存在，不同厂商的生产设备、及不同操作系统组成的计算机之间，才可以实现通信。简单来说，计算机与网络...

简述HTTPS工作原理（简述https原理,以及与http的区别）

https是在http协议的基础上加了一层SSL(由网景公司开发)，加密由ssl实现，它的目的是为用户提供对网站服务器的身份认证(需要CA)，以至于保护交换数据的隐私和完整性,原理如图示。1、客户端发...

21、HTTPS 有几次握手和挥手?HTTPS 的原理什么是(高薪 常问)

HTTPS是3次握手和4次挥手，和HTTP是一样的。HTTPS的原理...

一次安全可靠的通信——HTTPS原理

为什么HTTPS协议就比HTTP安全呢？一次安全可靠的通信应该包含什么东西呢，这篇文章我会尝试讲清楚这些细节。Alice与Bob的通信...

为什么有的网站没有使用https（为什么有的网站点不开）

有的网站没有使用HTTPS的原因可能涉及多个方面，以下是.com、.top域名的一些见解：服务器性能限制：HTTPS使用公钥加密和私钥解密技术，这要求服务器具备足够的计算能力来处理加解密操作。如果服务...

HTTPS是什么?加密原理和证书。SSL/TLS握手过程

秘钥的产生过程非对称加密...

图解HTTPS「转」（图解http 完整版 彩色版 pdf）

我们都知道HTTPS能够加密信息，以免敏感信息被第三方获取。所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。...

HTTP 和 HTTPS 有何不同?一文带你全面了解

随着互联网时代的高速发展，Web服务器和客户端之间的安全通信需求也越来越高。HTTP和HTTPS是两种广泛使用的Web通信协议。本文将介绍HTTP和HTTPS的区别，并探讨为什么HTTPS已成为We...

HTTP与HTTPS的区别，详细介绍（http与https有什么区别）

HTTP与HTTPS介绍超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的...

一文让你轻松掌握 HTTPS（https详解）

一文让你轻松掌握HTTPS原文作者：UC国际研发泽原写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。...

如何在Spring Boot应用程序上启用HTTPS?

HTTPS是HTTP的安全版本，旨在提供传输层安全性（TLS）[安全套接字层（SSL）的后继产品]，这是地址栏中的挂锁图标，用于在Web服务器和浏览器之间建立加密连接。HTTPS加密每个数据包以安全方...

一文彻底搞明白Http以及Https（http0）

早期以信息发布为主的Web1.0时代，HTTP已可以满足绝大部分需要。证书费用、服务器的计算资源都比较昂贵，作为HTTP安全扩展的HTTPS，通常只应用在登录、交易等少数环境中。但随着越来越多的重要...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.