【Node + svg-captcha】生成图片验证码

【node + svg-captcha】生成图片验证码

步骤

1. 安装

￥ npm install express express-session svg-captcha --save

2. 创建

// 引入需要用到的包
const express = require('express')
const app = express()
const session = require('express-session')
const svgCaptcha = require('svg-captcha')

// 将session挂载到app实力中,后面验证的时候用得到
app.use(session({
	secret: 'Keyboard cat',
	resave: false,
	saveUninitialized: true,
	cookie: {
		secure: false,
		maxAge: 1000 * 5
	},
	rolling: true
}))

// 定义生成验证码函数
function createCode () {
	const colorMap = ['#eeeeee', '#edfedf', '#eeddff', 'skyblue', 'orange', '#c8c8c8'] // 配置背景图片颜色集合
	const randomColor = colorMap[Math.floor(Math.random() * colorMap.length)] //随机颜色
	const  options ={
		size: 4, // 验证码长度
		ignoreChars: '0oO1lI', // 排除字符
		noise: 2, // 干扰条数
		width: 160,
		height: 50,
		fontSize: 50,
		color: true,
		background: randomColor
	}
	const captcha = svgCaptcha.create(options)
	console.log(captcha)
	return captcha
}

// createCode()

3. 返回响应

// 上面已经拿到了验证码以及svg验证码图片,可以配置路由了
app.get('/api/captcha', (req, res) => {
	const captchaObj = createCode()
	req.session.captcha = captchaObj.text.toLowerCase() // 将验证码的值存入session
	res.setHeader('content-Type', 'svg') // 响应类型设置为svg
	res.send(captchaObj.data)
})

// 验证验证码是否正确
app.get('/api/verify', (req, res) => {
	const serverCode = req.session.captcha.toLowerCase()
	const clientCode = req.query.code.toLowerCase()
	if (serverCode === clientCode) {
		res.json({status: 200, isTrue: true})
	} else {
		res.json({status: 500, isTrue: false})
	}
})

app.listen(3000, ()=> {
	console.log('your app is running at http://localhost:3000')
})

完整代码如下

// 引入需要用到的包
const express = require('express')
const app = express()
const session = require('express-session')
const svgCaptcha = require('svg-captcha')

// 定义生成验证码函数
function createCode () {
	// 配置背景图片颜色集合
	const colorMap = ['#eeeeee','#edfedf','#eeddff','skyblue','orange','#c8c8c8'] 
	
	//随机颜色
	const randomColor = colorMap[Math.floor(Math.random() * colorMap.length)]
	
	const  options ={
		size: 4, // 验证码长度
		ignoreChars: '0oO1lI', // 排除字符
		noise: 2, // 干扰条数
		width: 160,
		height: 50,
		fontSize: 50,
		color: true,
		background: randomColor
	}
	const captcha = svgCaptcha.create(options)
	console.log(captcha)
	return captcha
}

app.use(session({
	secret:'Keyboard cat',
	resave: false,
	saveUninitialized: true,
	cookie: {
		secure: false,
		maxAge: 30000
	},
	rolling: true
}))

// createCode()
app.get('/api/captcha', (req, res) => {
	const captchaObj = createCode()
	req.session.captcha = captchaObj.text.toLowerCase()
	res.setHeader('Content-Type', 'text/html');
	res.send(captchaObj.data)
})

app.get('/api/verify', (req, res) => {
	const serverCode = req.session.captcha.toLowerCase()
	const clientCode = req.query.code.toLowerCase()

	if (serverCode === clientCode) {
		res.json({status: 200, isTrue: true})
	} else {
		res.json({status: 500, isTrue: false})
	}
})


app.listen(3000, ()=> {
	console.log('your app is running at http://localhost:3000')
})