Why choose Drawing Captcha?

Drawing Captcha is a creative approach to user verification, combining security, engagement, and branding in one seamless solution. Here’s why it’s the ideal choice for your website:

• Innovative Security:

  • Utilizes creative tasks like drawing patterns or coloring logos to verify users.
  • Difficult for automated bots to bypass, enhancing protection for online forms.

• Engaging User Experience:

  • Transforms verification into an interactive and enjoyable process.
  • Reduces user frustration compared to traditional captchas.

• Easy Integration:

  • Compatible with any form on your website.
  • Managed through a centralized app for effortless integration and customization.

• Open-Source Collaboration:

  • Invites contributions from developers worldwide.
  • Fosters continuous improvement and innovation.

• Brand Promotion Opportunities:

  • Incorporates brand elements into captcha tasks.
  • Enhances brand recognition and user engagement.

• Customizable and Scalable:

  • Tailor the captcha experience to meet specific needs.
  • Scales effortlessly as your requirements grow.

Drawing Captcha is not just a security tool; it’s a comprehensive solution that elevates user interaction, promotes your brand, and ensures robust protection. Choose Drawing Captcha to redefine your approach.

Prerequisites

1. Operating System: Ensure you are using a compatible OS (Linux, macOS, or Windows).
2. Node.js and npm: Make sure Node.js and npm are installed on your system. You can download them from nodejs.org.
3. MongoDB: Install MongoDB on your system. You can download it from mongodb.com. Or use a docker container.

Step 1: Clone the Repository

• Open your terminal or command prompt.

• Navigate to the directory where you want to install the application.

• Run the following command to clone the repository:

    git clone https://github.com/Drawing-Captcha/Drawing-Captcha-APP.git

Step 2: Navigate to the Project Directory

Change into the project directory:

    cd drawing-captcha

Step 3: Install Dependencies

Install the necessary Node.js packages using npm:

    npm install

Used Dependencies

The project utilizes the following dependencies, each serving specific functionalities and security purposes. Below is an overview of the packages used:

• bcryptjs: For securely hashing passwords.
• connect-mongodb-session: For storing session data in a MongoDB database.
• cookie-parser: For parsing cookies in HTTP requests.
• cors: For configuring Cross-Origin Resource Sharing (CORS) to enable secure API access.
• csurf: For protecting against Cross-Site Request Forgery (CSRF) attacks.
• dotenv: For loading environment variables from a .env file.
• ejs: For server-side rendering of HTML templates.
• express: A backend framework for building web applications and APIs.
• express-rate-limit: For protecting against brute-force attacks by limiting request rates.
• express-session: For managing sessions in the application.
• helmet: For enhancing HTTP header security.
• mongo-sanitize: For preventing NoSQL injection attacks.
• mongoose: For interacting with MongoDB databases in an object-oriented manner.
• nodemailer: For sending emails from the application.
• passport: For implementing authentication strategies.
• passport-google-oauth20: For authentication using Google OAuth 2.0.
• passport-microsoft: For authentication using Microsoft OAuth 2.0.
• path: For working with file paths.
• postmark: For sending emails via the Postmark service.
• uuid: For generating unique IDs.
• validator: For validating and sanitizing input data.
• xss: For protecting against Cross-Site Scripting (XSS) attacks.

Step 4: Configure Environment Variables

• Create a .env file in the root of the project directory. Here you can find the explanations for the env variables

• Add the following environment variables to the .env file:

    MONGO_INITDB_ROOT_USERNAME=root
MONGO_INITDB_ROOT_PASSWORD=rootTest
MONGO_INITDB_DATABASE=drawing-captcha
MONGO_URI=mongodb://localhost:7500/drawing-captcha
SERVER_DOMAIN=https://yourdomain.com
PORT=9091
REGISTER_KEY=&&+%&%ajkhdjhWIIWNw7>dajh2gg
DC_ADMIN_EMAIL=your@mail.com
DC_ADMIN_PASSWORD=admin
# if you dont want to use a email verification just leave that empty:
EMAIL_SERVICE=
EMAIL_FROM=
SMTPAUTH_EMAIL_HOST=
SMTPAUTH_EMAIL_PORT=587
SMTPAUTH_EMAIL_USER=
SMTPAUTH_EMAIL_PASS=
POSTMARK_SERVER_CLIENT=
POSTMARK_MESSAGE_STREAM=

Step 5: Start the app

Once you have completed the configuration of your application, you can initiate it by executing the following command in your terminal:

    node app.js

You can access your application instance on your configured port on localhost.

Home

On the Home Dashboard Screen, as an App Administrator, you have access to view all Captchas and Companies. If you are a basic admin for a specific company, you will only see the Captchas associated with your company and have the ability to edit them.

Deleted Archive

The Deleted Archive contains Captchas that have been removed from the Home Dashboard. These Captchas are inactive here, providing a space to store them temporarily. You can reactivate them by using the arrow button to restore them to active status.

Settings

The Drawing Captcha settings allow you to customize the appearance and default text of the Captcha. You have the option to reset these settings to their default values at any time. Additionally, you can choose the color for the Drawing Captcha to suit your preferences.

Api Keys & Allowed Origins

You can create API keys for use in your implementation, enabling the display of the Drawing Captcha on your form, make sure you have created your company first because you would need to reference to one.

API keys are used to communicate with your form (captcha.js), and it is not dangerous if your key is open. You can only fetch with this API key if you have entered the allowed origin. These keys are specifically for your company and can only fetch data from your company's services. This is why you need an allowed origin with an API key:

If you want to allow a origin, which is nessecery to allow the usages of your api keys you have to create it under allowed origins:

Registered Users

In the Registered Users section, you can view all users registered on this instance. As an app admin, you have the ability to manage your own user account, change your password, assign users to different companies, and manage users as an admin within your company. However, you have visibility into all companies and their users. As a company admin, you can only see app admins and the users within your own company.

Register Key

The register key is used to allow a user to sign up on a page and be associated with a specific company. This is why each company has its own register key. The app register key is intended for users who are not assigned to any company and can be assigned to a company by an app admin.

Companies

As an App Admin, you have the ability to create, update, and delete companies. This section allows you to perform these actions.

Option 1: Installation 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:

    <script src="https://cdn.drawing-captcha.com/captcha.js"></script>

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:

    npm i @drawing-captcha/drawing-captcha-frontend

Step 1: Create API Key and allowed origin

To implement your Drawing Captcha, navigate to the back office of your Drawing Captcha App instance and create an API key with an origin specific to your company.

Step 2: Initialize Captcha

First, you need to call the initialize function from the package you just installed. Add the following script tag to your HTML:

    <script src="/js/captcha.js" onload="(function(){initializeCaptcha()})()"></script>

Step 3: 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:

Step 4: Add Drawing-Captcha Attribute to Your Form

Drawing-Captcha Attribute is needed to trigger the Drawing Captcha on your form you have to put this attribute where you want the drawing captcha to trigger on submit.

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:

Step 5: Validate Connection

If everything is functioning correctly, you can verify the connection status by checking the developer tools. There, you can confirm if the test connection was successful:

NuGet

To use the Drawing Captcha integration, you need a separate instance (Drawing Captcha App) dedicated to validating captchas. This instance allows you to create and customize captchas according to your preferences.

You can find the NuGet on Nuget.org

    dotnet add package DrawingCaptcha

Setup

After installation, implement the script that triggers the drawing captcha attributes. It is recommended to place this script in the base page view to ensure it is rendered after the form integration example on normal html:

    <script src="~/App_Plugins/Drawing_Captcha/captcha.js" onload="initializeCaptcha()"></script>

Example integration in a Razor view:

Configuration

Ensure your API key and server are configured in appsettings.json:

You can obtain an API key by creating a company account if you haven't done so already. Make sure to allow the origin that will be using the drawing captcha.

Here the guide.

Umbraco Backoffice-Integration

After setting up the configuration, navigate to the Umbraco Forms backoffice. You should see the extended field type added by the package, indicating that the drawing captcha is active.

Here you can see that the drawing captcha is active: