{"id":15630067,"url":"https://github.com/argozhang/slidercaptcha","last_synced_at":"2025-04-06T08:14:19.971Z","repository":{"id":39345159,"uuid":"175858522","full_name":"ArgoZhang/SliderCaptcha","owner":"ArgoZhang","description":"Slider captcha support mobile","archived":false,"fork":false,"pushed_at":"2023-09-22T07:55:51.000Z","size":1267,"stargazers_count":280,"open_issues_count":11,"forks_count":81,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T06:10:00.370Z","etag":null,"topics":["bootstrap","captcha","jquery","slider"],"latest_commit_sha":null,"homepage":"http://longbowenterprise.gitee.io/slidercaptcha/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ArgoZhang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-15T16:49:09.000Z","updated_at":"2025-03-13T10:40:54.000Z","dependencies_parsed_at":"2024-10-22T10:21:11.002Z","dependency_job_id":null,"html_url":"https://github.com/ArgoZhang/SliderCaptcha","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArgoZhang%2FSliderCaptcha","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArgoZhang%2FSliderCaptcha/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArgoZhang%2FSliderCaptcha/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ArgoZhang%2FSliderCaptcha/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ArgoZhang","download_url":"https://codeload.github.com/ArgoZhang/SliderCaptcha/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247451665,"owners_count":20940944,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","captcha","jquery","slider"],"created_at":"2024-10-03T10:30:00.715Z","updated_at":"2025-04-06T08:14:19.939Z","avatar_url":"https://github.com/ArgoZhang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Slider Captcha\n\n\u003cspan\u003eEnglish\u003c/span\u003e | \u003ca href=\"README.zh-CN.md\"\u003e中文\u003c/a\u003e\n\n---\n\nThe 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.\n\n## Blazor Version\n\nhttp://blazor.sdgxgz.com/captchas\n\n## Online Demonstration\nSingle page presentation: http://longbowenterprise.gitee.io/slidercaptcha/  \nIn-Project Demonstration: https://admin.blazor.zone/ (Open source Admin Control Pannel [[BootstrapAdmin](https://github.com/ArgoZhang/BootstrapAdmin)])  \n**Slide captcha appears for the fourth time after three times of incorrect password input**  \n\n## Screenshot\n![输入图片说明](https://images.gitee.com/uploads/images/2019/0316/003740_c5175e6b_554725.png \"SliderCaptcha.png\")\n![输入图片说明](https://gitee.com/uploads/images/2019/0410/124955_f9b6d54c_554725.png \"Untitled.png\")\n\n## Quick Start\n\n### Dependencies \nfont-awesome\n\n### CSS\n\n```html\n\u003clink href=\"https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css\"\u003e\n\u003clink href=\"./src/slidercaptcha.css\"\u003e\n```\nCopy-paste the stylesheet `\u003clink\u003e` into your `\u003chead\u003e` before all other stylesheets to load our CSS.\n\n### JS\n\n```html\n\u003cscript src=\"./src/longbow.slidercaptcha.js\"\u003e\u003c/script\u003e\n```\n\nPlace the following `\u003cscript\u003e`s near the end of your pages, right before the closing `\u003c/body\u003e` tag, to enable them. \n\n## Usage\n\n```html\n\u003cdiv id=\"captcha\"\u003e\u003c/div\u003e\n```\n\n## API\n\n### JavaScript behavior\n\n```html\n\u003cdiv id=\"captcha\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    sliderCaptcha({\n        id: 'captcha'\n    });\n\u003c/script\u003e   \n```\n\n### Options\n\n```html\n\u003cdiv id=\"captcha\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    sliderCaptcha({\n        id: 'captcha',\n        width: 280,\n        height: 150,\n        sliderL: 42,\n        sliderR: 9,\n        offset: 5,\n        loadingText: 'Loading...',\n        failedText: 'Try again',\n        barText: 'Slide right to fill',\n        repeatIcon: 'fa fa-redo',\n        setSrc: function () {\n            \n        },\n        onSuccess: function () {\n            \n        },\n        onFail: function () {\n\n        },\n        onRefresh: function () {\n        \n        }\n    });\n\u003c/script\u003e   \n```\n\nName | Type | Default | Description |\n---|---|---|---\nwidth | integer | 280 | Background picture width\nheight | integer | 150 | Background picture height\nsliderL | integer | 42 | Puzzle Width\nsliderR | integer | 9 | Puzzle Outburst Radius\noffset | integer | 5 | Validation of error tolerance deviation. default 5px\nloadingText | string | \"Loading...\" | Text information displayed when images are loaded\nfailedText | string | \"Try again\" | Text information displayed when validation fails\nbarText | integer | \"Slide right to fill\" | Text information displayed when dragging the slider to prepare for dragging\nrepeatIcon | string | \"fa fa-redo\" | Reload icons. dependent on `font-awesome`\nsetSrc | function | \"https://picsum.photos/?image=random\" | Setting the Picture Loading Path\nonSuccess | function | *null* | Callback this function when validation passes\nonFail | function | *null* | Callback this function when validation fails\nonRefresh | function | *null* | Callback this function when click on the reload icon\nlocalImages | function | function () { return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg'; } | Call this function when the image loading fails\n\n### Methods\n\n```html\n\u003cdiv id=\"captcha\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    var captcha = sliderCaptcha({\n        id: 'captcha'\n    });\n    captcha.reset();\n\u003c/script\u003e   \n```\n\nMethod | Example | Description\n---|---|---\nreset | captcha.reset() | reset\n\n## Events\n\nNone\n\n## Issue\nPlease go to [Issue](../../issues) page to create issue\n\n## Verify On Server Side\n### Client Code Example\n#### 1. JavaScript\n```js\nverify: function (arr, url) {\n    var ret = false;\n    $.ajax({\n        url: url,\n        data: JSON.stringify(arr),\n        async: false,\n        cache: false,\n        type: 'POST',\n        contentType: 'application/json',\n        dataType: 'json',\n        success: function (result) {\n            ret = result;\n        }\n    });\n    return ret;\n}\n```\n\nParameter | Type | Default | Descript |\n---|---|---|---\narr | array | object | trails of user dragging slider  | \nurl | string | remoteUrl | option.remoteUrl |\n\nsample code\n```js\nsliderCaptcha({\n    id: 'captcha',\n    repeatIcon: 'fa fa-redo',\n    setSrc: function () {\n        return 'https://imgs.blazor.zone/images/Pic' + Math.round(Math.random() * 136) + '.jpg';\n    },\n    onSuccess: function () {\n        window.location.href = 'https://gitee.com/LongbowEnterprise/SliderCaptcha';\n    },\n    remoteUrl: \"api/Captcha\"\n});\n```\n\n### Server Code Example\n#### 1. NETCore WebApi\n```csharp\n/// \u003csummary\u003e\n/// slider verify web api\n/// \u003c/summary\u003e\n[Route(\"api/[controller]\")]\n[ApiController]\n[AllowAnonymous]\npublic class CaptchaController : ControllerBase\n{\n    /// \u003csummary\u003e\n    /// 服务器端滑块验证方法\n    /// \u003c/summary\u003e\n    /// \u003creturns\u003e\u003c/returns\u003e\n    [HttpPost]\n    public bool Post([FromBody]List\u003cint\u003e datas)\n    {\n        var sum = datas.Sum();\n        var avg = sum * 1.0 / datas.Count;\n        var stddev = datas.Select(v =\u003e Math.Pow(v - avg, 2)).Sum() / datas.Count;\n        return stddev != 0;\n    }\n}\n```\n\n#### 2. JAVA SpringBoot\nYou may have precision problems, but you can use BigDecimal optimization\n```java\n@RestController\n@RequestMapping(\"/sliderCaptcha\")\npublic class SliderCaptchaController {\n\n\t@PostMapping(\"/isVerify\")\n\tpublic boolean isVerify(List\u003cInteger\u003e datas) {\n\t\tint sum = 0;\n\t\tfor (Integer data : datas) {\n\t\t\tsum += data;\n\t\t}\n\t\tdouble avg = sum * 1.0 / datas.size();\n\t\t\n\t\tdouble sum2 = 0.0;\n\t\tfor (Integer data : datas) {\n\t\t\tsum2 += Math.pow(data - avg, 2);\n\t\t}\n\t\t\n\t\tdouble stddev = sum2 / datas.size();\n\t\treturn stddev != 0;\n\t}\n\t\n}\n```\n\n## Q\u0026A\n\n[linked issue](https://gitee.com/LongbowEnterprise/SliderCaptcha/issues/I110MF?from=project-issue)  \n\n## Contribution\n\n1. Fork this project\n2. Create new Feat_xxx branch\n3. Commit \n4. Create Pull Request","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargozhang%2Fslidercaptcha","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fargozhang%2Fslidercaptcha","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargozhang%2Fslidercaptcha/lists"}