23 |
24 |
jQuery.simpleCaptcha Functional Tests - PHP
25 |
26 |
27 | TODO: Description...
28 |
29 |
30 |
Correct captcha selection match ";
34 | } else {
35 | echo "
captcha selection does not match expected answer: (selction) ".$_POST['captchaSelection']." != ".$_SESSION['simpleCaptchaAnswer']." (answer).
";
36 | }
37 | }
38 | ?>
39 |
40 |
54 |
55 |
60 |
61 |
$_REQUEST object for debugging:
62 |
63 |
64 |
65 |
--------------------------------------------------------------------------------
/tests/qunit.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
jQuery.simpleCaptcha QUnit Test Runner
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
35 |
36 |
37 |
38 |
39 |
40 |
58 |
59 |
60 |
61 |
66 |
67 |
--------------------------------------------------------------------------------
/tests/lib/qunit-1.10.0.css:
--------------------------------------------------------------------------------
1 | /**
2 | * QUnit v1.10.0 - A JavaScript Unit Testing Framework
3 | *
4 | * http://qunitjs.com
5 | *
6 | * Copyright 2012 jQuery Foundation and other contributors
7 | * Released under the MIT license.
8 | * http://jquery.org/license
9 | */
10 |
11 | /** Font Family and Sizes */
12 |
13 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
14 | font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
15 | }
16 |
17 | #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
18 | #qunit-tests { font-size: smaller; }
19 |
20 |
21 | /** Resets */
22 |
23 | #qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
24 | margin: 0;
25 | padding: 0;
26 | }
27 |
28 |
29 | /** Header */
30 |
31 | #qunit-header {
32 | padding: 0.5em 0 0.5em 1em;
33 |
34 | color: #8699a4;
35 | background-color: #0d3349;
36 |
37 | font-size: 1.5em;
38 | line-height: 1em;
39 | font-weight: normal;
40 |
41 | border-radius: 5px 5px 0 0;
42 | -moz-border-radius: 5px 5px 0 0;
43 | -webkit-border-top-right-radius: 5px;
44 | -webkit-border-top-left-radius: 5px;
45 | }
46 |
47 | #qunit-header a {
48 | text-decoration: none;
49 | color: #c2ccd1;
50 | }
51 |
52 | #qunit-header a:hover,
53 | #qunit-header a:focus {
54 | color: #fff;
55 | }
56 |
57 | #qunit-testrunner-toolbar label {
58 | display: inline-block;
59 | padding: 0 .5em 0 .1em;
60 | }
61 |
62 | #qunit-banner {
63 | height: 5px;
64 | }
65 |
66 | #qunit-testrunner-toolbar {
67 | padding: 0.5em 0 0.5em 2em;
68 | color: #5E740B;
69 | background-color: #eee;
70 | overflow: hidden;
71 | }
72 |
73 | #qunit-userAgent {
74 | padding: 0.5em 0 0.5em 2.5em;
75 | background-color: #2b81af;
76 | color: #fff;
77 | text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
78 | }
79 |
80 | #qunit-modulefilter-container {
81 | float: right;
82 | }
83 |
84 | /** Tests: Pass/Fail */
85 |
86 | #qunit-tests {
87 | list-style-position: inside;
88 | }
89 |
90 | #qunit-tests li {
91 | padding: 0.4em 0.5em 0.4em 2.5em;
92 | border-bottom: 1px solid #fff;
93 | list-style-position: inside;
94 | }
95 |
96 | #qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
97 | display: none;
98 | }
99 |
100 | #qunit-tests li strong {
101 | cursor: pointer;
102 | }
103 |
104 | #qunit-tests li a {
105 | padding: 0.5em;
106 | color: #c2ccd1;
107 | text-decoration: none;
108 | }
109 | #qunit-tests li a:hover,
110 | #qunit-tests li a:focus {
111 | color: #000;
112 | }
113 |
114 | #qunit-tests ol {
115 | margin-top: 0.5em;
116 | padding: 0.5em;
117 |
118 | background-color: #fff;
119 |
120 | border-radius: 5px;
121 | -moz-border-radius: 5px;
122 | -webkit-border-radius: 5px;
123 | }
124 |
125 | #qunit-tests table {
126 | border-collapse: collapse;
127 | margin-top: .2em;
128 | }
129 |
130 | #qunit-tests th {
131 | text-align: right;
132 | vertical-align: top;
133 | padding: 0 .5em 0 0;
134 | }
135 |
136 | #qunit-tests td {
137 | vertical-align: top;
138 | }
139 |
140 | #qunit-tests pre {
141 | margin: 0;
142 | white-space: pre-wrap;
143 | word-wrap: break-word;
144 | }
145 |
146 | #qunit-tests del {
147 | background-color: #e0f2be;
148 | color: #374e0c;
149 | text-decoration: none;
150 | }
151 |
152 | #qunit-tests ins {
153 | background-color: #ffcaca;
154 | color: #500;
155 | text-decoration: none;
156 | }
157 |
158 | /*** Test Counts */
159 |
160 | #qunit-tests b.counts { color: black; }
161 | #qunit-tests b.passed { color: #5E740B; }
162 | #qunit-tests b.failed { color: #710909; }
163 |
164 | #qunit-tests li li {
165 | padding: 5px;
166 | background-color: #fff;
167 | border-bottom: none;
168 | list-style-position: inside;
169 | }
170 |
171 | /*** Passing Styles */
172 |
173 | #qunit-tests li li.pass {
174 | color: #3c510c;
175 | background-color: #fff;
176 | border-left: 10px solid #C6E746;
177 | }
178 |
179 | #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
180 | #qunit-tests .pass .test-name { color: #366097; }
181 |
182 | #qunit-tests .pass .test-actual,
183 | #qunit-tests .pass .test-expected { color: #999999; }
184 |
185 | #qunit-banner.qunit-pass { background-color: #C6E746; }
186 |
187 | /*** Failing Styles */
188 |
189 | #qunit-tests li li.fail {
190 | color: #710909;
191 | background-color: #fff;
192 | border-left: 10px solid #EE5757;
193 | white-space: pre;
194 | }
195 |
196 | #qunit-tests > li:last-child {
197 | border-radius: 0 0 5px 5px;
198 | -moz-border-radius: 0 0 5px 5px;
199 | -webkit-border-bottom-right-radius: 5px;
200 | -webkit-border-bottom-left-radius: 5px;
201 | }
202 |
203 | #qunit-tests .fail { color: #000000; background-color: #EE5757; }
204 | #qunit-tests .fail .test-name,
205 | #qunit-tests .fail .module-name { color: #000000; }
206 |
207 | #qunit-tests .fail .test-actual { color: #EE5757; }
208 | #qunit-tests .fail .test-expected { color: green; }
209 |
210 | #qunit-banner.qunit-fail { background-color: #EE5757; }
211 |
212 |
213 | /** Result */
214 |
215 | #qunit-testresult {
216 | padding: 0.5em 0.5em 0.5em 2.5em;
217 |
218 | color: #2b81af;
219 | background-color: #D2E0E6;
220 |
221 | border-bottom: 1px solid white;
222 | }
223 | #qunit-testresult .module-name {
224 | font-weight: bold;
225 | }
226 |
227 | /** Fixture */
228 |
229 | #qunit-fixture {
230 | position: absolute;
231 | top: -10000px;
232 | left: -10000px;
233 | width: 1000px;
234 | height: 1000px;
235 | }
236 |
--------------------------------------------------------------------------------
/src/simpleCaptcha.php:
--------------------------------------------------------------------------------
1 | IMAGE_FILE
22 | 'house' => 'captchaImages/01.png',
23 | 'key' => 'captchaImages/02.png',
24 | 'flag' => 'captchaImages/03.png',
25 | 'clock' => 'captchaImages/04.png',
26 | 'bug' => 'captchaImages/05.png',
27 | 'pen' => 'captchaImages/06.png',
28 | 'light bulb' => 'captchaImages/07.png',
29 | 'musical note' => 'captchaImages/08.png',
30 | 'heart' => 'captchaImages/09.png',
31 | 'world' => 'captchaImages/10.png'
32 | );
33 |
34 | // You should change this for security reasons, 10-20 characters is good
35 | private $salt = "o^G-j7%8W3xP!2_";
36 |
37 | // ------------------------------------------------- //
38 | // ------------------- STOP EDITING ---------------- //
39 | // ------------------------------------------------- //
40 | // (All other options should be edited in the plugin JavaScript.)
41 |
42 |
43 |
44 | const MIN_IMAGES = 3;
45 | const DEFAULT_NUM_IMAGES = 5;
46 | private $sessionData = null;
47 | private $answer = null;
48 |
49 | public function __construct() {
50 | $this->getDataFromSession();
51 |
52 | if (!$this->sessionData) {
53 | $this->resetSessionData();
54 | }
55 | }
56 |
57 | public function resetSessionData() {
58 | $this->sessionData = array(
59 | 'time' => time(),
60 | 'images' => array(),
61 | 'salt' => null
62 | );
63 | $this->sessionData['salt'] = $this->salt . $this->sessionData['time'];
64 | }
65 |
66 | public function getImageByHash($hash) {
67 | if (isset($this->sessionData['images'][$hash])) {
68 | $fn = $this->sessionData['images'][$hash];
69 |
70 | if (file_exists($fn)) {
71 | $mime = null;
72 | if (function_exists("finfo_open")) {
73 | // PHP 5.3
74 | $finfo = finfo_open(FILEINFO_MIME_TYPE);
75 | $mime = finfo_file($finfo, $fn);
76 |
77 | } else if (function_exists("mime_content_type")) {
78 | // PHP 5.2
79 | $mime = mime_content_type($fn);
80 | }
81 |
82 | if (!$mime) { $mime = "image/png"; }
83 |
84 | header("Content-Type: {$mime}");
85 | readfile($fn);
86 | exit;
87 |
88 | } else {
89 | throw new InvalidArgumentException("That captcha image file does not exist", 404);
90 | }
91 | } else {
92 | throw new InvalidArgumentException("No captcha image exists with that hash: ".json_encode($this->sessionData->images), 404);
93 | }
94 | }
95 |
96 | public function getAllImageData() {
97 | $iData = array(
98 | 'text' => '',
99 | 'images' => array()
100 | );
101 |
102 | if (!isset($this->images) || !is_array($this->images) || sizeof($this->images) < SimpleCaptcha::MIN_IMAGES) {
103 | throw new InvalidArgumentException("There aren\'t enough images on the server!", 400);
104 | }
105 |
106 | $numImages = SimpleCaptcha::DEFAULT_NUM_IMAGES;
107 | if (isset($_REQUEST['numImages']) &&
108 | intval($_REQUEST['numImages']) &&
109 | intval($_REQUEST['numImages']) > SimpleCaptcha::MIN_IMAGES) {
110 | $numImages = intval($_REQUEST['numImages']);
111 | }
112 | $totalSize = sizeof($this->images);
113 | $numImages = min(array($totalSize, $numImages));
114 |
115 | $keys = array_keys($this->images);
116 | $used = array();
117 |
118 | mt_srand(((float) microtime() * 587) / 33); // add some randomness
119 |
120 | for ($i=0; $i<$numImages; ++$i) {
121 | $r = rand(0, $totalSize-1);
122 | while (array_search($keys[$r], $used) !== false) {
123 | $r = rand(0, $totalSize-1);
124 | }
125 | array_push($used, $keys[$r]);
126 | }
127 |
128 | $iData['text'] = $used[rand(0, $numImages-1)];
129 | $this->answer = sha1($iData['text'] . $this->sessionData['salt']);
130 |
131 | shuffle($used);
132 |
133 | for ($i=0; $i
sessionData['salt']);
135 | array_push($iData['images'], $hash);
136 | $this->sessionData['images'][$hash] = $this->images[$used[$i]];
137 | }
138 |
139 | return $iData;
140 | }
141 |
142 |
143 | public function writeSessionData() {
144 | $_SESSION['simpleCaptchaAnswer'] = $this->answer;
145 | $_SESSION['simpleCaptchaData'] = json_encode($this->sessionData);
146 | // And for backward compatibility...
147 | $_SESSION['simpleCaptchaTimestamp'] = $this->sessionData['time'];
148 | }
149 |
150 | public function getDataFromSession() {
151 | if (isset($_SESSION['simpleCaptchaData'])) {
152 | $this->sessionData = json_decode($_SESSION['simpleCaptchaData'], true);
153 | }
154 | if (isset($_SESSION['simpleCaptchaAnswer'])) {
155 | $this->answer = $_SESSION['simpleCaptchaAnswer'];
156 | }
157 | }
158 |
159 |
160 | // Static helper methods
161 |
162 | public static function getProtocol() {
163 | $protocol = "HTTP/1.1";
164 | if(isset($_SERVER['SERVER_PROTOCOL'])) {
165 | $protocol = $_SERVER['SERVER_PROTOCOL'];
166 | }
167 | return $protocol;
168 | }
169 |
170 | }
171 |
172 |
173 | // ------------------- Handle Incoming Requests ------------------- //
174 |
175 | $sc = new SimpleCaptcha();
176 | try {
177 |
178 | if (isset($_REQUEST['hash'])) {
179 | // Just getting one image file by it's hash
180 | $sc->getImageByHash($_REQUEST['hash']);
181 |
182 | } else {
183 | // Getting all image data and hashes
184 | $sc->resetSessionData();
185 | $imageData = $sc->getAllImageData();
186 |
187 | // Finish up by writing data to the session and the ouput buffer
188 | $sc->writeSessionData();
189 | header("Content-Type: application/json");
190 | echo json_encode($imageData);
191 | }
192 |
193 | } catch (InvalidArgumentException $iae) {
194 | $code = $iae->getCode();
195 | if (!$code) { $code = 400; }
196 | header(SimpleCaptcha::getProtocol()." {$code} ".$iae->getMessage());
197 | echo $iae->getMessage();
198 |
199 | } catch (Exception $e) {
200 | $code = $e->getCode();
201 | if (!$code) { $code = 500; }
202 | header(SimpleCaptcha::getProtocol()." {$code} ".$e->getMessage());
203 | echo $e->getMessage();
204 | }
205 |
206 | exit; // make sure we stop the script
207 | ?>
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | jquerySimpleCaptcha
2 | ===================
3 |
4 | SimpleCaptcha allows you to drop in an easy-to-use and understand captcha implementation for helping to curb spambots on your system. The plug-in makes things very easy for you with a limited amount of setup required and standard xhtml and css classes in place to make changing the appearance super easy.
5 |
6 | Features
7 | --------
8 |
9 | * __Simple to Use:__ This CAPTCHA implementation is easy to use by both the developer and the user!
10 | * __User Experience Focused:__ Uses human-understandable images instead of hard to read text
11 | * __Events:__ Events are triggered at various points so you can hook into the processing if you need to
12 | * __Standard HTML and CSS:__ Standard-compliant xhtml with extensive classes used to allow for easy UI manipulation through CSS
13 |
14 |
15 | The Setup
16 | ---------
17 |
18 | There are three pieces to this plug-in: (1) the JavaScript file, (2) the PHP script, and (3) the images. Here are the steps you need to take to get things working:
19 |
20 | * Upload the PHP script (src/simpleCaptcha.php) to your site (remember where, and what you named it!)
21 | * Upload the JavaScript plugin file (src/jquery.simpleCaptcha.js) to your site and include it in your page (after you include the jQuery core)
22 | * Make a folder on your server for the images to use in the captcha system (and optionally upload the sample images to that folder)
23 | * Update the PHP script (src/simpleCaptcha.php) with your image filenames and the text the user should see for each
24 | * (Optional) Upload (or copy) the CSS and "refresh" image to your server
25 |
26 |
27 | Basic Usage
28 | -----------
29 |
30 | ```html
31 |
36 |
37 |
42 | ```
43 |
44 | When your form is submitted, you just need to check one variable to see if the form was submitted by a human:
45 |
46 | ```php
47 |
56 | ```
57 |
58 | __Note that the element you call `simpleCaptcha()` on should be in a `