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
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! 🎨✨
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.
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: https://github.com/Drawing-Captcha/Drawing-Captcha-Frontend.
git clone https://github.com/wpesicdev/drawing-captcha-app-alpha.gitI have added a `.env.example`. You can just rename this file to `.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.
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
docker-compose up --build -dIf you haven't changed the default port, it should be working on http://localhost:9091.
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: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
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See MIT License for more information.
- Drawing Captcha Documentation Hub
- Drawing Captcha for Umbraco
- Drawing Captcha NPM Package Frontend Integration
Buy me a coffee: https://www.buymeacoffee.com/williamspe8