All Projects → ArgoZhang → Slidercaptcha

ArgoZhang / Slidercaptcha

Licence: apache-2.0
Slider captcha support mobile

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Slidercaptcha

Spring Web Rss Channels
A Full Stack RSS Reader web application built with Spring MVC and JSP. It uses libraries like Spring, JPA, Bootstrap, Apache Tiles, JSP etc. There is also a static code analysis tool called Checkstyle.
Stars: ✭ 40 (-54.55%)
Mutual labels:  bootstrap, jquery
Restfeel
RESTFeel: 一个企业级的API管理&测试平台。RESTFeel帮助你设计、开发、测试您的API。
Stars: ✭ 59 (-32.95%)
Mutual labels:  bootstrap, jquery
Vue2 Admin Lte
📊 adminLTE to vuejs v2.x converting project
Stars: ✭ 1,023 (+1062.5%)
Mutual labels:  bootstrap, jquery
Ecommerce
We're going to take you step-by-step to build a modern, fully open-source, eCommerce web application using Python, Django, Bootstrap, Javascript, and more.
Stars: ✭ 980 (+1013.64%)
Mutual labels:  bootstrap, jquery
Blog
项目已迁移至
Stars: ✭ 87 (-1.14%)
Mutual labels:  bootstrap, jquery
Bootstrap 4 Autocomplete
A simple autocomplete/typeahead for Bootstrap 4 and jQuery
Stars: ✭ 36 (-59.09%)
Mutual labels:  bootstrap, jquery
Jcslider
🏂 A responsive slider jQuery plugin with CSS animations
Stars: ✭ 52 (-40.91%)
Mutual labels:  slider, jquery
Ruhuman
simple captcha alternative
Stars: ✭ 29 (-67.05%)
Mutual labels:  captcha, jquery
Blog By Nodejs
NodeJs + Mongoose + Express + jQuery + BootStrap + Ejs + Webpack搭建多人博客
Stars: ✭ 72 (-18.18%)
Mutual labels:  bootstrap, jquery
Minecraft Rcon
Minecraft RCON Web (using PHP) Console
Stars: ✭ 70 (-20.45%)
Mutual labels:  bootstrap, jquery
Price Tracker
Live and historical prices for fiat currencies, crypto currencies and gold/silver over REST and WebSocket APIs, using Redis as storage. Node.js, jQuery, Bootstrap
Stars: ✭ 32 (-63.64%)
Mutual labels:  bootstrap, jquery
Jquery.toaster
jQuery plugin for displaying customizable toast notifications via Bootstrap alerts
Stars: ✭ 74 (-15.91%)
Mutual labels:  bootstrap, jquery
Gridstrap.js
gridstrap.js is a jQuery plugin designed to take Bootstrap's CSS grid system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour.
Stars: ✭ 32 (-63.64%)
Mutual labels:  bootstrap, jquery
Bootstrap Show Modal
A Bootstrap 4 / jQuery plugin wrapper, to create modals dynamically in JavaScript
Stars: ✭ 38 (-56.82%)
Mutual labels:  bootstrap, jquery
Learningprocess
💥 本仓库用于记录我的学习历程和学习笔记
Stars: ✭ 31 (-64.77%)
Mutual labels:  bootstrap, jquery
Nodejs Socketio Chat App
MEAN Stack & Socket.IO Real-time Chat App | A MEAN stack based Real Time chat application
Stars: ✭ 45 (-48.86%)
Mutual labels:  bootstrap, jquery
Bootstrap
Open Source JS plugins
Stars: ✭ 13 (-85.23%)
Mutual labels:  bootstrap, jquery
Ruoyi
(RuoYi)官方仓库 基于SpringBoot的权限管理系统 易读易懂、界面简洁美观。 核心技术采用Spring、MyBatis、Shiro没有任何其它重度依赖。直接运行即可用
Stars: ✭ 905 (+928.41%)
Mutual labels:  bootstrap, jquery
Vue
Stars: ✭ 65 (-26.14%)
Mutual labels:  bootstrap, jquery
Curso Sistemas Web Com Spring Javascript Bootstrap
Stars: ✭ 74 (-15.91%)
Mutual labels:  bootstrap, jquery

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])
Slide captcha appears for the fourth time after three times of incorrect password input

Screenshot

输入图片说明 输入图片说明

Quick Start

Dependencies

font-awesome

CSS

<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

<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

<div id="captcha"></div>

API

JavaScript behavior

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

<div id="captcha"></div>
<script>
    var captcha = sliderCaptcha({
        id: 'captcha'
    });
    captcha.reset();
</script>   
Method Example Description
reset captcha.reset() reset

Events

None

Issue

Please go to Issue page to create issue

Verify On Server Side

Client Code Example

1. JavaScript

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

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

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

@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

Contribution

  1. Fork this project
  2. Create new Feat_xxx branch
  3. Commit
  4. Create Pull Request
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].