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

最新推荐文章于 2024-07-08 12:45:36 发布

limit for me

最新推荐文章于 2024-07-08 12:45:36 发布

阅读量927

点赞数

分类专栏： js 文章标签： node.js javascript

本文链接：https://blog.csdn.net/limmt2020/article/details/120299535

版权

js 专栏收录该内容

44 篇文章 5 订阅

订阅专栏

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")
})

3、网页代码不变

加上session后，浏览器发送请求后，会在cookies中生成一个sid，获得这个sid即可对数据进行数据劫持

limit for me

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html中使用svg-captcha插入图片验证码功能

html中使用svg-captcha插入图片验证码功能1、创建服务器安装插件npm install --save expressnpm install --save svg-captcha2、服务器的代码//app.jsconst express =require('express');const server=express();// svg-captchaconst svgCap = require('svg-captcha');server.get('/getcode',(r
复制链接

扫一扫