使用node.js给前端发送一个图像验证码

相信写过node的小伙伴都对此有相关了解

首先导入需要的包(//后有解释)

const mysql = require("mysql"); //用于创建和管理 MySQL 连接池。

const express = require("express");//用于构建 Web 应用程序。

const app = express();

const interface = require("./interface");

const bodyParser = require("body-parser"); //用于解析 HTTP 请求体的内容。

const jwt = require("jsonwebtoken"); //用于生成和验证 JSON Web Tokens(JWT)。

const expressJwt = require("express-jwt"); //用于验证 JWT 并提取用户信息。

const cors = require("cors"); //,用于处理跨域资源共享

const { createCanvas, registerFont } = require("canvas"); //用于在服务器端生成图像。

连接数据库

user(数据库名称)

password(数据库密码)

host(地址值)

database(数据库名称)

app.use(cors());

// 连接数据库

const secretKey = "itheima NO1";

const dbConfig = {

user: process.env.DB_USER || "root",

password: process.env.DB_PASSWORD || "root",

host: process.env.DB_HOST || "localhost",

database: process.env.DB_DATABASE || "ry-vue",

};

const conn = mysql.createConnection(dbConfig);

// 解析请求体

app.use(express.json());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(bodyParser.json());

app.use(expressJwt({ secret: secretKey }).unless({ path: [/^\/api\//] }));

下面是我写了一个在图像上有一个10*10之内的加减乘除,并且设置的输出结果为整数且不为负

并且由于我在全局设置了token所以这个接口也需要前端携带token。并且我在写这段是先写的登录。

// 验证码

// 在内存中存储验证码(请用安全的存储解决方案替换此部分)

const verificationCodes = {};

// 生成一个包含加减乘除的简单数学表达式和计算结果

function generateMathExpression() {

const operators = ["+", "*", "/"]; // 移除减法运算符

const operator = operators[Math.floor(Math.random() * operators.length)];

const operand1 = Math.floor(Math.random() * 10);

const operand2 = Math.floor(Math.random() * 10);

let result;

switch (operator) {

case "+":

result = operand1 + operand2;

break;

case "*":

result = operand1 * operand2;

break;

case "/":

// 避免除以零,并确保结果不是负数

result = operand2 !== 0 ? Math.max(1, Math.floor(operand1 / operand2)) : operand1;

break;

default:

result = operand1; // 对于乘法,只返回第一个操作数

}

const expression = `{operand1} {operator} ${operand2} = ?`;

return { expression, result };

}

并且这边前端使用了uuid库,所以我引入并使用他来生成一个唯一标识符的函数,以下就是我的接口内容

// 带有图形验证码的验证码请求端点

// 生成一个唯一标识符的函数

function generateUniqueIdentifier() {

return uuidv4();

}

// 带有图形验证码的验证码请求端点

app.post("/api/verification", async (req, res) => {

try {

// 生成验证码和图形验证码随机字符串

const { expression, result } = generateMathExpression();

// 将验证码存储在内存中(请用安全的存储解决方案替换此部分)

const timestamp = new Date().getTime();

const identifier = generateUniqueIdentifier(); // 生成唯一标识符

verificationCodes[identifier] = { expression, result, timestamp };

// 创建图像的画布

const canvas = createCanvas(200, 50);

const ctx = canvas.getContext("2d");

// 设置背景颜色

ctx.fillStyle = "#ffffff";

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 设置文本的颜色

ctx.fillStyle = "#000000";

// 在画布上绘制数学表达式

ctx.fillText(expression, 10, 40);

// 将画布转换为数据 URL

const image = canvas.toDataURL();

// 返回图像 URL、验证码和计算结果给前端

res.status(200).json({

status: 200,

message: "成功发送图形验证码",

imageUrl: image,

code: result, // 将唯一标识符发送给前端

uuid: identifier, // 将唯一标识符发送给前端

});

} catch (error) {

handleServerError(res, error);

}

});

有什么错误欢迎指出

相关推荐
北海-cherish5 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909066 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist7 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师7 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang7 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_7 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含7 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端7 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友8 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端