Flask实现图形验证码生成与登录验证完整流程
本文详细介绍如何在Flask框架中实现图形验证码功能。从后端接口定义、使用Pillow库生成随机字符与干扰线，到前端Layui框架的图片展示与刷新逻辑，再到登录时Session中的验证码比对验证，提供完整的代码实现步骤与注意事项。
Flask简介
Flask简介
Flask是一款基于Python开发的轻量级Web应用框架，其核心优势在于简洁灵活，允许开发者自由集成所需功能。该框架由Armin Ronacher主导开发，他同时领导着名为Pocco的国际Python爱好者团队。Flask底层依赖于Werkzeug WSGI工具包和Jinja2模板引擎，这两者均属于Pocco项目的一部分。
验证码效果展示
验证码效果展示
在实际交互中，用户点击图片、刷新页面或输入错误并点击登录时，系统均会自动刷新验证码图片。
具体实现步骤
具体实现步骤如下
定义获取验证码的API接口
第一步：定义获取验证码的API接口
文件名为verificationCode.py
#验证码
@api.route('/imgCode')
def imgCode():
return imageCode().getImgCode()代码中使用的@api装饰器是在Flask应用下注册的蓝图，专门用于后台接口管理，因此此处需注册api蓝图。
实现接口核心逻辑
第二步：实现接口核心逻辑
首先，验证码的生成依赖于随机性，因此需要引入random库。本次实现要求随机生成字母和数字组合。
为此，还需引入string模块。其中string.ascii_letters用于生成所有英文字母，string.digits用于生成0-9的数字。具体代码实现如下
def geneText():
'''生成4位验证码'''
return ''.join(random.sample(string.ascii_letters + string.digits, 4)) #ascii_letters是生成所有字母 digits是生成所有数字0-9其次，为了提升视觉效果，需为每个随机字符设置不同的颜色。这里通过生成随机数来确定颜色值。
def rndColor():
'''随机颜色'''
return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))此时，结合上述随机数字和颜色，即可生成验证码图片。
在Python 3环境中，安装该图像处理库的命令不是pip install PIL，而是pip install pillow。
def getVerifyCode():
'''生成验证码图形'''
code = geneText()
# 图片大小120×50
width, height = 120, 50
# 新图片对象
im = Image.new('RGB', (width, height), 'white')
# 字体
font = ImageFont.truetype('app/static/arial.ttf', 40)
# draw对象
draw = ImageDraw.Draw(im)
# 绘制字符串
for item in range(4):
draw.text((5 + random.randint(-3, 3) + 23 * item, 5 + random.randint(-3, 3)),
text=code[item], fill=rndColor(), font=font)
return im, code
验证码图片生成后，下一步是将其发送至前端进行展示。
def getImgCode():
image, code = getVerifyCode()
# 图片以二进制形式写入
buf = BytesIO()
image.save(buf, 'jpeg')
buf_str = buf.getvalue()
# 把buf_str作为response返回前端，并设置首部字段
response = make_response(buf_str)
response.headers['Content-Type'] = 'image/gif'
# 将验证码字符串储存在session中
session['imageCode'] = code
return response
这里采用将图片转换为二进制数据的形式传输至前端，并在响应头部明确标识Content-Type为图片类型。
同时，将生成的验证码字符串存储到Session中，以便后续登录环节进行验证。
第五步：完善接口逻辑，可进一步为图片添加干扰元素，例如绘制若干横线。
def drawLines(draw, num, width, height):
'''划线'''
for num in range(num):
x1 = random.randint(0, width / 2)
y1 = random.randint(0, height / 2)
x2 = random.randint(0, width)
y2 = random.randint(height / 2, height)
draw.line(((x1, y1), (x2, y2)), fill='black', width=1)
此时，getVerifyCode函数需增加相应的干扰线绘制步骤。
def getVerifyCode():
'''生成验证码图形'''
code = geneText()
# 图片大小120×50
width, height = 120, 50
# 新图片对象
im = Image.new('RGB', (width, height), 'white')
# 字体
font = ImageFont.truetype('app/static/arial.ttf', 40)
# draw对象
draw = ImageDraw.Draw(im)
# 绘制字符串
for item in range(4):
draw.text((5 + random.randint(-3, 3) + 23 * item, 5 + random.randint(-3, 3)),
text=code[item], fill=rndColor(), font=font)
# 划线
drawLines(draw, 2, width, height)
return im, code
至此，接口逻辑基本完成。完整的接口代码如下
from .. import *
from io import BytesIO
import random
import string
from PIL import Image, ImageFont, ImageDraw, ImageFilter
#验证码
@api.route('/imgCode')
def imgCode():
return imageCode().getImgCode()
class imageCode():
'''
验证码处理
'''
def rndColor(self):
'''随机颜色'''
return (random.randint(32, 127), random.randint(32, 127), random.randint(32, 127))
def geneText(self):
'''生成4位验证码'''
return ''.join(random.sample(string.ascii_letters + string.digits, 4)) #ascii_letters是生成所有字母 digits是生成所有数字0-9
def drawLines(self, draw, num, width, height):
'''划线'''
for num in range(num):
x1 = random.randint(0, width / 2)
y1 = random.randint(0, height / 2)
x2 = random.randint(0, width)
y2 = random.randint(height / 2, height)
draw.line(((x1, y1), (x2, y2)), fill='black', width=1)
def getVerifyCode(self):
'''生成验证码图形'''
code = self.geneText()
# 图片大小120×50
width, height = 120, 50
# 新图片对象
im = Image.new('RGB', (width, height), 'white')
# 字体
font = ImageFont.truetype('app/static/arial.ttf', 40)
# draw对象
draw = ImageDraw.Draw(im)
# 绘制字符串
for item in range(4):
draw.text((5 + random.randint(-3, 3) + 23 * item, 5 + random.randint(-3, 3)),
text=code[item], fill=self.rndColor(), font=font)
# 划线
self.drawLines(draw, 2, width, height)
return im, code
def getImgCode(self):
image, code = self.getVerifyCode()
# 图片以二进制形式写入
buf = BytesIO()
image.save(buf, 'jpeg')
buf_str = buf.getvalue()
# 把buf_str作为response返回前端，并设置首部字段
response = make_response(buf_str)
response.headers['Content-Type'] = 'image/gif'
# 将验证码字符串储存在session中
session['imageCode'] = code
return response
前端页面展示
第三步：前端页面展示
前端示例使用了Layui框架，其他前端框架的实现逻辑类似。
<div class="layui-form-item">
<label class="layui-icon layui-icon-vercode" for="captcha"></label>
<input type="text" name="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off"
class="layui-input verification captcha" value="">
<div class="captcha-img">
<img id="verify_code" class="verify_code" src="/api/imgCode" onclick="this.src='/api/imgCode?'+ Math.random()">
</div>
</div>JavaScript部分主要处理验证失败后的图片刷新逻辑。
// 进行登录操作
form.on('submit(login)', function (data) {
console.log(data.elem);
var form_data = data.field;
//加密成md5
form_data.password=$.md5(form_data.password);
$.ajax({
url: "{{ url_for('api.api_login') }}",
data: form_data,
dataType: 'json',
type: 'post',
success: function (data) {
if (data['code'] == 0) {
location.href = "{{ url_for('home.homes') }}";
} else {
//登录失败则刷新图片验证码
var tagImg = document.getElementById('verify_code');
tagImg.src='/api/imgCode?'+ Math.random();
console.log(data['msg']);
layer.msg(data['msg']);
}
}
});
return false;
});
验证码验证环节
第四步：验证码验证环节
验证码验证发生在用户点击登录按钮之后，系统需对提交的验证码进行效验。
首先，获取前端传递过来的验证码值。调用.lower()方法是为了忽略大小写差异。
关于如何具体获取前端参数的写法，建议参考Flask框架的相关文档自行了解。
if request.method == 'POST':
username = request.form.get('username')
password = request.form.get('password')
captcha = request.form.get('captcha').lower()
其次，执行验证码比对。由于生成验证码时已将其保存至Session，此处直接取出Session中存储的原始验证码，并与前端传来的值进行对比。
if captcha==session['imageCode'].lower():
pass
else：
return jsonify({'code':-1,'msg':'图片验证码错误'})至此，已完成获取验证码、前端展示及后端验证的全部流程。验证环节的整体代码未在此详列，开发者可根据实际需求自行编写。
总结
总结
以上内容介绍了基于Flask实现验证码生成及验证的完整功能，希望能为读者提供帮助。如有疑问欢迎留言，小编会及时回复。感谢对本站的支持！若觉得本文有用，欢迎转载，请注明出处，谢谢！
免责声明：本文内容仅供参考，不代表本站观点。转载或引用请注明出处。
