# SliderCaptcha
**Repository Path**: harry0102/SliderCaptcha
## Basic Information
- **Project Name**: SliderCaptcha
- **Description**: 滑块验证码，用户通过拖动滑块完成校验，支持PC端及移动端，新增 Blazor 版本的滑块验证码
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: http://dotnetchina.gitee.io/slidercaptcha
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 674
- **Created**: 2023-11-05
- **Last Updated**: 2023-11-05
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## Slider Captcha
English | 中文
---
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
## Quick Start
### Dependencies
font-awesome
### CSS
```html
```
Copy-paste the stylesheet `` into your `` before all other stylesheets to load our CSS.
### JS
```html
```
Place the following `
```
### Options
```html
```
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
```
Method | Example | Description
---|---|---
reset | captcha.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
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"
});
```
### Server Code Example
#### 1. NETCore WebApi
```csharp
///
/// slider verify web api
///
[Route("api/[controller]")]
[ApiController]
[AllowAnonymous]
public class CaptchaController : ControllerBase
{
///
/// 服务器端滑块验证方法
///
///
[HttpPost]
public bool Post([FromBody]List 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 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