Verification Form
CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) involves challenges such as identifying distorted text or selecting images.
The CAPTCHA is used on web forms to prevent spam, malicious bots and other automated attacks.
A CAPTCHA presents a challenge that is relatively easy for humans to complete but difficult for bots to replicate.
In this tutorial, the distorted text-based CAPTCHA will be generated that users must type in the input box. An SVG image will be used as a placehold before drawing on a canvas.
Requirements For Text CAPTCHA
Glossary:
Invariant Recognition
Ability to recognize letters despite a large amount of variation in their shapes.
Segmentation
Ability to separate one letter from another, made difficult in CAPTCHAs.
Parsing
Ability to understand the CAPTCHA holistically, in order to correctly identify each character.
SVG
Scalable Vector Graphics (SVG) is an XML-based vector graphics format for 2D graphics.
Common CAPTCHA Types
| Name | Description | Example |
|---|---|---|
| Text | Distorted letters or numbers that users must type in a text box. | td4eva |
| Image | Identifying specific objects or shapes in images. | |
| Audio | Identifying specific objects or shapes in images. | |
| math | Solving simple arithmetic equations. | 1 + 2. |
| Name | Description | Example |
HTML CAPTCHA Form
<form class="text-captcha">
<h3 class="middle">Form Text CAPTCHA</h3>
<svg class="captcha-svg"></svg>
<canvas class="middle captcha"></canvas>
<div class="middle">
<input type="text" name="validate" placeholder="Enter Code" />
<button type="button" class="refresh">Refresh</button>
</div>
<div class="captcha-buttons">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</div>
<output></output>
</form>
<script></script>
CSS CAPTCHA Form
.text-captcha button,
.text-captcha input {
padding: 0.9rem 1.1rem;
}
.text-captcha .middle {
display: block;
text-align: center;
margin: 0 auto;
}
.text-captcha .captcha-buttons {
display: flex;
justify-content: space-between;
}
.text-captcha .pass {
color: green;
}
.text-captcha .fail {
color: red;
}
Distorted Text CAPTCHA Validator
(() => {
let length = 5;
let output = document.querySelector('form.captcha-validator output');
let validate = document.querySelector('form.captcha-validator input[name="validate"]');
let csvg = document.querySelector('form.captcha-validator svg.captcha-svg');
let captcha = document.querySelector('form.captcha-validator canvas.captcha');
let code = null;
let gnCode = (length) => {
code = Math.random().toString(36).substring(2, 2 + length);
ctx = captcha.getContext('2d');
var tpath = csvg.querySelector('textPath');
tpath.textContent = code;
let b64 = btoa((new XMLSerializer).serializeToString(csvg))
let img = new Image();
img.src = 'data:image/svg+xml;base64,' + b64;
img.width = 500;
img.height = 150;
img.onload = () => {
ctx.drawImage(img, 0 , 0);
};
output.innerHTML = '';
};
let ckCode = () => {
let val = validate.value;
if ( (val.trim().length !== 0) && (val === code) ) {
output.innerHTML = `<em class="pass">Validated</em>`;
} else {
output.innerHTML = `<em class="fail">Failed</em>`;
}
};
document.querySelector('form.captcha-validator button.refresh').addEventListener('click', (evt) => {
gnCode(length);
});
document.querySelector('form.captcha-validator').addEventListener('submit', (evt) => {
evt.preventDefault();
ckCode();
});
gnCode(length); // Default
})();
Explanation
- Generate a HTML form to hold elements for CAPTCHA.
- The input text code entry will be compared to the generated code.
- The refresh button generates a new CAPTCHA code.
- The submit button will validate the user input.
Usage
- You may use the any IDE or text editor including the Learning JavaScript Course Web IDE in a new browser window.
- Open your web browser.
- Navigate to the URL or drag and drop the HTML file into the web browser.
Open Source
JavaScript follows the ECMAScript standard and is licensed under the W3C Software License by web browser vendors and runtime environment vendors. The permissive license requires the preservation of the copyright notice and disclaimer. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.
CSS specifications are maintained by the World Wide Web Consortium (W3C) and is licensed under the W3C Software License by web browser vendors. The permissive license requires the preservation of the copyright notice and disclaimer. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.
SVG specifications are maintained by the World Wide Web Consortium (W3C) and is licensed under the W3C Software License by web browser vendors. The permissive license requires the preservation of the copyright notice and disclaimer. It allows commercial use, modification, distribution, and allows making derivatives proprietary, consult the license for more specific details.
Conclusion:
The CAPTCHA validator tutorial was divided into parts. In this part, the HTML, CSS styling, SVG placeholder and basic JavaScript were completed. The reset button works without additional JavaScript code.
If you enjoy this article, consider supporting me by purchasing one of my OjamboShop.com Online Programming Courses or publications at Edward Ojambo Programming Books or simply donate here Ojambo.com Donate
References:
- Customer Sets Price Plugin for WooCommerce on Ojambo.com
- Learning JavaScript Course on OjamboShop.com
- Learning Python Course on OjamboShop.com
- Learning PHP Course on OjamboShop.com
- Master Blender Python API Paperback on Amazon
- Master Blender Python API Ebook on Amazon
- Learning JavaScript Paperback on Amazon
- Learning JavaScript Ebook on Amazon
- Learning Python Ebook on Amazon
- Learning PHP Ebook on Amazon
- OjamboServices.com For Custom Websites, Applications & Tutorials