https://github.com/drawing-captcha/drawing-captcha-app

Drawing Captcha is an innovative software that enhances security and promotes brand awareness by requiring users to complete interactive drawing tasks to pass the verification process. (Website comes soon)
https://github.com/drawing-captcha/drawing-captcha-app
captcha drawing js nodejs open-source security solving
Last synced: 9 months ago
JSON representation
Host: GitHub
URL: https://github.com/drawing-captcha/drawing-captcha-app
Owner: Drawing-Captcha
License: mit
Created: 2024-07-12T09:38:46.000Z (almost 2 years ago)
Default Branch: master
Last Pushed: 2025-07-09T13:05:22.000Z (10 months ago)
Last Synced: 2025-07-09T13:25:29.743Z (10 months ago)
Topics: captcha, drawing, js, nodejs, open-source, security, solving
Language: JavaScript
Homepage:
Size: 11.2 MB
Stars: 7
Watchers: 1
Forks: 0
Open Issues: 6
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

          


[![Contributors][contributors-shield]][contributors-url]

[![Forks][forks-shield]][forks-url]

[![Stargazers][stars-shield]][stars-url]

[![Issues][issues-shield]][issues-url]

[![License][license-shield]][license-url]

[![LinkedIn][linkedin-shield]][linkedin-url]






  

    

  

  
Drawing-Captcha APP

  



    Boost security and brand awareness with Drawing Captcha, the fun and interactive way to verify users!

    


    Explore the docs »

    


    


    View Demo

    ·

    Report Bug

    ·

    Request Feature

  



  Table of Contents

  


    

      About The Project

      

        Built With

      

    

    Request Flow

    

      Getting Started

      

        Docker Compose Setup

        Docker Compose Setup with Image

      

    

    Contributing

    License

    Contact

    Usefull Links

    Acknowledgments

  


## About The Project

[![Product Name Screen Shot][product-screenshot]](https://github.com/user-attachments/assets/cc1ef188-2cd6-4d73-94fe-8ac191a52926)

I couldn’t find a captcha solution that combined security, creativity, and branding in a way that felt truly engaging—so I created Drawing-Captcha. It’s designed to make user verification fun, secure, and memorable.

Here’s why you’ll love it:

* Focus on building something awesome while Drawing-Captcha handles security.

* Say goodbye to boring, frustrating captchas and hello to interactive, creative tasks.

* Promote your brand effortlessly by integrating logos and custom designs into the captcha experience.

Of course, no single solution fits every project perfectly. That’s why Drawing-Captcha is open-source and always evolving. Feel free to fork the repo, submit a pull request, or open an issue to contribute your ideas. Let’s build the future of user verification together! 🎨✨

(back to top)


### Built With

* ![Mongo][MongoDB]

* ![NodeJS][NodeJS]

* ![ExpressJS][ExpressJS]

* ![EJS][EJS]

* ![JS][JS]

* ![Docker][Docker]

* ![HTML][HTML]

* ![CSS][CSS]

(back to top)


## Drawing-Captcha Request Flow

This is the request flow for the Drawing-Captcha environment. It demonstrates how to use the Drawing-Captcha API and explains its communication process with the frontend.

![Request Flow Drawing Captcha][Request-Flow-Drawing-Captcha]

(back to top)


## Getting Started

This repository contains the Drawing Captcha APP, which is required for the Drawing Captcha to function. It communicates with the Captcha JS library, which can be installed via npm: `@drawing-captcha/drawing-captcha-frontend`.

Alternatively, you can use the CDN: `https://cdn.drawing-captcha.com/captcha.js`.

To learn how to integrate it and enable communication with your Drawing Captcha app instance, please refer to the README in this repository: .

### Docker Compose Setup

#### Clone this project:

  ```sh

  git clone https://github.com/wpesicdev/drawing-captcha-app-alpha.git

  ```

#### Create and change your `.env` settings:

I have added a `.env.example`. You can just rename this file to `.env`.


   ```env

   MONGO_INITDB_ROOT_USERNAME=root

   MONGO_INITDB_ROOT_PASSWORD=rootTest

   MONGO_INITDB_DATABASE=drawing-captcha

   # For local development

   # MONGO_URI="mongodb://localhost:7500/drawing-captcha"

   # For deployment

   MONGO_URI="mongodb://${MONGO_INITDB_ROOT_USERNAME}:${MONGO_INITDB_ROOT_PASSWORD}@dc_mongo:27017/${MONGO_INITDB_DATABASE}?authSource=admin"

   # Enter here your domain where you want to host your Drawing Captcha. Important: enter it with http/https

   SERVER_DOMAIN="https://yourdomain.com"

   # Port of your server

   PORT=9091

   # This will automatically be reset:

   REGISTER_KEY="&&+%&%ajkhdjhWIIWNw7>dajh2gg"

   # Change this email!!

   DC_ADMIN_EMAIL="your@mail.com"

   # Change this password!!!

   DC_ADMIN_PASSWORD="admin"

   # Defines how long a solved Session can be called back to verify

   JWT_TOKEN_EXPIRATION=5

   #Email settings

   EMAIL_SERVICE= #smtpAuth || postmark 

   EMAIL_FROM=noreply@drawing-captcha.com

   

   SMTPAUTH_EMAIL_HOST=

   SMTPAUTH_EMAIL_PORT=

   SMTPAUTH_EMAIL_USER=

   SMTPAUTH_EMAIL_PASS=

   

   POSTMARK_SERVER_CLIENT=

   POSTMARK_MESSAGE_STREAM=

   #OAUTH2 Setup & Login

   # You can set this to false if you want to use the basic login with username and password (and for example just use oAuth2 for registration / logins) this is per default set to true

   BASIC_AUTH=true

   # For Google OAuth2

   GOOGLE_CLIENT_ID=

   GOOGLE_CLIENT_SECRET=

   # For Microsoft OAuth2

   MICROSOFT_CLIENT_ID=

   MICROSOFT_CLIENT_SECRET=

   #if none is given the default is "common"

   MICROSOFT_TENANT_ID=

   #OpenTelemetry HTTPS endpoint

   OTEL_EXPORTER_OTLP_ENDPOINT="http://127.0.0.1:4318/v1/logs"

   ```

For more information on the environment variables, refer to the [official documentation](https://docs.drawing-captcha.com/documentation/#section-environment).

Please note to change these variables:

- MONGO_INITDB_ROOT_USERNAME

- MONGO_INITDB_ROOT_PASSWORD

- SERVER_DOMAIN (if you want to host it somewhere)

- DC_ADMIN_EMAIL

- DC_ADMIN_PASSWORD

#### Final steps:

```sh

docker-compose up --build -d

```

If you haven't changed the default port, it should be working on http://localhost:9091.


### Docker Compose Image Setup

```yml

version: "3.8"

services:

  dc_node:

    container_name: dc_node

    image: williamspesic/drawing-captcha-app:latest

    ports:

      - 9091:9091

    networks:

      - dc_network

      - nginx_default

    depends_on:

      - dc_mongo

    restart: always

    environment:

      MONGO_URI: ${MONGO_URI}

      PORT: ${PORT}

      SERVER_DOMAIN: ${SERVER_DOMAIN}

      REGISTER_KEY: ${REGISTER_KEY}

      DC_ADMIN_EMAIL: ${DC_ADMIN_EMAIL}

      DC_ADMIN_PASSWORD: ${DC_ADMIN_PASSWORD}

      EMAIL_SERVICE: ${EMAIL_SERVICE}

      EMAIL_FROM: ${EMAIL_FROM}

      SMTPAUTH_EMAIL_HOST: ${SMTPAUTH_EMAIL_HOST}

      SMTPAUTH_EMAIL_PORT: ${SMTPAUTH_EMAIL_PORT}

      SMTPAUTH_EMAIL_USER: ${SMTPAUTH_EMAIL_USER}

      SMTPAUTH_EMAIL_PASS: ${SMTPAUTH_EMAIL_PASS}

      POSTMARK_SERVER_CLIENT: ${POSTMARK_SERVER_CLIENT}

      POSTMARK_MESSAGE_STREAM: ${POSTMARK_MESSAGE_STREAM}

      BASIC_AUTH: ${BASIC_AUTH}

      GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}

      GOOGLE_CLIENT_SECRET: ${GOOGLE_CLIENT_SECRET}

      MICROSOFT_CLIENT_ID: ${MICROSOFT_CLIENT_ID}

      MICROSOFT_CLIENT_SECRET: ${MICROSOFT_CLIENT_SECRET}

  dc_mongo:

    container_name: dc_mongo

    image: mongo:latest

    expose:

      - "27017"

    volumes:

      - drawing-captcha:/data/db

    networks:

      - dc_network

    restart: always

    environment:

      MONGO_INITDB_ROOT_USERNAME: ${MONGO_INITDB_ROOT_USERNAME}

      MONGO_INITDB_ROOT_PASSWORD: ${MONGO_INITDB_ROOT_PASSWORD}

      MONGO_INITDB_DATABASE: ${MONGO_INITDB_DATABASE}

networks:

  dc_network:

  nginx_default:

    external: true

volumes:

  drawing-captcha:

```

(back to top)


## Usage

Implementation step by step: https://github.com/Drawing-Captcha/Drawing-Captcha-Frontend/blob/main/README.md#implementation-guide

Demo Site: https://demo.drawing-captcha.com

_For more examples, please refer to the [Documentation](https://docs.drawing-captcha.com)_

(back to top)


## Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".

Don't forget to give the project a star! Thanks again!

1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

### Top contributors:



  



(back to top)


## License

Distributed under the MIT License. See [MIT License](https://opensource.org/licenses/MIT) for more information.

## Contact

info@wpesic.dev

(back to top)


## Usefull Links

* [Drawing Captcha Documentation Hub](https://docs.drawing-captcha.com/documentation/)

* [Drawing Captcha for Umbraco](https://marketplace.umbraco.com/package/drawingcaptcha)

* [Drawing Captcha NPM Package Frontend Integration](https://www.npmjs.com/package/@drawing-captcha/drawing-captcha-frontend?activeTab=readme)

## Acknowledgments

* [Img Shields](https://shields.io)

* [ReadMe Template](https://github.com/othneildrew/Best-README-Template)

(back to top)


## 💖 Like my work?

Buy me a coffee: https://www.buymeacoffee.com/williamspe8

[contributors-shield]: https://img.shields.io/github/contributors/Drawing-Captcha/Drawing-Captcha-APP.svg?style=for-the-badge

[contributors-url]: https://github.com/Drawing-Captcha/Drawing-Captcha-APP/graphs/contributors

[forks-shield]: https://img.shields.io/github/forks/Drawing-Captcha/Drawing-Captcha-APP.svg?style=for-the-badge

[forks-url]: https://github.com/Drawing-Captcha/Drawing-Captcha-APP/network/members

[stars-shield]: https://img.shields.io/github/stars/Drawing-Captcha/Drawing-Captcha-APP.svg?style=for-the-badge

[stars-url]: https://github.com/Drawing-Captcha/Drawing-Captcha-APP/stargazers

[issues-shield]: https://img.shields.io/github/issues/Drawing-Captcha/Drawing-Captcha-APP.svg?style=for-the-badge

[issues-url]: https://github.com/Drawing-Captcha/Drawing-Captcha-APP/issues

[license-shield]: https://img.shields.io/github/license/Drawing-Captcha/Drawing-Captcha-APP.svg?style=for-the-badge

[license-url]: https://github.com/Drawing-Captcha/Drawing-Captcha-APP/blob/master/LICENSE

[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555

[linkedin-url]: https://linkedin.com/in/wpesicdev

[product-screenshot]: https://github.com/user-attachments/assets/cc1ef188-2cd6-4d73-94fe-8ac191a52926

[Request-Flow-Drawing-Captcha]: ./public/images/request-flow.png

[MongoDB]: https://img.shields.io/badge/-MongoDB-13aa52?style=for-the-badge&logo=mongodb&logoColor=white

[NodeJS]: https://img.shields.io/badge/node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white

[ExpressJS]: https://img.shields.io/badge/express.js-000000?style=for-the-badge&logo=express&logoColor=white

[EJS]: https://img.shields.io/badge/-EJS-B4CA65?logo=ejs&logoColor=white&style=for-the-badge

[JS]: https://shields.io/badge/JavaScript-F7DF1E?logo=JavaScript&logoColor=000&style=for-the-badge

[Docker]: https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=white&style=for-the-badge

[CSS]: https://img.shields.io/badge/CSS-1572B6?logo=CSS&logoColor=white&style=for-the-badge

[HTML]: https://img.shields.io/badge/HTML-E34F26?logo=HTML5&logoColor=white&style=for-the-badge
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/drawing-captcha/drawing-captcha-app

Awesome Lists containing this project

README

Drawing-Captcha APP
