SliderCaptcha滑块验证码v1.0.zip_slidercaptcha资源-CSDN文库

共29个文件

jpg：5个

md：4个

css：4个

138 浏览量 2024-03-27 21:58:59 上传评论 1 收藏 695KB ZIP 举报

滑块验证码（SliderCaptcha）是一种常见的网络安全技术，用于防止自动化程序或机器人进行恶意操作，如垃圾邮件发送、账户注册等。它通过让用户在图像上拖动一个滑块以完成拼图来验证用户是真实的人，而非计算机程序。在本文中，我们将深入探讨滑块验证码的工作原理、实现方式以及它在IT领域的应用。滑块验证码的基础是图像处理和随机性。系统通常会生成一张原始图像，并从中裁剪出一部分，创建两个不同的部分：一个是完整的图像，另一个是带有缺口的部分。用户必须将带有缺口的部分拖动到正确的位置，使图像完整，才能通过验证。这种机制利用了人类视觉识别的优势，对计算机程序来说则是一项挑战，因为它们需要解决图像匹配和位置识别的问题。在SliderCaptcha v1.0中，源码可能包括以下几个关键组件： 1. **图像生成**：这部分代码负责生成具有随机性和复杂性的图像，可能包括噪声、扭曲、颜色变化等，以增加机器识别的难度。 2. **滑块逻辑**：这部分代码实现滑块的移动和位置验证。它记录原始图像和缺口的位置，当用户拖动滑块时，计算并检查滑块是否已经正确复原图像。 3. **用户交互**：这涉及HTML和JavaScript，实现用户界面的展示和滑块的拖放功能。用户可以看见滑块并与其互动，同时，JavaScript可以监听用户的操作并发送验证请求。 4. **服务器验证**：服务器端的代码接收客户端的验证请求，包含滑块的新位置，然后与原始图像进行比较，判断是否通过验证。 5. **安全措施**：为了防止被破解，SliderCaptcha可能还包括一些安全策略，如限制尝试次数、使用时间戳防止重放攻击等。在实际应用中，滑块验证码常用于网站登录、表单提交、在线投票等场景。作为毕业设计论文的主题，它可以研究如何优化验证码的用户体验，同时保持其安全性。例如，减少用户操作的复杂性，提高验证码的可读性，以及采用更高级的图像处理技术来提升安全性。此外，对于软件开发者而言，理解并实现滑块验证码有助于提升对网络安全、用户交互设计和图像处理的理解。源代码分析可以帮助学习者掌握前后端交互的流程，以及如何用编程语言实现复杂的安全逻辑。 SliderCaptcha滑块验证码是一个结合了图像处理、用户交互和安全验证的实用工具，对于学习和提升IT技能，尤其是网络安全领域的知识，具有很高的价值。通过深入研究SliderCaptcha v1.0的源码，开发者不仅可以了解验证码的工作机制，还能为自己的项目增添一种有效的防御手段。

资源推荐

资源详情

资源评论

收起资源包目录

SliderCaptcha 滑块验证码 v1.0.zip （29个子文件）

说明.htm 4KB

SliderCaptcha

src

lib

font-awesome

css

font-awesome.css 37KB

font-awesome.min.css 30KB

font-awesome.css.map 21KB

fonts

FontAwesome.otf 132KB

fontawesome-webfont.eot 162KB

fontawesome-webfont.woff 96KB

fontawesome-webfont.woff2 75KB

fontawesome-webfont.svg 434KB

fontawesome-webfont.ttf 162KB

disk

longbow.slidercaptcha.min.js.map 14KB

longbow.slidercaptcha.min.js 7KB

slidercaptcha.min.css 2KB

longbow.slidercaptcha.js 13KB

slidercaptcha.css 3KB

bundleconfig.json 346B

index.html 2KB

images

Pic4.jpg 8KB

Pic0.jpg 8KB

Pic3.jpg 5KB

Pic2.jpg 6KB

Pic1.jpg 12KB

LICENSE 10KB

README.zh-CN.md 7KB

.gitee

ISSUE_TEMPLATE.zh-CN.md 79B

PULL_REQUEST_TEMPLATE.zh-CN.md 138B

.gitignore 6KB

.issuetracker 571B

README.md 6KB

## Slider Captcha <span>English</span> | <a href="README.zh-CN.md">中文</a> --- The user completes the verification by dragging the slider to support the PC and mobile terminals. The time, accuracy and sliding trajectory information of user dragging behavior can be sent to the server, and then the background algorithm verification can be carried out. ## Blazor Version http://blazor.sdgxgz.com/captchas ## Online Demonstration Single page presentation: http://longbowenterprise.gitee.io/slidercaptcha/ In-Project Demonstration: https://admin.blazor.zone/ (Open source Admin Control Pannel [[BootstrapAdmin](https://github.com/ArgoZhang/BootstrapAdmin)]) **Slide captcha appears for the fourth time after three times of incorrect password input** ## Screenshot ![输入图片说明](https://images.gitee.com/uploads/images/2019/0316/003740_c5175e6b_554725.png "SliderCaptcha.png") ![输入图片说明](https://gitee.com/uploads/images/2019/0410/124955_f9b6d54c_554725.png "Untitled.png") ## Quick Start ### Dependencies font-awesome ### CSS ```html <link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css"> <link href="./src/slidercaptcha.css"> ``` Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS. ### JS ```html <script src="./src/longbow.slidercaptcha.js"></script> ``` Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. ## Usage ```html <div id="captcha"></div> ``` ## API ### JavaScript behavior ```html <div id="captcha"></div> <script> $('#captcha').sliderCaptcha(); </script> ``` ### Options ```html <div id="captcha"></div> <script> $('#captcha').sliderCaptcha({ width: 280, height: 150, sliderL: 42, sliderR: 9, offset: 5, loadingText: 'Loading...', failedText: 'Try again', barText: 'Slide right to fill', repeatIcon: 'fa fa-redo', setSrc: function () { }, onSuccess: function () { }, onFail: function () { }, onRefresh: function () { } }); </script> ``` Name | Type | Default | Description | ---|---|---|--- width | integer | 280 | Background picture width height | integer | 150 | Background picture height sliderL | integer | 42 | Puzzle Width sliderR | integer | 9 | Puzzle Outburst Radius offset | integer | 5 | Validation of error tolerance deviation. default 5px loadingText | string | "Loading..." | Text information displayed when images are loaded failedText | string | "Try again" | Text information displayed when validation fails barText | integer | "Slide right to fill" | Text information displayed when dragging the slider to prepare for dragging repeatIcon | string | "fa fa-redo" | Reload icons. dependent on `font-awesome` setSrc | function | "https://picsum.photos/?image=random" | Setting the Picture Loading Path onSuccess | function | *null* | Callback this function when validation passes onFail | function | *null* | Callback this function when validation fails onRefresh | function | *null* | Callback this function when click on the reload icon localImages | function | function () { return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg'; } | Call this function when the image loading fails ### Methods ```html <div id="captcha"></div> <script> $('#captcha').sliderCaptcha(); $('#captcha').sliderCaptcha('reset'); </script> ``` Method | Example | Description ---|---|--- reset | $('#captcha').sliderCaptcha('reset') | reset ## Events None ## Issue Please go to [Issue](../../issues) page to create issue ## Verify On Server Side ### Client Code Example #### 1. JavaScript ```js 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; } ``` Parameter | Type | Default | Descript | ---|---|---|--- arr | array | object | trails of user dragging slider | url | string | remoteUrl | option.remoteUrl | sample code ```js $('#captcha').sliderCaptcha({ 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" }); ``` ### Server Code Example #### 1. NETCore WebApi ```csharp /// <summary> /// slider verify web api /// </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 You may have precision problems, but you can use BigDecimal optimization ```java @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; } } ``` ## Q&A [linked issue](https://gitee.com/LongbowEnterprise/SliderCaptcha/issues/I110MF?from=project-issue) ## Contribution 1. Fork this project 2. Create new Feat_xxx branch 3. Commit 4. Create Pull Request

评论收藏

内容反馈