captcha-kit

Smart Captcha - Smart Verification Code Library

A powerful and easy-to-use front-end captcha library that supports multiple captcha types, including graphic captcha, slider captcha, and puzzle captcha.

Features

• 🎨 Graphic Captcha: Support custom character set, interference lines, interference points, fonts, etc.
• 🎯 Slider Captcha: Simple and intuitive sliding verification, support custom styles and thresholds.
• 🧩 Puzzle Captcha: Multiple shapes of puzzle verification, support custom background images.
• 📱 Responsive Design: Adapt to different screen sizes.
• 🎨 Highly Customizable: Support custom colors, sizes, texts, etc.
• 🔧 Easy to Integrate: Simple API, quickly integrate into existing projects.
• 📦 Lightweight: No external dependencies, small size.

Installation

npm install smart-captcha

Quick Start

Import Library

import { createCaptcha } from 'smart-captcha';

1. Graphic Captcha

Create a graphic captcha instance, supporting custom character length, interference lines, interference points, etc. Verify user input by calling the verify() method, and refresh the captcha using the refresh() method.

2. Slider Captcha

Create a slider captcha instance, where users complete verification by sliding the slider. Supports custom slider styles, track colors, and hint text.

3. Puzzle Captcha

Create a puzzle captcha instance, where users need to drag the slider to move the puzzle piece to the correct position. Supports custom background images, puzzle shapes, and sizes.

API Documentation

createCaptcha(options)

Factory function to create captcha instances.

Parameters

Parameter	Type	Description
options	CaptchaOptions	Captcha configuration options

Returns

Captcha instance.

CaptchaOptions

Unified interface for captcha configuration options, specific options vary depending on mode.

Common Events

Event	Type	Description
onSuccess	Function	Verification success callback
onFail	Function	Verification failure callback
onRefresh	Function	Captcha refresh callback
onTimeout	Function	Captcha timeout callback

Graphic Captcha Options (GraphicCaptchaOptions)

Option	Type	Default	Description
container	HTMLElement	-	Captcha container element
length	number	4	Captcha character length
lineCount	number	6	Number of interference lines
dotCount	number	20	Number of interference points
fontSize	number	20	Font size
chars	string	'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'	Optional character set
strictCase	boolean	false	Whether to strictly check case
refreshOnFail	boolean	false	Whether to refresh when verification fails
fonts	string[]	-	Optional font list
timeout	number	60000	Captcha expiration time (milliseconds)

Slider Captcha Options (SliderCaptchaOptions)

Option	Type	Default	Description
container	HTMLElement	-	Captcha container element
threshold	number	0.95	Success threshold (percentage)
resetOnFail	boolean	true	Whether to reset after verification failure
timeout	number	60000	Timeout time (milliseconds)
sliderColor	string	'#409eff'	Slider color
trackColor	string	'#f5f7fa'	Track color
textColor	string	'#606266'	Text color
hintText	string	'Slide to the right to complete verification'	Default hint text
successColor	string	'#67c23a'	Success color
failColor	string	'#f35445'	Failure color
successText	string	'Verification passed'	Success text
failText	string	'Verification failed, please try again'	Failure text

Puzzle Captcha Options (PuzzleCaptchaOptions)

Option	Type	Default	Description
container	HTMLElement	-	Captcha container element
width	number	300	Container width
height	number	200	Container height
puzzleWidth	number	50	Puzzle block width
puzzleHeight	number	50	Puzzle block height
backgroundImage	string	string[]	-
shape	'triangle'	'square'	'hexagon'
threshold	number	5	Success threshold
resetOnFail	boolean	true	Whether to reset after failure
showAsPopup	boolean	false	Whether to show as popup
textColor	string	'#606266'	Text color
successColor	string	'#67c23a'	Success color
sliderColor	string	'#409eff'	Slider initial color
mismatchColor	string	'#f35248'	Slider mismatch color
hintText	string	'Drag the slider to complete the puzzle'	Default hint text
failText	string	'Verification failed, please try again'	Failure text
successText	string	'Verification passed'	Success text

Captcha Instance Methods

Graphic Captcha Instance

Method	Description
verify(input: string	number): Promise
refresh(): Promise	Refresh captcha
destroy(): void	Destroy captcha instance

Slider Captcha Instance

Method	Description
refresh(): void	Refresh captcha
destroy(): void	Destroy captcha instance
getVerified(): boolean	Get verification status

Puzzle Captcha Instance

Method	Description
refresh(): void	Refresh captcha
destroy(): void	Destroy captcha instance

Browser Compatibility

• Chrome (Recommended)
• Firefox
• Safari
• Edge

Development

Install Dependencies

npm install

Build

npm run build

Run Examples

npm start

This will open the test page in the browser, showing usage examples of various captchas.

Examples

Check the example files in the test directory:

• graphic.html - Graphic captcha example
• slider.html - Slider captcha example
• puzzle.html - Puzzle captcha example

License

MIT License

Changelog

1.0.0

• Initial release
• Support graphic captcha, slider captcha and puzzle captcha
• Support responsive design
• Support high customization

Contribution

Welcome to submit Issues and Pull Requests!