SVG Cpatcha
svg captcha generator for Deno
usage:
import { makeCaptcha } from "https://deno.land/x/svg_captcha@v1.1.0/mod.ts"
const captcha = makeCaptcha()
const svgContext = captcha.svgContext
const text = captcha.text
Example with oak:
import { Application, Router } from "https://deno.land/x/oak/mod.ts";
import { makeCaptcha } from "https://deno.land/x/svg_captcha@v1.1.0/mod.ts";
const app = new Application();
const router = new Router();
app.use(router.allowedMethods());
app.use(router.routes());
router.get("/captcha", (ctx) => {
// make new Captcha
const captcha = makeCaptcha();
// the content-type of response should be "image/svg+xml"
// in order for the browser not to display it as plain text
ctx.response.type = "image/svg+xml";
// put the svgContext of captcha as response body
ctx.response.body = captcha.svgContext;
// set the captcha test as cookie
ctx.cookies.set("svg_captcha_text", captcha.text, {
expires: new Date(new Date().getTime() + 36000),
httpOnly: false,
});
});
await app.listen({ port: 8000 });
options:
You can customize the captcha according to your needs through the settings provided by the module by passing an object to the function
1: Dimensions (height/width)
Determine the height and width of the
const captcha = makeCaptcha({
height: 150, // by default: 120
width: 400, // by default: 300
});
2: Number of characters
number of characters
const captcha = makeCaptcha({
charactersNumber: 7, // by default: 5
});
3: Text options
Text options Interface
export interface TextOptions {
overlap?: boolean;
color?: string;
randomColor?: boolean;
fontSize?: number;
randomFontSize?: { min: number; max: number };
rotate?: number;
}
Text options setting up
const captcha = makeCaptcha({
textOptions: {
overlap: true, // (boolean) interlacing and overlapping letters by default: false. NOTE: Enabling this option can make the text too complex sometimes to be comprehensible
color: '#000', // text color (string of hex color) by default: #000 (black)
randomColor: true, // (boolean) generate a random color for each letter default: false NOTE: When this option is enabled, the textColor option will be ignored if it was previously selected
fontSize: 2, // (number) text font size - measuring unit rem
randomFontSize?: {min:number, max:number}, // (object) random text font size for each character You must specify the minimum and the maximum font size - measuring unit rem NOTE: When this option is enabled, the fontSize option will be ignored if it was previously selected
rotate: number, // (number) degree of rotation of letters NOTE: When this option is enabled, the characters are rotated randomly within the specified number range from negative to positive (e.g: textOptions.rotate = 30,// the characters are rotated randomly between 30 and -30 degree) by default: 0
}
})
Captcha validation
in server side(Deno App):
import { isValid } from "https://deno.land/x/svg_captcha@v1.1.0/mod.ts"
/**
* This function accepts two parameters
* @params {string} userInput, user input
* @params {string} svg_captcha_text, svg_captcha_text cookie value
* @returns {boolean} true if user input is valid false if no
*/
isValid(userInput, svg_captcha_text)
in client side(The browser):
add this code to your html page
<!-- html file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
<script src="https://deno.land/x/svg_captcha@v1.1.0/validate.js"></script>
And you can use the isValid
function to validate Match user input with captcha text
/**
* This function accepts two parameters
* @params {string} userInput, user input
* @returns {boolean} true if user input is valid false if no
* Note: When sending a request to the server to generate. SVG Captcha svg_captcha_text ا
* svg captcha text It must have the value captcha.text
*/
isValid(userInput)
Run test
[--port=<port>, -p=<port>](default: 3000)
deno run --allow-net https://deno.land/x/svg_captcha@v1.1.0/test.ts -p=3000