63 changed files with 1 additions and 44730 deletions
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.3 KiB |
@ -1,13 +0,0 @@ |
|||
### 该问题是怎么引起的？ |
|||
|
|||
|
|||
|
|||
### 重现步骤 |
|||
|
|||
|
|||
|
|||
### 报错信息 |
|||
|
|||
|
|||
|
|||
|
|||
@ -1,15 +0,0 @@ |
|||
### 相关的Issue |
|||
|
|||
|
|||
### 原因（目的、决解的问题等） |
|||
|
|||
|
|||
### 描述（做了什么，变更了什么） |
|||
|
|||
|
|||
### 测试用例 |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
@ -1,341 +0,0 @@ |
|||
## Ignore Visual Studio temporary files, build results, and |
|||
## files generated by popular Visual Studio add-ons. |
|||
## |
|||
## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore |
|||
|
|||
# User-specific files |
|||
*.rsuser |
|||
*.suo |
|||
*.user |
|||
*.userosscache |
|||
*.sln.docstates |
|||
|
|||
# User-specific files (MonoDevelop/Xamarin Studio) |
|||
*.userprefs |
|||
|
|||
# Build results |
|||
[Dd]ebug/ |
|||
[Dd]ebugPublic/ |
|||
[Rr]elease/ |
|||
[Rr]eleases/ |
|||
x64/ |
|||
x86/ |
|||
[Aa][Rr][Mm]/ |
|||
[Aa][Rr][Mm]64/ |
|||
bld/ |
|||
[Bb]in/ |
|||
[Oo]bj/ |
|||
[Ll]og/ |
|||
|
|||
# Visual Studio 2015/2017 cache/options directory |
|||
.vs/ |
|||
# Uncomment if you have tasks that create the project's static files in wwwroot |
|||
#wwwroot/ |
|||
|
|||
# Visual Studio 2017 auto generated files |
|||
Generated\ Files/ |
|||
|
|||
# MSTest test Results |
|||
[Tt]est[Rr]esult*/ |
|||
[Bb]uild[Ll]og.* |
|||
|
|||
# NUNIT |
|||
*.VisualState.xml |
|||
TestResult.xml |
|||
|
|||
# Build Results of an ATL Project |
|||
[Dd]ebugPS/ |
|||
[Rr]eleasePS/ |
|||
dlldata.c |
|||
|
|||
# Benchmark Results |
|||
BenchmarkDotNet.Artifacts/ |
|||
|
|||
# .NET Core |
|||
project.lock.json |
|||
project.fragment.lock.json |
|||
artifacts/ |
|||
|
|||
# StyleCop |
|||
StyleCopReport.xml |
|||
|
|||
# Files built by Visual Studio |
|||
*_i.c |
|||
*_p.c |
|||
*_h.h |
|||
*.ilk |
|||
*.meta |
|||
*.obj |
|||
*.iobj |
|||
*.pch |
|||
*.pdb |
|||
*.ipdb |
|||
*.pgc |
|||
*.pgd |
|||
*.rsp |
|||
*.sbr |
|||
*.tlb |
|||
*.tli |
|||
*.tlh |
|||
*.tmp |
|||
*.tmp_proj |
|||
*_wpftmp.csproj |
|||
*.log |
|||
*.vspscc |
|||
*.vssscc |
|||
.builds |
|||
*.pidb |
|||
*.svclog |
|||
*.scc |
|||
|
|||
# Chutzpah Test files |
|||
_Chutzpah* |
|||
|
|||
# Visual C++ cache files |
|||
ipch/ |
|||
*.aps |
|||
*.ncb |
|||
*.opendb |
|||
*.opensdf |
|||
*.sdf |
|||
*.cachefile |
|||
*.VC.db |
|||
*.VC.VC.opendb |
|||
|
|||
# Visual Studio profiler |
|||
*.psess |
|||
*.vsp |
|||
*.vspx |
|||
*.sap |
|||
|
|||
# Visual Studio Trace Files |
|||
*.e2e |
|||
|
|||
# TFS 2012 Local Workspace |
|||
$tf/ |
|||
|
|||
# Guidance Automation Toolkit |
|||
*.gpState |
|||
|
|||
# ReSharper is a .NET coding add-in |
|||
_ReSharper*/ |
|||
*.[Rr]e[Ss]harper |
|||
*.DotSettings.user |
|||
|
|||
# JustCode is a .NET coding add-in |
|||
.JustCode |
|||
|
|||
# TeamCity is a build add-in |
|||
_TeamCity* |
|||
|
|||
# DotCover is a Code Coverage Tool |
|||
*.dotCover |
|||
|
|||
# AxoCover is a Code Coverage Tool |
|||
.axoCover/* |
|||
!.axoCover/settings.json |
|||
|
|||
# Visual Studio code coverage results |
|||
*.coverage |
|||
*.coveragexml |
|||
|
|||
# NCrunch |
|||
_NCrunch_* |
|||
.*crunch*.local.xml |
|||
nCrunchTemp_* |
|||
|
|||
# MightyMoose |
|||
*.mm.* |
|||
AutoTest.Net/ |
|||
|
|||
# Web workbench (sass) |
|||
.sass-cache/ |
|||
|
|||
# Installshield output folder |
|||
[Ee]xpress/ |
|||
|
|||
# DocProject is a documentation generator add-in |
|||
DocProject/buildhelp/ |
|||
DocProject/Help/*.HxT |
|||
DocProject/Help/*.HxC |
|||
DocProject/Help/*.hhc |
|||
DocProject/Help/*.hhk |
|||
DocProject/Help/*.hhp |
|||
DocProject/Help/Html2 |
|||
DocProject/Help/html |
|||
|
|||
# Click-Once directory |
|||
publish/ |
|||
|
|||
# Publish Web Output |
|||
*.[Pp]ublish.xml |
|||
*.azurePubxml |
|||
# Note: Comment the next line if you want to checkin your web deploy settings, |
|||
# but database connection strings (with potential passwords) will be unencrypted |
|||
*.pubxml |
|||
*.publishproj |
|||
|
|||
# Microsoft Azure Web App publish settings. Comment the next line if you want to |
|||
# checkin your Azure Web App publish settings, but sensitive information contained |
|||
# in these scripts will be unencrypted |
|||
PublishScripts/ |
|||
|
|||
# NuGet Packages |
|||
*.nupkg |
|||
# The packages folder can be ignored because of Package Restore |
|||
**/[Pp]ackages/* |
|||
# except build/, which is used as an MSBuild target. |
|||
!**/[Pp]ackages/build/ |
|||
# Uncomment if necessary however generally it will be regenerated when needed |
|||
#!**/[Pp]ackages/repositories.config |
|||
# NuGet v3's project.json files produces more ignorable files |
|||
*.nuget.props |
|||
*.nuget.targets |
|||
|
|||
# Microsoft Azure Build Output |
|||
csx/ |
|||
*.build.csdef |
|||
|
|||
# Microsoft Azure Emulator |
|||
ecf/ |
|||
rcf/ |
|||
|
|||
# Windows Store app package directories and files |
|||
AppPackages/ |
|||
BundleArtifacts/ |
|||
Package.StoreAssociation.xml |
|||
_pkginfo.txt |
|||
*.appx |
|||
|
|||
# Visual Studio cache files |
|||
# files ending in .cache can be ignored |
|||
*.[Cc]ache |
|||
# but keep track of directories ending in .cache |
|||
!?*.[Cc]ache/ |
|||
|
|||
# Others |
|||
ClientBin/ |
|||
~$* |
|||
*~ |
|||
*.dbmdl |
|||
*.dbproj.schemaview |
|||
*.jfm |
|||
*.pfx |
|||
*.publishsettings |
|||
orleans.codegen.cs |
|||
|
|||
# Including strong name files can present a security risk |
|||
# (https://github.com/github/gitignore/pull/2483#issue-259490424) |
|||
#*.snk |
|||
|
|||
# Since there are multiple workflows, uncomment next line to ignore bower_components |
|||
# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) |
|||
#bower_components/ |
|||
# ASP.NET Core default setup: bower directory is configured as wwwroot/lib/ and bower restore is true |
|||
**/wwwroot/lib/ |
|||
|
|||
# RIA/Silverlight projects |
|||
Generated_Code/ |
|||
|
|||
# Backup & report files from converting an old project file |
|||
# to a newer Visual Studio version. Backup files are not needed, |
|||
# because we have git ;-) |
|||
_UpgradeReport_Files/ |
|||
Backup*/ |
|||
UpgradeLog*.XML |
|||
UpgradeLog*.htm |
|||
ServiceFabricBackup/ |
|||
*.rptproj.bak |
|||
|
|||
# SQL Server files |
|||
*.mdf |
|||
*.ldf |
|||
*.ndf |
|||
|
|||
# Business Intelligence projects |
|||
*.rdl.data |
|||
*.bim.layout |
|||
*.bim_*.settings |
|||
*.rptproj.rsuser |
|||
|
|||
# Microsoft Fakes |
|||
FakesAssemblies/ |
|||
|
|||
# GhostDoc plugin setting file |
|||
*.GhostDoc.xml |
|||
|
|||
# Node.js Tools for Visual Studio |
|||
.ntvs_analysis.dat |
|||
node_modules/ |
|||
|
|||
# Visual Studio 6 build log |
|||
*.plg |
|||
|
|||
# Visual Studio 6 workspace options file |
|||
*.opt |
|||
|
|||
# Visual Studio 6 auto-generated workspace file (contains which files were open etc.) |
|||
*.vbw |
|||
|
|||
# Visual Studio LightSwitch build output |
|||
**/*.HTMLClient/GeneratedArtifacts |
|||
**/*.DesktopClient/GeneratedArtifacts |
|||
**/*.DesktopClient/ModelManifest.xml |
|||
**/*.Server/GeneratedArtifacts |
|||
**/*.Server/ModelManifest.xml |
|||
_Pvt_Extensions |
|||
|
|||
# Paket dependency manager |
|||
.paket/paket.exe |
|||
paket-files/ |
|||
|
|||
# FAKE - F# Make |
|||
.fake/ |
|||
|
|||
# JetBrains Rider |
|||
.idea/ |
|||
*.sln.iml |
|||
|
|||
# CodeRush personal settings |
|||
.cr/personal |
|||
|
|||
# Python Tools for Visual Studio (PTVS) |
|||
__pycache__/ |
|||
*.pyc |
|||
|
|||
# Cake - Uncomment if you are using it |
|||
# tools/** |
|||
# !tools/packages.config |
|||
|
|||
# Tabs Studio |
|||
*.tss |
|||
|
|||
# Telerik's JustMock configuration file |
|||
*.jmconfig |
|||
|
|||
# BizTalk build output |
|||
*.btp.cs |
|||
*.btm.cs |
|||
*.odx.cs |
|||
*.xsd.cs |
|||
|
|||
# OpenCover UI analysis results |
|||
OpenCover/ |
|||
|
|||
# Azure Stream Analytics local run output |
|||
ASALocalRun/ |
|||
|
|||
# MSBuild Binary and Structured Log |
|||
*.binlog |
|||
|
|||
# NVidia Nsight GPU debugger configuration file |
|||
*.nvuser |
|||
|
|||
# MFractors (Xamarin productivity tool) working folder |
|||
.mfractor/ |
|||
|
|||
# Local History for Visual Studio |
|||
.localhistory/ |
|||
|
|||
# BeatPulse healthcheck temp database |
|||
healthchecksdb |
|||
@ -1,19 +0,0 @@ |
|||
# Integration with Issue Tracker |
|||
# |
|||
# (note that '\' need to be escaped). |
|||
|
|||
[issuetracker "Gitee-Issue"] |
|||
regex = "#((?!.*Issue|issue|Comme|comme).{5})" |
|||
url = "https://gitee.com/LongbowEnterprise/BootstrapAdmin/issues/$1?from=project-issue" |
|||
|
|||
[issuetracker "Gitee-Url"] |
|||
regex = "([a-zA-z]+://[^\\s]*)" |
|||
url = "$1" |
|||
|
|||
[issuetracker "Gitee-Commit"] |
|||
regex = "[C|c]ommit:([^\\s]*)" |
|||
url = "https://gitee.com/LongbowEnterprise/BootstrapAdmin/commit/$1" |
|||
|
|||
[issuetracker "Gitee-PR"] |
|||
regex = "!([\\d]+)" |
|||
url = "https://gitee.com/LongbowEnterprise/BootstrapAdmin/pulls/$1" |
|||
@ -1,191 +0,0 @@ |
|||
Apache License |
|||
Version 2.0, January 2004 |
|||
http://www.apache.org/licenses/ |
|||
|
|||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION |
|||
|
|||
1. Definitions. |
|||
|
|||
"License" shall mean the terms and conditions for use, reproduction, and |
|||
distribution as defined by Sections 1 through 9 of this document. |
|||
|
|||
"Licensor" shall mean the copyright owner or entity authorized by the copyright |
|||
owner that is granting the License. |
|||
|
|||
"Legal Entity" shall mean the union of the acting entity and all other entities |
|||
that control, are controlled by, or are under common control with that entity. |
|||
For the purposes of this definition, "control" means (i) the power, direct or |
|||
indirect, to cause the direction or management of such entity, whether by |
|||
contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the |
|||
outstanding shares, or (iii) beneficial ownership of such entity. |
|||
|
|||
"You" (or "Your") shall mean an individual or Legal Entity exercising |
|||
permissions granted by this License. |
|||
|
|||
"Source" form shall mean the preferred form for making modifications, including |
|||
but not limited to software source code, documentation source, and configuration |
|||
files. |
|||
|
|||
"Object" form shall mean any form resulting from mechanical transformation or |
|||
translation of a Source form, including but not limited to compiled object code, |
|||
generated documentation, and conversions to other media types. |
|||
|
|||
"Work" shall mean the work of authorship, whether in Source or Object form, made |
|||
available under the License, as indicated by a copyright notice that is included |
|||
in or attached to the work (an example is provided in the Appendix below). |
|||
|
|||
"Derivative Works" shall mean any work, whether in Source or Object form, that |
|||
is based on (or derived from) the Work and for which the editorial revisions, |
|||
annotations, elaborations, or other modifications represent, as a whole, an |
|||
original work of authorship. For the purposes of this License, Derivative Works |
|||
shall not include works that remain separable from, or merely link (or bind by |
|||
name) to the interfaces of, the Work and Derivative Works thereof. |
|||
|
|||
"Contribution" shall mean any work of authorship, including the original version |
|||
of the Work and any modifications or additions to that Work or Derivative Works |
|||
thereof, that is intentionally submitted to Licensor for inclusion in the Work |
|||
by the copyright owner or by an individual or Legal Entity authorized to submit |
|||
on behalf of the copyright owner. For the purposes of this definition, |
|||
"submitted" means any form of electronic, verbal, or written communication sent |
|||
to the Licensor or its representatives, including but not limited to |
|||
communication on electronic mailing lists, source code control systems, and |
|||
issue tracking systems that are managed by, or on behalf of, the Licensor for |
|||
the purpose of discussing and improving the Work, but excluding communication |
|||
that is conspicuously marked or otherwise designated in writing by the copyright |
|||
owner as "Not a Contribution." |
|||
|
|||
"Contributor" shall mean Licensor and any individual or Legal Entity on behalf |
|||
of whom a Contribution has been received by Licensor and subsequently |
|||
incorporated within the Work. |
|||
|
|||
2. Grant of Copyright License. |
|||
|
|||
Subject to the terms and conditions of this License, each Contributor hereby |
|||
grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, |
|||
irrevocable copyright license to reproduce, prepare Derivative Works of, |
|||
publicly display, publicly perform, sublicense, and distribute the Work and such |
|||
Derivative Works in Source or Object form. |
|||
|
|||
3. Grant of Patent License. |
|||
|
|||
Subject to the terms and conditions of this License, each Contributor hereby |
|||
grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, |
|||
irrevocable (except as stated in this section) patent license to make, have |
|||
made, use, offer to sell, sell, import, and otherwise transfer the Work, where |
|||
such license applies only to those patent claims licensable by such Contributor |
|||
that are necessarily infringed by their Contribution(s) alone or by combination |
|||
of their Contribution(s) with the Work to which such Contribution(s) was |
|||
submitted. If You institute patent litigation against any entity (including a |
|||
cross-claim or counterclaim in a lawsuit) alleging that the Work or a |
|||
Contribution incorporated within the Work constitutes direct or contributory |
|||
patent infringement, then any patent licenses granted to You under this License |
|||
for that Work shall terminate as of the date such litigation is filed. |
|||
|
|||
4. Redistribution. |
|||
|
|||
You may reproduce and distribute copies of the Work or Derivative Works thereof |
|||
in any medium, with or without modifications, and in Source or Object form, |
|||
provided that You meet the following conditions: |
|||
|
|||
You must give any other recipients of the Work or Derivative Works a copy of |
|||
this License; and |
|||
You must cause any modified files to carry prominent notices stating that You |
|||
changed the files; and |
|||
You must retain, in the Source form of any Derivative Works that You distribute, |
|||
all copyright, patent, trademark, and attribution notices from the Source form |
|||
of the Work, excluding those notices that do not pertain to any part of the |
|||
Derivative Works; and |
|||
If the Work includes a "NOTICE" text file as part of its distribution, then any |
|||
Derivative Works that You distribute must include a readable copy of the |
|||
attribution notices contained within such NOTICE file, excluding those notices |
|||
that do not pertain to any part of the Derivative Works, in at least one of the |
|||
following places: within a NOTICE text file distributed as part of the |
|||
Derivative Works; within the Source form or documentation, if provided along |
|||
with the Derivative Works; or, within a display generated by the Derivative |
|||
Works, if and wherever such third-party notices normally appear. The contents of |
|||
the NOTICE file are for informational purposes only and do not modify the |
|||
License. You may add Your own attribution notices within Derivative Works that |
|||
You distribute, alongside or as an addendum to the NOTICE text from the Work, |
|||
provided that such additional attribution notices cannot be construed as |
|||
modifying the License. |
|||
You may add Your own copyright statement to Your modifications and may provide |
|||
additional or different license terms and conditions for use, reproduction, or |
|||
distribution of Your modifications, or for any such Derivative Works as a whole, |
|||
provided Your use, reproduction, and distribution of the Work otherwise complies |
|||
with the conditions stated in this License. |
|||
|
|||
5. Submission of Contributions. |
|||
|
|||
Unless You explicitly state otherwise, any Contribution intentionally submitted |
|||
for inclusion in the Work by You to the Licensor shall be under the terms and |
|||
conditions of this License, without any additional terms or conditions. |
|||
Notwithstanding the above, nothing herein shall supersede or modify the terms of |
|||
any separate license agreement you may have executed with Licensor regarding |
|||
such Contributions. |
|||
|
|||
6. Trademarks. |
|||
|
|||
This License does not grant permission to use the trade names, trademarks, |
|||
service marks, or product names of the Licensor, except as required for |
|||
reasonable and customary use in describing the origin of the Work and |
|||
reproducing the content of the NOTICE file. |
|||
|
|||
7. Disclaimer of Warranty. |
|||
|
|||
Unless required by applicable law or agreed to in writing, Licensor provides the |
|||
Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, |
|||
including, without limitation, any warranties or conditions of TITLE, |
|||
NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are |
|||
solely responsible for determining the appropriateness of using or |
|||
redistributing the Work and assume any risks associated with Your exercise of |
|||
permissions under this License. |
|||
|
|||
8. Limitation of Liability. |
|||
|
|||
In no event and under no legal theory, whether in tort (including negligence), |
|||
contract, or otherwise, unless required by applicable law (such as deliberate |
|||
and grossly negligent acts) or agreed to in writing, shall any Contributor be |
|||
liable to You for damages, including any direct, indirect, special, incidental, |
|||
or consequential damages of any character arising as a result of this License or |
|||
out of the use or inability to use the Work (including but not limited to |
|||
damages for loss of goodwill, work stoppage, computer failure or malfunction, or |
|||
any and all other commercial damages or losses), even if such Contributor has |
|||
been advised of the possibility of such damages. |
|||
|
|||
9. Accepting Warranty or Additional Liability. |
|||
|
|||
While redistributing the Work or Derivative Works thereof, You may choose to |
|||
offer, and charge a fee for, acceptance of support, warranty, indemnity, or |
|||
other liability obligations and/or rights consistent with this License. However, |
|||
in accepting such obligations, You may act only on Your own behalf and on Your |
|||
sole responsibility, not on behalf of any other Contributor, and only if You |
|||
agree to indemnify, defend, and hold each Contributor harmless for any liability |
|||
incurred by, or claims asserted against, such Contributor by reason of your |
|||
accepting any such warranty or additional liability. |
|||
|
|||
END OF TERMS AND CONDITIONS |
|||
|
|||
APPENDIX: How to apply the Apache License to your work |
|||
|
|||
To apply the Apache License to your work, attach the following boilerplate |
|||
notice, with the fields enclosed by brackets "{}" replaced with your own |
|||
identifying information. (Don't include the brackets!) The text should be |
|||
enclosed in the appropriate comment syntax for the file format. We also |
|||
recommend that a file or class name and description of purpose be included on |
|||
the same "printed page" as the copyright notice for easier identification within |
|||
third-party archives. |
|||
|
|||
Copyright 2019 LaoGanDie |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
@ -1,230 +0,0 @@ |
|||
## 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. |
|||
|
|||
## Online Demonstration |
|||
Single page presentation: http://longbowenterprise.gitee.io/slidercaptcha/ |
|||
In-Project Demonstration: https://argo.zylweb.cn/ (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 |
|||
jQuery bootstrap font-awesome |
|||
|
|||
### CSS |
|||
|
|||
```html |
|||
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.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 |
|||
|
|||
```html |
|||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> |
|||
<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.sdgxgz.com/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 |
|||
@ -1,241 +0,0 @@ |
|||
## 滑块式验证码 |
|||
|
|||
<a href="README.md">English</a> | <span>中文</span> |
|||
|
|||
--- |
|||
|
|||
用户通过拖动滑块行为来完成校验，支持PC端及移动端。可以将用户拖动行为的时间、精度，滑动轨迹等信息到服务器，然后进行后台算法验证。 |
|||
|
|||
## 在线演示 |
|||
单页面演示：http://longbowenterprise.gitee.io/slidercaptcha/ |
|||
项目内演示：http://ba.sdgxgz.com/ (本项目为开源后台管理框架 [[BootstrapAdmin](https://gitee.com/LongbowEnterprise/BootstrapAdmin)]) |
|||
**输入三次错误密码后第四次出现滑块式行为验证码** |
|||
|
|||
## 效果图 |
|||
 |
|||
 |
|||
|
|||
## 快速开始 |
|||
|
|||
### 组件依赖 jQuery bootstrap font-awesome |
|||
|
|||
### CSS |
|||
|
|||
```html |
|||
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> |
|||
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css"> |
|||
<link href="./src/slidercaptcha.css"> |
|||
``` |
|||
将引入样式表的 <link> 标签复制并粘贴到 <head> 中，并放在所有其他样式表之前。 |
|||
|
|||
### JS |
|||
|
|||
```html |
|||
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> |
|||
<script src="./src/longbow.slidercaptcha.js"></script> |
|||
``` |
|||
|
|||
将引入脚本的 <script> 标签复制并粘贴到 <body> 最后面。 |
|||
|
|||
## 用法 |
|||
|
|||
添加网页Html元素 |
|||
|
|||
```html |
|||
<div id="captcha"></div> |
|||
``` |
|||
|
|||
## API |
|||
|
|||
### 通过 javascript 初始化控件 |
|||
|
|||
```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: '正在加载中...', |
|||
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 为服务器端请求地址，返回值为布尔值 |
|||
|
|||
### 方法 |
|||
|
|||
```html |
|||
<div id="captcha"></div> |
|||
<script> |
|||
$('#captcha').sliderCaptcha(); |
|||
$('#captcha').sliderCaptcha('reset'); |
|||
</script> |
|||
``` |
|||
|
|||
Method | Example | Description |
|||
---|---|--- |
|||
reset | $('#captcha').sliderCaptcha('reset') | 重置控件 |
|||
|
|||
## 事件 |
|||
无 |
|||
|
|||
## Issue |
|||
请前往 [Issue](../../issues) 页面添加问题 |
|||
|
|||
## 服务器端认证 |
|||
### 客户端代码示例 |
|||
#### 1. JavaScript |
|||
控件配置信息中有 remoteUrl 和 verify 两个配置项，合理正确的设置这两个配置项即可达到想要的服务器端认证逻辑 |
|||
remoteUrl 默认值为 null 表示未启用服务器端认证方式，设置请求的 webapi 地址后启用服务器端认证方法 |
|||
控件默认请求服务器端方法如下，可适当进行更改 |
|||
```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; |
|||
} |
|||
``` |
|||
|
|||
参数 | 类型 | 默认值 | 说明 | |
|||
---|---|---|--- |
|||
arr | array | object | 客户端拖动滑块轨迹数组 | |
|||
url | string | remoteUrl | 配置项中的 remoteUrl 参数值 | |
|||
|
|||
完整示例代码 |
|||
```js |
|||
$('#captcha').sliderCaptcha({ |
|||
repeatIcon: 'fa fa-redo', |
|||
setSrc: function () { |
|||
return 'https://imgs.sdgxgz.com/images/Pic' + Math.round(Math.random() * 136) + '.jpg'; |
|||
}, |
|||
onSuccess: function () { |
|||
window.location.href = 'https://gitee.com/LongbowEnterprise/SliderCaptcha'; |
|||
}, |
|||
remoteUrl: "api/Captcha" |
|||
}); |
|||
``` |
|||
|
|||
### 服务器端代码示例 |
|||
#### 1. NETCore WebApi |
|||
```csharp |
|||
/// <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计算即可 |
|||
```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; |
|||
} |
|||
|
|||
} |
|||
``` |
|||
|
|||
## 常见问题 |
|||
|
|||
### 服务端验证的返回结果怎么一直都是true |
|||
|
|||
示例代码中演示的是前端提交用户滑动轨迹到服务器端进行了 Y 轴的平方差校验，为零时才返回 false，否则返回 true，为 true 表示 Y 轴有偏移，简单的认为此操作是人为操作，因为人手拖动过程中的抖动 Y 轴理论上是不可能没有偏移的。因此依据此值进行是否是人为拖动滑块。 |
|||
|
|||
[相关问题](https://gitee.com/LongbowEnterprise/SliderCaptcha/issues/I110MF?from=project-issue) |
|||
|
|||
## 参与贡献 |
|||
|
|||
1. Fork 本项目 |
|||
2. 新建 Feat_xxx 分支 |
|||
3. 提交代码 |
|||
4. 新建 Pull Request |
|||
@ -1,336 +0,0 @@ |
|||
(function ($) { |
|||
'use strict'; |
|||
|
|||
var SliderCaptcha = function (element, options) { |
|||
this.$element = $(element); |
|||
this.options = $.extend({}, SliderCaptcha.DEFAULTS, options); |
|||
this.$element.css({ 'position': 'relative' }); |
|||
this.init(); |
|||
}; |
|||
|
|||
SliderCaptcha.VERSION = '1.0'; |
|||
SliderCaptcha.Author = 'argo@163.com'; |
|||
SliderCaptcha.DEFAULTS = { |
|||
debug: false, |
|||
width: 280, // canvas宽度
|
|||
height: 155, // canvas高度
|
|||
PI: Math.PI, |
|||
sliderL: 42, // 滑块边长
|
|||
sliderR: 9, // 滑块半径
|
|||
offset: 5, // 容错偏差
|
|||
loadingText: '正在加载中...', |
|||
failedText: '再试一次', |
|||
successText: '验证通过', |
|||
barText: '向右滑动填充拼图', |
|||
repeatIcon: 'fa fa-repeat', |
|||
maxLoadCount: 3, |
|||
localImages: function () { |
|||
return 'images/Pic' + Math.round(Math.random() * 4) + '.jpg'; |
|||
}, |
|||
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; |
|||
}, |
|||
remoteUrl: null |
|||
}; |
|||
|
|||
function Plugin(option) { |
|||
return this.each(function () { |
|||
var $this = $(this); |
|||
var data = $this.data('lgb.SliderCaptcha'); |
|||
var options = typeof option === 'object' && option; |
|||
|
|||
if (data && !/reset/.test(option)) return; |
|||
if (!data) $this.data('lgb.SliderCaptcha', data = new SliderCaptcha(this, options)); |
|||
if (typeof option === 'string') data[option](); |
|||
}); |
|||
} |
|||
|
|||
$.fn.sliderCaptcha = Plugin; |
|||
$.fn.sliderCaptcha.Constructor = SliderCaptcha; |
|||
|
|||
var _proto = SliderCaptcha.prototype; |
|||
_proto.init = function () { |
|||
this.initDOM(); |
|||
this.initImg(); |
|||
this.bindEvents(); |
|||
}; |
|||
|
|||
_proto.initDOM = function () { |
|||
var createElement = function (tagName, className) { |
|||
var elment = document.createElement(tagName); |
|||
elment.className = className; |
|||
return elment; |
|||
}; |
|||
|
|||
var createCanvas = function (width, height) { |
|||
var canvas = document.createElement('canvas'); |
|||
canvas.width = width; |
|||
canvas.height = height; |
|||
return canvas; |
|||
}; |
|||
|
|||
var canvas = createCanvas(this.options.width - 2, this.options.height); // 画布
|
|||
var block = canvas.cloneNode(true); // 滑块
|
|||
var sliderContainer = createElement('div', 'sliderContainer'); |
|||
var refreshIcon = createElement('i', 'refreshIcon ' + this.options.repeatIcon); |
|||
var sliderMask = createElement('div', 'sliderMask'); |
|||
var sliderbg = createElement('div', 'sliderbg'); |
|||
var slider = createElement('div', 'slider'); |
|||
var sliderIcon = createElement('i', 'fa fa-arrow-right sliderIcon'); |
|||
var text = createElement('span', 'sliderText'); |
|||
|
|||
block.className = 'block'; |
|||
text.innerHTML = this.options.barText; |
|||
|
|||
var el = this.$element; |
|||
el.append($(canvas)); |
|||
el.append($(refreshIcon)); |
|||
el.append($(block)); |
|||
slider.appendChild(sliderIcon); |
|||
sliderMask.appendChild(slider); |
|||
sliderContainer.appendChild(sliderbg); |
|||
sliderContainer.appendChild(sliderMask); |
|||
sliderContainer.appendChild(text); |
|||
el.append($(sliderContainer)); |
|||
|
|||
var _canvas = { |
|||
canvas: canvas, |
|||
block: block, |
|||
sliderContainer: $(sliderContainer), |
|||
refreshIcon: refreshIcon, |
|||
slider: slider, |
|||
sliderMask: sliderMask, |
|||
sliderIcon: sliderIcon, |
|||
text: $(text), |
|||
canvasCtx: canvas.getContext('2d'), |
|||
blockCtx: block.getContext('2d') |
|||
}; |
|||
|
|||
if ($.isFunction(Object.assign)) { |
|||
Object.assign(this, _canvas); |
|||
} |
|||
else { |
|||
$.extend(this, _canvas); |
|||
} |
|||
}; |
|||
|
|||
_proto.initImg = function () { |
|||
var that = this; |
|||
var isIE = window.navigator.userAgent.indexOf('Trident') > -1; |
|||
var L = this.options.sliderL + this.options.sliderR * 2 + 3; // 滑块实际边长
|
|||
var drawImg = function (ctx, operation) { |
|||
var l = that.options.sliderL; |
|||
var r = that.options.sliderR; |
|||
var PI = that.options.PI; |
|||
var x = that.x; |
|||
var y = that.y; |
|||
ctx.beginPath(); |
|||
ctx.moveTo(x, y); |
|||
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI); |
|||
ctx.lineTo(x + l, y); |
|||
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI); |
|||
ctx.lineTo(x + l, y + l); |
|||
ctx.lineTo(x, y + l); |
|||
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true); |
|||
ctx.lineTo(x, y); |
|||
ctx.lineWidth = 2; |
|||
ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'; |
|||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; |
|||
ctx.stroke(); |
|||
ctx[operation](); |
|||
ctx.globalCompositeOperation = isIE ? 'xor' : 'destination-over'; |
|||
}; |
|||
|
|||
var getRandomNumberByRange = function (start, end) { |
|||
return Math.round(Math.random() * (end - start) + start); |
|||
}; |
|||
var img = new Image(); |
|||
img.crossOrigin = "Anonymous"; |
|||
var loadCount = 0; |
|||
img.onload = function () { |
|||
// 随机创建滑块的位置
|
|||
that.x = getRandomNumberByRange(L + 10, that.options.width - (L + 10)); |
|||
that.y = getRandomNumberByRange(10 + that.options.sliderR * 2, that.options.height - (L + 10)); |
|||
drawImg(that.canvasCtx, 'fill'); |
|||
drawImg(that.blockCtx, 'clip'); |
|||
|
|||
that.canvasCtx.drawImage(img, 0, 0, that.options.width - 2, that.options.height); |
|||
that.blockCtx.drawImage(img, 0, 0, that.options.width - 2, that.options.height); |
|||
var y = that.y - that.options.sliderR * 2 - 1; |
|||
var ImageData = that.blockCtx.getImageData(that.x - 3, y, L, L); |
|||
that.block.width = L; |
|||
that.blockCtx.putImageData(ImageData, 0, y + 1); |
|||
that.text.text(that.text.attr('data-text')); |
|||
}; |
|||
img.onerror = function () { |
|||
loadCount++; |
|||
if (window.location.protocol === 'file:') { |
|||
loadCount = that.options.maxLoadCount; |
|||
console.error("can't load pic resource file from File protocal. Please try http or https"); |
|||
} |
|||
if (loadCount >= that.options.maxLoadCount) { |
|||
that.text.text('加载失败').addClass('text-danger'); |
|||
return; |
|||
} |
|||
img.src = that.options.localImages(); |
|||
}; |
|||
|
|||
img.setSrc = function () { |
|||
var src = ''; |
|||
loadCount = 0; |
|||
that.text.removeClass('text-danger'); |
|||
if ($.isFunction(that.options.setSrc)) src = that.options.setSrc(); |
|||
if (!src || src === '') src = 'https://picsum.photos/' + that.options.width + '/' + that.options.height + '/?image=' + Math.round(Math.random() * 20); |
|||
if (isIE) { // IE浏览器无法通过img.crossOrigin跨域，使用ajax获取图片blob然后转为dataURL显示
|
|||
var xhr = new XMLHttpRequest(); |
|||
xhr.onloadend = function (e) { |
|||
var file = new FileReader(); // FileReader仅支持IE10+
|
|||
file.readAsDataURL(e.target.response); |
|||
file.onloadend = function (e) { |
|||
img.src = e.target.result; |
|||
}; |
|||
}; |
|||
xhr.open('GET', src); |
|||
xhr.responseType = 'blob'; |
|||
xhr.send(); |
|||
} else img.src = src; |
|||
}; |
|||
img.setSrc(); |
|||
this.text.attr('data-text', this.options.barText); |
|||
this.text.text(this.options.loadingText); |
|||
this.img = img; |
|||
}; |
|||
|
|||
_proto.clean = function () { |
|||
this.canvasCtx.clearRect(0, 0, this.options.width, this.options.height); |
|||
this.blockCtx.clearRect(0, 0, this.options.width, this.options.height); |
|||
this.block.width = this.options.width; |
|||
}; |
|||
|
|||
_proto.bindEvents = function () { |
|||
var that = this; |
|||
this.$element.on('selectstart', function () { |
|||
return false; |
|||
}); |
|||
|
|||
$(this.refreshIcon).on('click', function () { |
|||
that.text.text(that.options.barText); |
|||
that.reset(); |
|||
if ($.isFunction(that.options.onRefresh)) that.options.onRefresh.call(that.$element); |
|||
}); |
|||
|
|||
var originX, originY, trail = [], |
|||
isMouseDown = false; |
|||
|
|||
var handleDragStart = function (e) { |
|||
if (that.text.hasClass('text-danger')) return; |
|||
originX = e.clientX || e.touches[0].clientX; |
|||
originY = e.clientY || e.touches[0].clientY; |
|||
isMouseDown = true; |
|||
}; |
|||
|
|||
var handleDragMove = function (e) { |
|||
if (!isMouseDown) return false; |
|||
var eventX = e.clientX || e.touches[0].clientX; |
|||
var eventY = e.clientY || e.touches[0].clientY; |
|||
var moveX = eventX - originX; |
|||
var moveY = eventY - originY; |
|||
if (moveX < 0 || moveX + 40 > that.options.width) return false; |
|||
that.slider.style.left = (moveX - 1) + 'px'; |
|||
var blockLeft = (that.options.width - 40 - 20) / (that.options.width - 40) * moveX; |
|||
that.block.style.left = blockLeft + 'px'; |
|||
|
|||
that.sliderContainer.addClass('sliderContainer_active'); |
|||
that.sliderMask.style.width = (moveX + 4) + 'px'; |
|||
trail.push(Math.round(moveY)); |
|||
}; |
|||
|
|||
var handleDragEnd = function (e) { |
|||
|
|||
if (!isMouseDown) return false; |
|||
isMouseDown = false; |
|||
var eventX = e.clientX || e.changedTouches[0].clientX; |
|||
if (eventX === originX) return false; |
|||
that.sliderContainer.removeClass('sliderContainer_active'); |
|||
that.trail = trail; |
|||
|
|||
if (that.verify()) { |
|||
that.sliderContainer.addClass('sliderContainer_success'); |
|||
if (that.options.debug) return; |
|||
setTimeout(function () { |
|||
if ($.isFunction(that.options.onSuccess)) that.options.onSuccess.call(that.$element); |
|||
}, 1000) |
|||
} else { |
|||
that.sliderContainer.addClass('sliderContainer_fail'); |
|||
that.text.text(that.options.failedText); |
|||
if (that.options.debug) return; |
|||
setTimeout(function () { |
|||
if ($.isFunction(that.options.onFail)) that.options.onFail.call(that.$element); |
|||
that.reset(); |
|||
}, 1000); |
|||
} |
|||
}; |
|||
|
|||
this.slider.addEventListener('mousedown', handleDragStart); |
|||
this.slider.addEventListener('touchstart', handleDragStart); |
|||
document.addEventListener('mousemove', handleDragMove); |
|||
document.addEventListener('touchmove', handleDragMove); |
|||
document.addEventListener('mouseup', handleDragEnd); |
|||
document.addEventListener('touchend', handleDragEnd); |
|||
|
|||
document.addEventListener('mousedown', function () { return false; }); |
|||
document.addEventListener('touchstart', function () { return false; }); |
|||
document.addEventListener('swipe', function () { return false; }); |
|||
}; |
|||
|
|||
_proto.verify = function () { |
|||
var arr = this.trail; // 拖动时y轴的移动距离
|
|||
var left = parseInt(this.block.style.left); |
|||
var verified = false; |
|||
var spliced = null; |
|||
|
|||
// 前端验证
|
|||
var sum = function (x, y) { return x + y; }; |
|||
var square = function (x) { return x * x; }; |
|||
var average = arr.reduce(sum) / arr.length; |
|||
var deviations = arr.map(function (x) { return x - average; }); |
|||
var stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); |
|||
|
|||
verified = stddev !== 0; |
|||
spliced = Math.abs(left - this.x) < this.options.offset; |
|||
|
|||
if (verified && spliced) { // 前端通过
|
|||
|
|||
if (this.options.remoteUrl !== null) { // 验证后端
|
|||
verified = this.options.verify(arr, this.options.remoteUrl); |
|||
} |
|||
} |
|||
|
|||
return spliced && verified; |
|||
|
|||
}; |
|||
|
|||
_proto.reset = function () { |
|||
this.sliderContainer.removeClass('sliderContainer_fail sliderContainer_success'); |
|||
this.slider.style.left = 0; |
|||
this.block.style.left = 0; |
|||
this.sliderMask.style.width = 0; |
|||
this.clean(); |
|||
this.text.attr('data-text', this.text.text()); |
|||
this.text.text(this.options.loadingText); |
|||
this.img.setSrc(); |
|||
}; |
|||
})(jQuery); |
|||
@ -1,137 +0,0 @@ |
|||
body { |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.block { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
} |
|||
|
|||
.sliderContainer { |
|||
position: relative; |
|||
z-index: 99; |
|||
text-align: center; |
|||
line-height: 40px; |
|||
background: #f7f9fa; |
|||
color: #45494c; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.sliderbg { |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
background-color: #f7f9fa; |
|||
height: 40px; |
|||
border-radius: 2px; |
|||
border: 1px solid #e6e8eb; |
|||
} |
|||
|
|||
.sliderContainer_active .slider { |
|||
top: -1px; |
|||
border: 1px solid #1991FA; |
|||
} |
|||
|
|||
.sliderContainer_active .sliderMask { |
|||
border-width: 1px 0 1px 1px; |
|||
} |
|||
|
|||
.sliderContainer_success .sliderMask { |
|||
background: none; |
|||
border: 1px solid rgba(20,144,74,1); |
|||
} |
|||
|
|||
.sliderContainer_success .slider { |
|||
|
|||
top: -1px; |
|||
background:linear-gradient(135deg,rgba(37,188,103,1) 0%,rgba(20,144,74,1) 100%)!important; |
|||
} |
|||
|
|||
|
|||
|
|||
.sliderContainer_success .sliderIcon:before { |
|||
/* border: 1px solid red; */ |
|||
content: "\f00c"; |
|||
} |
|||
|
|||
|
|||
.sliderContainer_fail .sliderMask { |
|||
background: none; |
|||
border:1px solid rgba(216,43,43,1); |
|||
} |
|||
|
|||
|
|||
.sliderContainer_fail .slider { |
|||
top: -1px; |
|||
background:linear-gradient(135deg,rgba(237,87,87,1) 0%,rgba(216,43,43,1) 100%)!important; |
|||
} |
|||
|
|||
|
|||
|
|||
.sliderContainer_fail .sliderIcon:before { |
|||
|
|||
content: "\f00d"; |
|||
|
|||
|
|||
} |
|||
.sliderContainer_active .sliderText, .sliderContainer_success .sliderText, .sliderContainer_fail .sliderText { |
|||
display: none; |
|||
} |
|||
|
|||
.sliderMask { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
height: 40px; |
|||
border: 0 solid #1991FA; |
|||
background: #D1E9FE; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.slider { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 40px; |
|||
height: 40px; |
|||
background: #fff; |
|||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); |
|||
cursor: pointer; |
|||
transition: background .2s linear; |
|||
border-radius: 2px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
/* .slider:hover { |
|||
background: #1991FA; |
|||
} |
|||
|
|||
.slider:hover .sliderIcon { |
|||
background-position: 0 -13px; |
|||
} */ |
|||
|
|||
.sliderText { |
|||
position: relative; |
|||
z-index : 999; |
|||
} |
|||
|
|||
|
|||
.refreshIcon { |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
cursor: pointer; |
|||
margin: 6px; |
|||
color: rgba(0,0,0,.25); |
|||
font-size: 1rem; |
|||
z-index: 5; |
|||
transition: color .3s linear; |
|||
} |
|||
|
|||
.refreshIcon:hover { |
|||
color: #6c757d; |
|||
} |
|||
|
Before Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 8.4 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 88 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,122 +0,0 @@ |
|||
* { |
|||
margin: 0; |
|||
padding: 0; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
body { |
|||
background: #fff; |
|||
padding: 5px 12px; |
|||
} |
|||
|
|||
#captcha { |
|||
/* border: 1px solid red; */ |
|||
|
|||
background: url('./imgs/loading.png') no-repeat center center; |
|||
} |
|||
|
|||
#captcha img { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.refreshIcon { |
|||
color: #C1BBF2; |
|||
font-size: 1.6em; |
|||
right: 50px; |
|||
top: -52px; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.sliderContainer { |
|||
margin-top: 10px; |
|||
color: #88949d; |
|||
border: none; |
|||
border-radius: 22px; |
|||
} |
|||
|
|||
.sliderbg { |
|||
/* background: #F5DFDF; */ |
|||
background: rgba(31, 24, 50, 0.1); |
|||
/* box-shadow: 0px 0px 4px 0px rgba(188, 106, 188, 0.3); */ |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
.sliderMask { |
|||
background: #E8DCEC; |
|||
border: none; |
|||
border-bottom-left-radius: 20px; |
|||
border-top-left-radius: 20px; |
|||
} |
|||
|
|||
/* 初始 */ |
|||
.sliderMask .slider { |
|||
top: -6px; |
|||
left: -3px; |
|||
border: none; |
|||
width: 55px; |
|||
height: 55px; |
|||
border-radius: 50%; |
|||
margin-left: -8px; |
|||
background: linear-gradient(134deg, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 100%); |
|||
} |
|||
|
|||
.sliderMask .slider .fa { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.fa-arrow-right:before { |
|||
content: ""; |
|||
display: inline-block; |
|||
width: 20px; |
|||
height: 20px; |
|||
background: url('./imgs/zise.svg') no-repeat center center; |
|||
} |
|||
|
|||
/* 失败 */ |
|||
.sliderContainer_fail .slider { |
|||
background: linear-gradient(134deg, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 100%) !important; |
|||
} |
|||
|
|||
.sliderContainer_fail .sliderMask { |
|||
border: none; |
|||
} |
|||
|
|||
.sliderContainer_fail .sliderIcon:before { |
|||
content: ""; |
|||
display: inline-block; |
|||
width: 20px; |
|||
height: 20px; |
|||
background: url('./imgs/hongse.svg') no-repeat center center; |
|||
} |
|||
|
|||
.sliderContainer_fail .sliderMask { |
|||
background: #F5DFDF; |
|||
border: none; |
|||
border-bottom-left-radius: 20px; |
|||
border-top-left-radius: 20px; |
|||
} |
|||
|
|||
/* 成功 */ |
|||
.sliderContainer_success .slider { |
|||
background: linear-gradient(134deg, rgba(255, 255, 255, 1) 0%, rgba(237, 237, 237, 1) 100%) !important; |
|||
} |
|||
|
|||
.sliderContainer_success .sliderMask { |
|||
border: none; |
|||
} |
|||
|
|||
.sliderContainer_success .sliderIcon:before { |
|||
content: ""; |
|||
display: inline-block; |
|||
width: 20px; |
|||
height: 20px; |
|||
background: url('./imgs/lvse.svg') no-repeat center center; |
|||
} |
|||
|
|||
.sliderContainer_success .sliderMask { |
|||
background: #DAE7E0; |
|||
border: none; |
|||
border-bottom-left-radius: 20px; |
|||
border-top-left-radius: 20px; |
|||
} |
|||
@ -1,110 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|||
<link href="lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet"> |
|||
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet"> |
|||
<link href="disk/slidercaptcha.css" rel="stylesheet" /> |
|||
<link rel="stylesheet" href="./index.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<script src="lib/jquery/jquery.min.js"></script> |
|||
<script src="lib/twitter-bootstrap/js/bootstrap.bundle.js"></script> |
|||
<script src="disk/longbow.slidercaptcha.js"></script> |
|||
|
|||
<div id="captcha"></div> |
|||
|
|||
<script> |
|||
|
|||
function getArgs(qs) { |
|||
|
|||
// 检测是否含有？ |
|||
let search = decodeURIComponent(qs); |
|||
if (search.startsWith("?")) search = search.slice(1); |
|||
|
|||
const params = {}; |
|||
|
|||
search.split("&").forEach(item => { |
|||
let pos = item.indexOf("="); |
|||
let name = item.slice(0, pos), |
|||
value = item.slice(pos + 1); |
|||
params[name] = value; |
|||
}); |
|||
|
|||
return params; |
|||
} |
|||
|
|||
// 提取请求参数 |
|||
var { account, slider_type, nextStep, lang } = getArgs(location.search); |
|||
|
|||
var tokenCode; // 接收token |
|||
$captcha = $('#captcha').sliderCaptcha({ |
|||
// 文案设置 |
|||
loadingText : 'Processing...', |
|||
failedText : 'Try Again', |
|||
barText : 'Slide to fill the puzzle', |
|||
// 画布的大小 |
|||
width: 275, |
|||
height: 178, |
|||
offset: 5, // 容错像素值 |
|||
remoteUrl : window.parent.api_path, |
|||
verify: function (datas, url) { // 服务端验证方法 |
|||
let ret = false; |
|||
$.ajax(url, { |
|||
type: 'POST', |
|||
data: JSON.stringify({ |
|||
datas, |
|||
account, |
|||
slider_type, |
|||
}), |
|||
async: false, |
|||
cache: false, |
|||
contentType: 'application/json', |
|||
headers: { lang }, |
|||
success: function (response) { |
|||
tokenCode = response.data.token; |
|||
if (response.code == 200) { |
|||
ret = true; |
|||
} else { |
|||
ret = false; |
|||
} |
|||
} |
|||
}); |
|||
return ret; |
|||
}, |
|||
|
|||
onSuccess: function () { //成功事件 |
|||
// 刷新并跳转 |
|||
$captcha.sliderCaptcha('reset'); |
|||
window.parent[nextStep](tokenCode); |
|||
}, |
|||
|
|||
onFail: function () { // 自动刷新 |
|||
// $captcha.sliderCaptcha('reset'); |
|||
}, |
|||
|
|||
onRefresh: function () { |
|||
$captcha.sliderCaptcha('reset'); |
|||
}, |
|||
|
|||
setSrc: function () { |
|||
return './imgs/slice' + Math.ceil(Math.random() * 5) + '@2x.png'; |
|||
}, |
|||
}); |
|||
|
|||
// $('.refresh').click(function () { |
|||
// $captcha.sliderCaptcha('reset'); |
|||
// }); |
|||
|
|||
// $('.close').click(function () { |
|||
// window.parent.closeBox(); |
|||
// }); |
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,69 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|||
<title>Slider Captcha Demo</title> |
|||
<link href="lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet"> |
|||
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet"> |
|||
<link href="disk/slidercaptcha.css" rel="stylesheet" /> |
|||
<style> |
|||
.slidercaptcha { |
|||
margin: 0 auto; |
|||
width: 314px; |
|||
height: 286px; |
|||
border-radius: 4px; |
|||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.125); |
|||
margin-top: 40px; |
|||
} |
|||
.slidercaptcha .card-body { |
|||
padding: 1rem; |
|||
} |
|||
.slidercaptcha canvas:first-child { |
|||
border-radius: 4px; |
|||
border: 1px solid #e6e8eb; |
|||
} |
|||
.slidercaptcha.card .card-header { |
|||
background-image: none; |
|||
background-color: rgba(0, 0, 0, 0.03); |
|||
} |
|||
.refreshIcon { |
|||
top: -54px; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="container-fluid"> |
|||
<div class="form-row"> |
|||
<div class="col-12"> |
|||
<div class="slidercaptcha card"> |
|||
<div class="card-header"> |
|||
<span>请完成安全验证!</span> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div id="captcha"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script src="lib/jquery/jquery.min.js"></script> |
|||
<script src="lib/twitter-bootstrap/js/bootstrap.bundle.js"></script> |
|||
<script src="disk/longbow.slidercaptcha.js"></script> |
|||
<script> |
|||
var $captcha = $('#captcha').sliderCaptcha({ |
|||
repeatIcon: 'fa fa-redo', |
|||
setSrc: function () { |
|||
return 'http://imgs.sdgxgz.com/images/Pic' + Math.round(Math.random() * 136) + '.jpg'; |
|||
}, |
|||
onSuccess: function () { //成功事件 |
|||
var handler = setTimeout(function () { |
|||
window.clearTimeout(handler); |
|||
$captcha.sliderCaptcha('reset'); |
|||
}, 500); |
|||
} |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue