This content originally appeared on DEV Community and was authored by HichemTech
Simplify CAPTCHA Implementation with EasyCaptchaJs! 🎉🔐
Why EasyCaptchaJs? 🤔
Implementing CAPTCHA can be a hassle, but EasyCaptchaJs makes it a breeze! Whether you're looking to prevent spam or enhance security on your forms, this library offers an effortless solution. It's user-friendly, highly customizable, and perfect for any web project. 🚀
What is EasyCaptchaJs? 🌟
EasyCaptchaJs is a lightweight and powerful JavaScript library designed to simplify the addition of CAPTCHA to your web forms. It provides a range of options to customize the look and functionality of your CAPTCHA, ensuring it fits seamlessly into your website’s design. From basic text CAPTCHAs to more complex image-based ones, EasyCaptchaJs has it all. 🎨
Key Features 🔑
- User-Friendly: Easy to set up and integrate into any web project. 🛠️
- Customizable: Tailor the CAPTCHA to match your site’s design and needs. 🎨
- Lightweight: Minimal impact on your site’s performance. ⚡️
- Flexible: Supports various CAPTCHA types, including text and image-based. 🖼️
How to Get Started? 🛠️
Installation Options 📦
- npm:
npm install easycaptchajs
- CDN:
<script src="https://cdn.jsdelivr.net/npm/easycaptchajs@1.2.1/dist/easycaptcha.min.js"></script>
- Local Download:
<script src="path/to/easycaptcha.min.js"></script>
How to Implement EasyCaptchaJs? 🛠️
Here's a quick guide to get you started:
- Include jQuery: Ensure you have jQuery included in your project.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- Include EasyCaptchaJs: Add the EasyCaptchaJs plugin to your project.
<script src="path/to/easycaptcha.js"></script>
- Initialize the CAPTCHA: Set up the CAPTCHA in your form.
<script>
$(document).ready(function() {
// JavaScript
const options = {
ReCAPTCHA_API_KEY_CLIENT: 'YOUR_RECAPTCHA_SITE_KEY',
ReCaptchaSubmit: {
success: () => {
console.log('reCAPTCHA verification successful!');
},
failed: () => {
console.log('reCAPTCHA verification failed!');
},
expired: () => {
console.log('reCAPTCHA verification expired!');
},
},
autoVerification: {
requiredMsg: $("#msg1"),
},
apiScriptLoading: {
loadingMsg: '<div class="spinner-border text-warning" role="status"></div>',
error: () => {
console.log('Error while loading API script.');
},
errorMsg: "<div class='alert alert-danger'>Custom Error while loading API Script. <b class='retry-load-api-script clickable'>retry</b></div>",
},
};
// Initialize EasyCaptchaJs on multiple targets with the shared class name "captchaTarget"
$('#captcha-placeholder').EasyCaptcha(options);
});
</script>
- Add CAPTCHA Placeholder: Insert a placeholder where the CAPTCHA will appear.
<form id="your-form-id">
<!-- Your form fields here -->
<div id="captcha-placeholder"></div>
<button type="submit">Submit</button>
</form>
Make CAPTCHA Easy and Fun! 🎉
No more complicated setups or boring CAPTCHAs. With EasyCaptchaJs, you can enhance your website’s security while providing a smooth and engaging user experience. Ready to upgrade your forms? Give EasyCaptchaJs a try today and see the difference! 😃
Check out the EasyCaptchaJs GitHub page for more details and start simplifying your CAPTCHA implementation! 🚀
This content originally appeared on DEV Community and was authored by HichemTech
HichemTech | Sciencx (2024-07-12T21:56:52+00:00) Simplify CAPTCHA Implementation with EasyCaptchaJs! 🎉🔐. Retrieved from https://www.scien.cx/2024/07/12/simplify-captcha-implementation-with-easycaptchajs-%f0%9f%8e%89%f0%9f%94%90-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.