Generate SVG captcha in NodeJS Express applications
- cannot or do not want to use google recaptcha
- have issue with install c++ addon
- have issue with install canvas dependency
npm install --save express-captcha-continued
'use strict';
const express = require('express');
const session = require('express-session');
const bodyParser = require('body-parser');
const path = require('path');
const captchaUrl = '/captcha.jpg';
const captchaMathUrl = '/captcha_math.jpg';
const captchaSessionId = 'captcha';
const captchaFieldName = 'captcha';
const captcha = require('express-captcha-continued').create({
cookie: captchaSessionId
});
//load custom font (optional)
captcha.loadFont(path.join(__dirname, './fonts/Comismsh.ttf'));
const app = express();
app.use(
session({
secret: 'your secret',
resave: false,
saveUninitialized: true
})
);
app.use(bodyParser.urlencoded({ extended: false }));
app.get(captchaUrl, captcha.image());
app.get(captchaMathUrl, captcha.math());
app.get('/', (req, res) => {
res.type('html');
res.end(`
<img src="${captchaUrl}"/>
<form action="/login" method="post">
<input type="text" name="${captchaFieldName}"/>
<input type="submit"/>
</form>
<a href='/'>refresh</a>
`);
});
app.get('/math', (req, res) => {
res.type('html');
res.end(`
<img src="${captchaMathUrl}"/>
<form action="/login" method="post">
<input type="text" name="${captchaFieldName}"/>
<input type="submit"/>
</form>
<a href='/math'>refresh</a>
`);
});
app.post('/login', (req, res) => {
res.type('html');
res.end(`
<p>CAPTCHA VALID: ${captcha.check(req, req.body[captchaFieldName])}</p>
`);
});
app.listen(3000, function () {
console.log('Listening on port 3000!');
});
cookie
:'captcha'
,background
:'rgb(255,200,150)'
,fontSize
:60
,width
:250
,height
:150
,charPreset
:'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
,size
:5
,noise
:1
size
: 4 // size of random stringcolor
: false // will generate random color for each character
Will return an SVG captcha with random characters
default captcha image:
Will return an SVG captcha with a random math expression
default captcha image with a math expression:
req
: express requesttext
: Captcha input datacaseSensitive
: defaulttrue
Load your own font and override the default font.
url
: string // path to your font This api is a wrapper around loadFont api of opentype.js. Your may need experiment around various options to make your own font accessible. See the following api.
It does not require any c++ addon. The result image is smaller than jpeg image.
This has to be a joke. /<text.+>;.+</text>/g.test...
svg captcha uses opentype.js underneath, which means that there is no '<text>1234</text>'. You get '<path fill="#444" d="M104.83 19.74L107.85 19.74L112 33.56L116.13 19.74L119.15 19.74L113.48 36.85...' instead.
Even though you can write a program that convert svg to png, svg captcha has done its job —— make captcha recognition harder
Please add issues if you have a question or found a problem. Pull requests are welcome too!