html中使用svg-captcha插入图片验证码功能

最新推荐文章于 2026-06-19 14:28:59 发布

原创最新推荐文章于 2026-06-19 14:28:59 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#node.js #javascript

js 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了如何在Node.js的Express框架下，结合svg-captcha库生成SVG格式的图片验证码，并通过express-session中间件实现会话管理，确保用户登录时的验证码校验安全。首先安装所需依赖，然后设置服务器端生成验证码并存储在session中，最后在前端展示验证码图片并处理登录请求，进行验证码验证。

html中使用svg-captcha插入图片验证码功能

1、创建服务器安装插件

npm install --save express
npm install --save svg-captcha

2、服务器的代码

//app.js
const express =require('express');
const server=express();

// svg-captcha
const svgCap = require('svg-captcha');
server.get('/getcode',(req,res)=>{
    // 生成验证码
    let cap = svgCap.create();
    console.log("生成的验证码是"+cap.text)
    res.type('svg');
    res.send(cap.data)
})
// 登录验证码
server.get('/login',(req,res)=>{
    let ucode=req.query.code;
    console.log('用户输入的验证码'+ucode);
    res.send('验证成功！')
})

server.use(express.static('public'))

server.listen(3000,()=>{
    console.log("running")
})

3、简单的一个前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/login">
    <input name="code" type="text" placeholder="请输入验证码">
    <img src="/getcode" alt="">
    <br><br>
    <input type="submit" value="登录">
</form>
</body>
</html>

使用session域存放数据

1、在服务器端安装session

npm install express -session

2、配置并使用

const session=require('express-session');
server.use(session({
    secret:'mykey'   //这个名字可以自定义
}))

服务器端完整代码

//app.js
const express =require('express');
const server=express();

const session=require('express-session');
server.use(session({
    secret:'mykey'
}))
// svg-captcha
const svgCap = require('svg-captcha');
server.get('/getcode',(req,res)=>{
    // 生成验证码
    let cap = svgCap.create();
    console.log("生成的验证码是"+cap.text)
    req.session.answer=cap.text;
    res.type('svg');
    res.send(cap.data)
})
// 登录验证码
server.get('/login',(req,res)=>{
    let ucode=req.query.code;
    console.log('用户输入的验证码'+ucode);
    let answer = req.session.answer;
    console.log('正确答案是：'+answer);
    if(ucode==answer){
        res.send('验证成功！')
    }else{
        res.send('验证失败！')
    }
    
})

server.use(express.static('public'))

server.listen(3000,()=>{
    console.log("running")
})