Python Flask 前后端分离开发中，如何高效处理图片验证码的业务逻辑？
1.前端生成 uuid 作为图片验证码的唯一标识;
2.前端携带 uuid 作为 url 参数发给后端;
3.后端收到请求,取到路径参数 uuid,然后使用 PIL 模块生成 text 对应的 image,再使用 uuid 作为 key,image 作为 value 缓存,然后设置响应头给前端返回 image;
4.前端渲染 image,输入验证码,把验证码和对应的 uuid 都发给后端;
5.后端取到 uuid 和验证码,根据 key 去查看缓存.检验结束
如上是本人的处理方式,但是总感觉这样效率太低,求大家的处理思路
Python Flask 前后端分离开发中，如何高效处理图片验证码的业务逻辑？
14 回复
在Flask前后端分离项目中处理图片验证码，关键在于分离生成、验证和会话管理。下面是一个完整的实现方案：
1. 后端实现（Flask + Pillow + random）
from flask import Flask, session, jsonify, send_file
from io import BytesIO
import random
import string
from PIL import Image, ImageDraw, ImageFont
import base64
app = Flask(__name__)
app.secret_key = 'your-secret-key-here'
def generate_captcha():
# 生成4位随机验证码（字母+数字）
captcha_text = ''.join(random.choices(string.ascii_uppercase + string.digits, k=4))
# 创建图片
image = Image.new('RGB', (120, 40), color=(255, 255, 255))
draw = ImageDraw.Draw(image)
# 添加干扰线和噪点
for _ in range(5):
x1 = random.randint(0, 120)
y1 = random.randint(0, 40)
x2 = random.randint(0, 120)
y2 = random.randint(0, 40)
draw.line([(x1, y1), (x2, y2)], fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)), width=2)
for _ in range(100):
x = random.randint(0, 120)
y = random.randint(0, 40)
draw.point((x, y), fill=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)))
# 绘制验证码文本
try:
font = ImageFont.truetype('arial.ttf', 24)
except:
font = ImageFont.load_default()
for i, char in enumerate(captcha_text):
draw.text((10 + i*25, 5), char, font=font, fill=(0, 0, 0))
# 保存到字节流
buffer = BytesIO()
image.save(buffer, format='PNG')
buffer.seek(0)
# 存储验证码到session
session['captcha'] = captcha_text
session['captcha_used'] = False
return buffer
@app.route('/api/captcha')
def get_captcha():
buffer = generate_captcha()
# 返回base64编码的图片
img_base64 = base64.b64encode(buffer.getvalue()).decode()
return jsonify({
'captcha_image': f'data:image/png;base64,{img_base64}',
'captcha_id': session.sid # 可选：返回session ID用于关联
})
@app.route('/api/verify-captcha', methods=['POST'])
def verify_captcha():
data = request.json
user_input = data.get('captcha', '').upper()
if 'captcha' not in session:
return jsonify({'success': False, 'message': '验证码已过期'})
if session.get('captcha_used'):
return jsonify({'success': False, 'message': '验证码已使用'})
if user_input == session['captcha']:
session['captcha_used'] = True
return jsonify({'success': True, 'message': '验证码正确'})
return jsonify({'success': False, 'message': '验证码错误'})
2. 前端调用示例（使用fetch API）
// 获取验证码
async function getCaptcha() {
const response = await fetch('/api/captcha');
const data = await response.json();
// 显示验证码图片
document.getElementById('captcha-img').src = data.captcha_image;
// 存储session信息（可选）
localStorage.setItem('captcha_id', data.captcha_id);
}
// 验证验证码
async function verifyCaptcha() {
const userInput = document.getElementById('captcha-input').value;
const response = await fetch('/api/verify-captcha', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({captcha: userInput})
});
const result = await response.json();
alert(result.message);
}
3. 关键业务逻辑要点：
- 会话管理：验证码存储在服务器session中，前端只获取图片
- 一次性使用：验证成功后标记为已使用，防止重放攻击
- 大小写处理：统一转为大写进行比较，提升用户体验
- Base64传输：避免额外的图片请求，简化前端处理
总结建议： 核心是把验证码生成和验证都放在后端，前端只负责显示和提交。
可能是我没有理解你的文本。我理解的是，你的图片是根据 uuid 的内容生成的，就是说你的 uuid 是一种对于验证码内容的编码方式？不过重新看了一遍你的文本，又好像不是这么回事。。。
如果是我一开始理解的方式，确实有重放攻击的风险。如果你只是生成了一个随机的 uuid 和某个验证码（存储在数据库中）相关联，那么应该就没有问题。
----
另外我感觉你这个验证码图片并不需要缓存。因为大部分针对验证码的请求都是一次性的。缓存了反而出现了这么一个问题：如果用户刷新了验证码，难道你还要再给他一个新的 uuid 嘛？如果不是，那么岂不是生成了同样的验证码？
首先,PIL 可以生成文本对应的图片,比如 1111 对应的验证码图片内容;这个 uuid 只是作为这个生成的验证码内容的唯一标识,然后设置缓存,如果用户输入验证码错误,那么这个缓存也就失效了,验证码也会重新生成(你可以说下你的处理吗)
