https://github.com/drawing-captcha/drawing-captcha-frontend
This repository provides the necessary frontend components to integrate the Drawing-Captcha system into your web forms.
https://github.com/drawing-captcha/drawing-captcha-frontend
captcha frontend npm self-hosted
Last synced: 3 months ago
JSON representation
This repository provides the necessary frontend components to integrate the Drawing-Captcha system into your web forms.
- Host: GitHub
- URL: https://github.com/drawing-captcha/drawing-captcha-frontend
- Owner: Drawing-Captcha
- License: mit
- Created: 2024-07-12T09:43:07.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-27T11:47:19.000Z (about 1 year ago)
- Last Synced: 2025-09-20T19:38:14.896Z (9 months ago)
- Topics: captcha, frontend, npm, self-hosted
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@drawing-captcha/drawing-captcha-frontend?activeTab=readme
- Size: 60.5 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# How to integrate the Drawing-Captcha Frontend
Learn how to integrate Drawing-Captcha into your web forms. Enhance security and user experience with our easy-to-follow guide on installation, configuration, and usage. Discover features like customizable patterns, responsive design, and seamless integration. Perfect for developers looking to add innovative captcha solutions to their projects.
## Installation
### Option 1: Usage with CDN
For a quick and easy integration, you can use the Drawing-Captcha frontend via our CDN. This eliminates the need to install the package locally via npm. Simply add the following script tag to your HTML file:
```html
```
### Option 2: Installation via npm
If you prefer to manage the Drawing-Captcha frontend locally within your project, you can install it via npm. Run the following command in your project console:
```bash
npm i @drawing-captcha/drawing-captcha-frontend
```
## Implementation Guide
### Step 1: Initialize Captcha
First, you need to call the initialize function from the package you just installed. Add the following script tag to your HTML:
```html
```
### Step 2: Configure Captcha with API Key
Generate an API key from your Drawing Captcha Instance in the back office. Then, add the API key and server details into the following script variables:
```html
var CaptchaHiddenAPIKey = "YOURKEY";
var CaptchaServerWithPort = "https://drawing.yourdomain.com";
```
### Step 3: Add Drawing-Captcha Attribute to Your Form
To enable the captcha on your form, add the `drawing-captcha` attribute to the form element. Here is an example of what your form could look like:
```html
var CaptchaHiddenAPIKey = "bd494f45-fc75-4a58-a5ae-815d18c35f44";
var CaptchaServerWithPort = "https://drawing.wpesic.dev";
```
## Additional Resources
For further information and detailed documentation, please visit the official Drawing-Captcha documentation at [docs.drawing-captcha.com](https://docs.drawing-captcha.com).
## Demo
You can find a demo of the Drawing-Captcha implementation on GitHub: [Drawing-Captcha-Demo](https://github.com/Drawing-Captcha/Drawing-Captcha-Demo) or try it live at [demo.drawing-captcha.com](https://demo.drawing-captcha.com).
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.