基于Nodejs作为服务端，React作为前端框架，axios作为通讯框架，实现滑块验证

基于Nodejs作为服务端，React作为前端框架，axios作为通讯框架，实现滑块验证

1. 为什么要自己写滑块验证

• 之前我面试一位前端的童鞋，应聘的是高级前端开发工程师，我问他在项目中有没有实现过滑块验证，他说有，我说你怎么做的，他说有很多的现成的框架可以用，我说不用框架，现在想让你自己设计一个滑块验证，你会怎么设计，他支支吾吾好半天，大概表达这么几点：
• 1. 前端实现一个容器图片和和滑块图片
• 2. 拖动滑块图片，判断边界，到达制定边界则表示验证成功
• 这听起来貌似没啥问题吧，听我接下来怎么问，我说你这验证都放前端了，那不相当于没验证，我直接模拟结果不就可以了
• 他想了想，又说，可以在服务端设定一个坐标点（x,y）然后把前端的坐标点传过去进行比较，判断是否完成验证
• 也貌似合理，我又问他，那你怎么保证重复验证和过期验证，或者说DOS的攻击
• 这次他想了很久，最后告诉我说，平时框架用的多，这个真的没弄过，很诚实，但是能看出来，缺乏思考。
• 这也是为什么我们要自己写滑块验证的根本原因，保证系统的安全性，防止DOS等安全问题
• 那具体怎么实现一个滑块验证呢，我们来大概阐述一下思路

2. 滑块验证的整体思路

• 1. 前端领取接口，告知服务端准备验证
• 2. 服务端创建会话，并管理会话周期
• 3. 进行DOS攻击验证（访问频率限制）
• 4. 定义主图尺寸，滑块尺寸
• 5. 生成主图和滑块图
• 6. 生成滑块随机位置，并保存在会话里
• 7. 返回会话ID和图像
• 8. 前端生成生成图像和滑块
• 9. 监听开始滑动，滑动，滑动结束等事件
• 10. 滑动事件结束后，请求服务端接口，返回会话ID和位置信息
• 11. 服务端验证会话信息和DOS攻击处理
• 12. 服务端验证是否完整滑块验证/成功->返回suc->删除会话/失败->返回fail
• 13. 前端验证成功/失败的逻辑业务

3. 具体实现

3.1 服务端

• 涉及到的npm包请自行install

// 导入所需的依赖库
// express：用于创建Web服务器和处理HTTP请求
const express = require('express');
// cors：用于处理跨域资源共享
const cors = require('cors');
// canvas：用于生成验证图像
const canvas = require('canvas');
// uuid：用于生成唯一的会话ID
const { v4: uuidv4 } = require('uuid');
// express-rate-limit：用于限制请求频率，防止恶意攻击
const rateLimit = require('express-rate-limit');// 创建express应用实例
const app = express();// 启用CORS中间件，允许跨域请求
app.use(cors());// 启用JSON解析中间件，用于解析请求体中的JSON数据
app.use(express.json());// 配置请求频率限制
// 针对生成验证图像的接口，限制更严格
const generateVerificationLimiter = rateLimit({windowMs: 60 * 1000, // 时间窗口：1分钟max: 10, // 每个IP在时间窗口内最多允许10次请求message: { success: false, message: '请求过于频繁，请1分钟后再试' },standardHeaders: true, // 向客户端返回速率限制信息legacyHeaders: false, // 禁用旧版速率限制头keyGenerator: (req) => {// 使用客户端IP作为限制的键return req.ip;}
});// 针对验证结果的接口，限制相对宽松一些
const verifyLimiter = rateLimit({windowMs: 60 * 1000, // 时间窗口：1分钟max: 20, // 每个IP在时间窗口内最多允许20次请求message: { success: false, message: '验证请求过于频繁，请1分钟后再试' },standardHeaders: true,legacyHeaders: false,keyGenerator: (req) => {return req.ip;}
});// 创建一个Map对象存储验证会话信息
// key: 会话ID，value: 包含缺口位置和时间戳的对象
const verificationSessions = new Map();// 创建一个Map对象存储IP地址的验证成功记录，用于进一步限制
const ipVerificationSuccess = new Map();// 定期清理过期的IP验证记录（每小时执行一次）
setInterval(() => {const now = Date.now();const oneHour = 60 * 60 * 1000; // 1小时的毫秒数ipVerificationSuccess.forEach((record, ip) => {// 清理超过1小时的记录if (now - record.timestamp > oneHour) {ipVerificationSuccess.delete(ip);}});
}, 60 * 60 * 1000);// 定义GET接口，用于生成滑块验证图像
// 应用请求频率限制中间件
app.get('/api/generate-verification', generateVerificationLimiter, async (req, res) => {try {// 获取客户端IPconst clientIp = req.ip;// 检查该IP最近的验证成功次数，若过多则进一步限制const successRecord = ipVerificationSuccess.get(clientIp) || { count: 0, timestamp: Date.now() };if (successRecord.count > 50) { // 1小时内超过50次验证成功，可能是自动化程序return res.status(429).json({success: false,message: '您的操作过于频繁，请稍后再试'});}// 定义验证图像的尺寸参数// 主图像宽度const width = 300;// 主图像高度const height = 150;// 滑块（拼图）的尺寸const puzzleSize = 40;// 随机生成缺口位置（确保在图像范围内）// 水平位置：确保滑块不会超出图像左侧和右侧边界const puzzleX = Math.floor(Math.random() * (width - puzzleSize * 2)) + puzzleSize;// 垂直位置：确保滑块不会超出图像顶部和底部边界const puzzleY = Math.floor(Math.random() * (height - puzzleSize));// 创建主画布（带缺口的背景图）const mainCanvas = canvas.createCanvas(width, height);// 获取2D绘图上下文，用于绘制图像const mainCtx = mainCanvas.getContext('2d');// 绘制背景色（浅灰色）mainCtx.fillStyle = '#f0f0f0';// 填充整个画布mainCtx.fillRect(0, 0, width, height);// 绘制一些随机形状作为背景干扰元素，增加验证难度// 循环绘制10个随机圆形for (let i = 0; i < 10; i++) {// 随机生成一个柔和的颜色（RGB值在100-200之间，透明度0.5）mainCtx.fillStyle = `rgba(${Math.random() * 100 + 100}, ${Math.random() * 100 + 100}, ${Math.random() * 100 + 100}, 0.5)`;// 随机生成圆的大小（5-25像素）const size = Math.random() * 20 + 5;// 开始绘制路径mainCtx.beginPath();// 绘制圆形mainCtx.arc(// 随机X坐标Math.random() * width,// 随机Y坐标Math.random() * height,// 半径size,// 起始角度（0弧度）0,// 结束角度（2π弧度，即360度）Math.PI * 2);// 填充圆形mainCtx.fill();}// 创建滑块（拼图）画布，用于绘制需要用户拖动的部分const puzzleCanvas = canvas.createCanvas(puzzleSize, puzzleSize);// 获取滑块画布的2D绘图上下文const puzzleCtx = puzzleCanvas.getContext('2d');// 从主画布复制缺口区域到滑块画布// 这样滑块就包含了缺口处的图像内容puzzleCtx.drawImage(mainCanvas,          // 源图像（主画布）puzzleX, puzzleY,    // 源图像中要复制的区域的左上角坐标puzzleSize, puzzleSize,  // 源图像中要复制的区域的宽度和高度0, 0,                // 目标画布（滑块画布）中放置图像的左上角坐标puzzleSize, puzzleSize   // 目标画布中图像的宽度和高度);// 在主画布上绘制缺口（挖空效果）// 使用背景色填充缺口区域，造成"缺失"的效果mainCtx.fillStyle = '#f0f0f0';mainCtx.fillRect(puzzleX, puzzleY, puzzleSize, puzzleSize);// 为缺口添加边框，使其更明显mainCtx.strokeStyle = '#ccc';  // 边框颜色（浅灰色）mainCtx.lineWidth = 2;         // 边框宽度mainCtx.strokeRect(puzzleX, puzzleY, puzzleSize, puzzleSize);  // 绘制矩形边框// 生成唯一的会话ID，用于标识本次验证const sessionId = uuidv4();// 存储会话信息（缺口位置和生成时间）verificationSessions.set(sessionId, {puzzleX,          // 缺口的X坐标puzzleY,          // 缺口的Y坐标timestamp: Date.now(),  // 会话生成时间戳clientIp          // 记录请求的IP地址，用于额外安全检查});// 设置定时清理过期会话（5分钟后）// 防止内存泄漏和重复使用旧会话setTimeout(() => {verificationSessions.delete(sessionId);}, 5 * 60 * 1000);  // 5分钟 = 5 * 60 * 1000毫秒// 将生成的图像和会话信息返回给客户端res.json({sessionId,        // 会话IDmainImage: mainCanvas.toDataURL('image/png'),  // 主图像（带缺口）的DataURLpuzzleImage: puzzleCanvas.toDataURL('image/png'),  // 滑块图像的DataURLpuzzleSize        // 滑块尺寸});} catch (error) {// 捕获并处理异常console.error('生成验证图像失败:', error);// 向客户端返回错误信息res.status(500).json({ error: '生成验证图像失败' });}
});// 定义POST接口，用于验证用户滑动的结果
// 应用请求频率限制中间件
app.post('/api/verify', verifyLimiter, (req, res) => {// 从请求体中获取会话ID和用户滑动的最终X坐标const { sessionId, positionX } = req.body;// 获取客户端IPconst clientIp = req.ip;// 检查会话是否存在const session = verificationSessions.get(sessionId);if (!session) {// 如果会话不存在或已过期，返回验证失败return res.json({ success: false, message: '验证会话已过期，请重试' });}// 检查会话的IP是否与当前请求IP一致，防止会话劫持if (session.clientIp !== clientIp) {verificationSessions.delete(sessionId); // 删除可疑会话return res.json({ success: false, message: '验证异常，请重试' });}// 验证完成后移除会话（防止重复使用同一个会话进行验证）verificationSessions.delete(sessionId);// 检查用户滑动的位置是否在可接受范围内// 允许±5像素的误差，提高用户体验const tolerance = 5;const isSuccess = Math.abs(positionX - session.puzzleX) <= tolerance;// 如果验证成功，更新该IP的成功记录if (isSuccess) {const now = Date.now();const successRecord = ipVerificationSuccess.get(clientIp) || { count: 0, timestamp: now };// 更新记录：计数+1，更新时间戳ipVerificationSuccess.set(clientIp, {count: successRecord.count + 1,timestamp: now});}// 向客户端返回验证结果res.json({success: isSuccess,message: isSuccess ? '验证成功' : '验证失败，请重试'});
});// 定义服务器监听的端口号
const PORT = process.env.PORT || 5000;// 启动服务器
app.listen(PORT, () => {console.log(`服务器运行在端口 ${PORT}`);console.log(`已启用请求频率限制保护`);
});

3.2 前端

• 使用React hooks实现
• 滑块组件SliderVerification.jsx

// 导入React库和所需的钩子函数
import React, { useState, useEffect, useRef } from 'react';
// 导入axios用于发送HTTP请求
import axios from 'axios';// 定义滑块验证组件
// onVerifySuccess: 验证成功时的回调函数
const SliderVerification = ({ onVerifySuccess }) => {// 状态管理 - 图像相关// 主图像（带缺口）的DataURLconst [mainImage, setMainImage] = useState('');// 滑块（拼图）图像的DataURLconst [puzzleImage, setPuzzleImage] = useState('');// 滑块的尺寸const [puzzleSize, setPuzzleSize] = useState(40);// 本次验证的会话IDconst [sessionId, setSessionId] = useState('');// 状态管理 - 交互相关// 是否正在拖动滑块const [isDragging, setIsDragging] = useState(false);// 滑块当前的X坐标位置const [positionX, setPositionX] = useState(0);// 显示给用户的提示信息const [message, setMessage] = useState('请拖动滑块完成验证');// 是否正在验证过程中（等待后端响应）const [isVerifying, setIsVerifying] = useState(false);// 验证结果：null（未验证）、true（成功）、false（失败）const [isSuccess, setIsSuccess] = useState(null);// 创建引用，用于访问DOM元素// 滑块元素的引用const sliderRef = useRef(null);// 拼图元素的引用const puzzleRef = useRef(null);// 整个验证容器的引用const containerRef = useRef(null);// 组件挂载时初始化验证useEffect(() => {// 从后端获取验证图像fetchVerificationImage();}, []);  // 空依赖数组表示只在组件挂载时执行一次// 从后端获取验证图像的函数const fetchVerificationImage = async () => {try {// 更新提示信息setMessage('加载验证图像中...');// 向后端发送请求，获取验证图像const response = await axios.get('http://localhost:5000/api/generate-verification');// 从响应中提取数据const { sessionId, mainImage, puzzleImage, puzzleSize } = response.data;// 更新状态setSessionId(sessionId);         // 保存会话IDsetMainImage(mainImage);         // 保存主图像setPuzzleImage(puzzleImage);     // 保存滑块图像setPuzzleSize(puzzleSize);       // 保存滑块尺寸setPositionX(0);                 // 重置滑块位置到初始位置setMessage('请拖动滑块完成验证'); // 重置提示信息setIsSuccess(null);              // 重置验证结果} catch (error) {// 处理请求失败的情况console.error('获取验证图像失败:', error);setMessage('加载验证失败，请刷新重试');}};// 处理鼠标/触摸开始事件（用户开始拖动滑块）const handleStart = (e) => {// 如果正在验证中或已经验证过，则不执行任何操作if (isVerifying || isSuccess !== null) return;// 设置正在拖动状态为truesetIsDragging(true);// 防止拖动时选中文本或其他默认行为e.preventDefault();};// 处理鼠标/触摸移动事件（用户拖动滑块过程中）const handleMove = (e) => {// 如果不在拖动状态，则不执行任何操作if (!isDragging) return;// 获取容器元素的位置信息（相对于视口）const containerRect = containerRef.current.getBoundingClientRect();// 存储鼠标或触摸点的X坐标let clientX;// 区分鼠标事件和触摸事件，获取对应的X坐标if (e.type.includes('mouse')) {// 鼠标事件clientX = e.clientX;} else {// 触摸事件（取第一个触摸点）clientX = e.touches[0].clientX;}// 计算滑块相对于容器的位置// 减去容器左边界和滑块一半宽度，使滑块中心与鼠标/触摸点对齐let newPositionX = clientX - containerRect.left - puzzleSize / 2;// 限制滑块在容器范围内移动// 最大X坐标 = 容器宽度 - 滑块宽度const maxX = containerRect.width - puzzleSize;// 确保滑块不会超出左边界（最小0）和右边界（最大maxX）newPositionX = Math.max(0, Math.min(newPositionX, maxX));// 更新滑块位置状态setPositionX(newPositionX);};// 处理鼠标/触摸结束事件（用户释放滑块）const handleEnd = async () => {// 如果不在拖动状态，则不执行任何操作if (!isDragging) return;// 结束拖动状态setIsDragging(false);// 设置正在验证状态setIsVerifying(true);// 更新提示信息setMessage('验证中...');try {// 向后端发送验证请求，包含会话ID和滑块最终位置const response = await axios.post('http://localhost:5000/api/verify', {sessionId,    // 会话ID，用于标识本次验证positionX     // 滑块最终的X坐标位置});// 从响应中提取验证结果const { success, message } = response.data;// 更新状态setIsSuccess(success);       // 保存验证结果setMessage(message);         // 更新提示信息setIsVerifying(false);       // 结束验证状态// 如果验证成功且提供了成功回调函数，则调用回调if (success && onVerifySuccess) {onVerifySuccess();}} catch (error) {// 处理验证请求失败的情况console.error('验证失败:', error);setMessage('验证失败，请重试');setIsVerifying(false);}};// 重新加载验证图像（用户点击刷新按钮时调用）const handleRefresh = () => {fetchVerificationImage();};// 渲染组件UIreturn (<div className="verification-container" ref={containerRef} style={{width: '300px',border: '1px solid #ddd',borderRadius: '8px',padding: '15px',boxShadow: '0 2px 10px rgba(0,0,0,0.1)',background: '#fff'}}>{/* 验证图像区域 */}<div className="image-container" style={{width: '100%',height: '150px',position: 'relative',  // 相对定位，使内部元素可以绝对定位overflow: 'hidden',    // 隐藏超出容器的部分borderRadius: '4px',marginBottom: '15px'}}>{/* 主图像（带缺口） */}{mainImage && (<img src={mainImage} alt="验证背景图，包含一个需要填充的缺口" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>)}{/* 滑块拼图 */}{puzzleImage && (<div ref={puzzleRef}style={{position: 'absolute',  // 绝对定位，可通过left属性控制位置left: `${positionX}px`, // 动态设置left值，控制滑块水平位置top: '0',width: `${puzzleSize}px`,height: `${puzzleSize}px`,boxShadow: '0 0 10px rgba(0,0,0,0.3)', // 添加阴影，增强立体感pointerEvents: 'none'  // 使鼠标事件穿透此元素，不干扰拖动}}><img src={puzzleImage} alt="需要拖动到缺口位置的滑块拼图" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/></div>)}</div>{/* 滑块区域 */}<div className="slider-container" style={{width: '100%',height: '40px',background: '#f0f0f0',borderRadius: '20px',position: 'relative',  // 相对定位，使内部元素可以绝对定位overflow: 'hidden'     // 隐藏超出容器的部分}}>{/* 滑块轨道进度条 */}<div style={{// 根据滑块位置设置进度条宽度width: isDragging || isSuccess ? `${(positionX / (300 - puzzleSize)) * 100}%` : '0%',height: '100%',// 验证成功时显示绿色，否则显示蓝色background: isSuccess ? '#52c41a' : '#1890ff',// 验证成功时添加过渡动画transition: isSuccess ? 'width 0.3s' : 'none'}}/>{/* 滑块按钮 */}<divref={sliderRef}style={{position: 'absolute',  // 绝对定位，可通过left属性控制位置left: `${positionX}px`, // 动态设置left值，控制滑块水平位置top: '0',width: '40px',height: '40px',background: '#fff',border: '1px solid #ddd',borderRadius: '50%',   // 圆形滑块display: 'flex',alignItems: 'center',justifyContent: 'center',cursor: 'pointer',boxShadow: '0 2px 5px rgba(0,0,0,0.2)' // 添加阴影，增强立体感}}// 鼠标事件处理onMouseDown={handleStart}  // 鼠标按下时开始拖动onMouseMove={handleMove}   // 鼠标移动时更新位置onMouseUp={handleEnd}      // 鼠标释放时结束拖动并验证onMouseLeave={handleEnd}   // 鼠标离开滑块区域时结束拖动// 触摸事件处理（适配移动设备）onTouchStart={handleStart} // 触摸开始时开始拖动onTouchMove={handleMove}   // 触摸移动时更新位置onTouchEnd={handleEnd}     // 触摸结束时结束拖动并验证>{/* 滑块图标 */}<svg width="20" height="20" viewBox="0 0 24 24" fill="none" // 验证成功时显示绿色，否则显示蓝色stroke={isSuccess ? '#52c41a' : '#1890ff'} strokeWidth="2"style={{ pointerEvents: 'none' }} // 使鼠标事件穿透图标>{/* 根据验证结果显示不同图标 */}{isSuccess ? (// 验证成功时显示对勾图标<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />) : (// 未验证或验证失败时显示箭头图标<path d="M5 12h14M12 5l7 7-7 7" />)}</svg></div>{/* 滑块区域文字提示 */}<div style={{position: 'absolute',width: '100%',height: '100%',display: 'flex',alignItems: 'center',justifyContent: 'center',pointerEvents: 'none',  // 使鼠标事件穿透文字fontSize: '14px',// 验证成功时显示绿色，否则显示灰色color: isSuccess ? '#52c41a' : '#666'}}>{message}</div></div>{/* 刷新按钮，用于重新加载验证图像 */}<button onClick={handleRefresh}style={{marginTop: '10px',background: 'none',border: 'none',color: '#1890ff',cursor: 'pointer',fontSize: '12px',display: 'flex',alignItems: 'center',padding: '5px 0',}}>{/* 刷新图标 */}<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1890ff" strokeWidth="2" style={{ marginRight: '5px' }}><path d="M23 4v6h-6M1 20v-6h6" /><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" /></svg>刷新验证</button></div>);
};// 导出组件，供其他组件使用
export default SliderVerification;

• 主组件App.jsx

// 导入React库和useState钩子
import React, { useState } from 'react';
// 导入滑块验证组件
import SliderVerification from './SliderVerification';// 定义应用的主组件
const App = () => {// 状态管理：记录用户是否已通过验证// 初始值为false，表示未验证const [isVerified, setIsVerified] = useState(false);// 处理验证成功的函数const handleVerificationSuccess = () => {// 设置验证状态为已验证setIsVerified(true);// 这里可以添加验证成功后的逻辑，如跳转到下一页、提交表单等// 例如：可以调用API获取用户数据，或者显示受保护的内容};// 渲染应用UIreturn (<div style={{// 使用flex布局使内容居中显示display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'center',minHeight: '100vh',  // 最小高度为视口高度，确保内容垂直居中background: '#f5f5f5', // 浅灰色背景padding: '20px'       // 内边距，防止内容贴边}}>{/* 页面标题 */}<h2 style={{ color: '#333', marginBottom: '30px' }}>滑块验证示例</h2>{/* 根据验证状态显示不同内容 */}{!isVerified ? (// 未验证时显示验证提示和滑块验证组件<div><p style={{ color: '#666', textAlign: 'center', marginBottom: '20px' }}>请完成下方滑块验证以证明您不是机器人</p>{/* 滑块验证组件 */}{/* 传入验证成功的回调函数 */}<SliderVerification onVerifySuccess={handleVerificationSuccess} /></div>) : (// 已验证时显示成功信息<div style={{textAlign: 'center',padding: '30px',background: 'white',borderRadius: '8px',boxShadow: '0 2px 10px rgba(0,0,0,0.1)' // 添加阴影，增强立体感}}>{/* 成功图标 */}<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#52c41a" strokeWidth="2" style={{ margin: '0 auto 20px' }}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" /><polyline points="22 4 12 14.01 9 11.01" /></svg>{/* 成功标题 */}<h3 style={{ color: '#333', marginBottom: '10px' }}>验证成功！</h3>{/* 成功信息 */}<p style={{ color: '#666' }}>您已成功完成验证，可以继续使用服务。</p></div>)}</div>);
};// 导出主组件
export default App;

4. 总结

• 作为一个高级前端开发工程师或者再往上技术专家/架构师，一定要有自己设计实现的思考能力，才能在具体的业务中做到安全防控