devcaptcha

Open source captcha made with React, Node and TypeScript for DEV.to community

Features

Fast and efficient, uses Redis as temp storage,
Implements leading zero challenge,
Requires image recognition to find coordinates on a background,
Customizable, you can easily tailor to your needs,
Simple integration in just few minutes,
Written with Typescript, React, Node and Express,

Getting started

git clone https://github.com/pilotpirxie/devcaptcha.git
cd devcaptcha/devcaptcha-server
yarn install
yarn start

Integration

Captcha should be configured equally on the client and backend side to works correctly.

const devcaptcha = new DevCaptcha({
  appendSelector: '#captcha',
  promptText: 'Move the puzzle to the correct position to solve captcha',
  lockedText: 'Locked',
  savingText: 'Wait',
  privacyUrl: 'https://example.com',
  termsUrl: 'https://example.com',
  baseUrl: 'http://localhost:8081',
  puzzleAlpha: 0.9,
  canvasContainerId: 'devcaptcha-container',
  leadingZerosLength: 3,
  workerPath: './worker.js'
});

Client Config Definition:

export type CaptchaConfig = {
  appendSelector: string, // place to append
  promptText: string, // text on the top of captcha
  lockedText: string, // text after locking
  savingText: string, // text while solving leading zero challenge
  privacyUrl: string, // url to your privacy policy
  termsUrl: string, // url to your terms of service
  baseUrl: string, // base url of devcaptcha server
  puzzleAlpha: number, // transparency of puzzle
  canvasContainerId: string, // id for a div with canvas
  leadingZerosLength: number, // required number of zeros at the front
  workerPath: string, // path to worker.js file
}

Server Config

{
  "port": 8081,
  "timeout": 8000,
  "apiKey": "WmC8xsPD8jhufzndFF3RykNez5QtjXuZ",
  "maxDistance": 32,
  "leadingZerosLength": 3,
  "challengeCount": 50,
  "challengeLength": 256,
  "backgroundPuzzlePath": "/public/puzzle/1.png",
  "clientPuzzlePath": "/public/puzzle/2.png",
  "backgroundImagesPath": "/public/backgrounds/optimized",
  "backgroundQuality": 25,
  "puzzleWidth": 64,
  "puzzleHeight": 64,
  "maxTTL": 30,
  "forceCleanOpimizedImageCache": false
}

Server Config Definition

type ServerConfig = {
  port: number, // port to run server
  timeout: number, // maximum time to respond
  apiKey:  string, // secret api key for verifying response
  maxDistance: number, // maximum distance between client and server puzzles
  leadingZerosLength: number, // required number of zeros at the front
  challengeCount: number, // number of string in leading zero challenge 
  challengeLength: number, // length of single string
  backgroundPuzzlePath: string, // path to the puzzle for composition with a background
  clientPuzzlePath: string, // path to the puzzle for client side
  backgroundImagesPath: string, // path to directory with background images
  puzzleWidth: number, // puzzle width
  puzzleHeight: number, // puzzle height
  maxTTL: number, // time to store user data in redis
  backgroundQuality: number, // quality of output background
  forceCleanOpimizedImageCache: boolean // run optimization on each startup
}

Blog series

Part 1 - Architecture

Part 2 - Environment

Part 3 - React and PIXI.js

Part 4 - Verify Algorithms and Image Manipulation