Python + Flask 实现简单的字符验证码系统
本文详细介绍如何使用 Python 的 Flask 框架结合 Pillow 库，构建一个基础的字符图形验证码系统。内容涵盖验证码图片的批量生成、随机选取与返回、前端通过 Ajax 实现无刷新更换验证码，以及利用 JavaScript 进行前后端内容比对验证的完整流程。
引言与背景
一、写在前面
当前各类网站普遍采用验证码机制，无论是登录、下载还是其他操作，都需要进行身份验证。验证码的形式也从简单的字符图形演变为图文识别、滑动解锁甚至手机短信验证。面对这些复杂的验证方式，我们不禁好奇其背后的技术原理。虽然破解高级验证码难度较大，但我们可以从基础的字符图形验证码入手。本文将使用 Python 配合 Flask 框架，演示如何搭建一个简易的验证码系统，让我们直接开始实践。
系统基本思路
二、基本思路
一个基础的验证码系统主要需要实现两个核心功能：一是能够持续生成并刷新验证码图片，二是对用户输入的字符进行校验。如果输入正确，则允许后续操作；如果错误，则提示用户重新输入。
解决验证码图片来源的问题并不复杂。得益于 Python 丰富的第三方库支持，我们可以轻松生成大量验证码图片。在本方案中，主要依赖 Pillow 库来完成图像生成任务。
生成图片后，下一步是将其展示在前端页面，并支持动态更新。Flask 可以便捷地处理后端逻辑，而验证码的输入与校验则通过 JavaScript 在前端完成。
具体实现步骤
三、具体步骤
生成验证码图片
1. 生成验证码图片
前文提到，此步骤主要依赖 Pillow 模块。若尚未安装，可通过执行 pip install pillow 命令进行安装。
PIL（Python Image Library）是 Python 处理图像的标准库，但它仅支持到 Python 2.7 版本。随后出现的兼容版本名为 Pillow，它继承了 PIL 的功能并支持更高版本的 Python。
首先创建一个名为 CaptchaTest 的 Flask 项目，并在其中建立 generate.py 文件。生成验证码图片的第一步是使用 Pillow 模块中的 Image.new() 方法创建画布。接着，生成随机验证码文本并将其绘制到图片上。为了提高识别难度，还可以添加一些干扰元素。以下是生成的部分验证码图片示例：
最终生成的验证码图片代码如下：
from random import randint
from PIL import Image, ImageDraw, ImageFont
def get_random_color():
# 随机颜色RGB
return randint(120, 200), randint(120, 200), randint(120, 200)
def get_random_code():
# 随机字符
codes = [[chr(i) for i in range(48, 58)], [chr(i) for i in range(65, 91)], [chr(i) for i in range(97, 123)]]
codes = codes[randint(0, 2)]
return codes[randint(0, len(codes)-1)]
def generate_captcha(width=140, height=60, length=4):
# 生成验证码
img = Image.new("RGB", (width, height), (250, 250, 250))
draw = ImageDraw.Draw(img)
font = ImageFont.truetype("static/font/font.ttf", size=36)
# 验证码文本
text = ""
for i in range(length):
c = get_random_code()
text += c
rand_len = randint(-5, 5)
draw.text((width * 0.2 * (i+1) + rand_len, height * 0.2 + rand_len), c, font=font, fill=get_random_color())
# 加入干扰线
for i in range(3):
x1 = randint(0, width)
y1 = randint(0, height)
x2 = randint(0, width)
y2 = randint(0, height)
draw.line((x1, y1, x2, y2), fill=get_random_color())
# 加入干扰点
for i in range(16):
draw.point((randint(0, width), randint(0, height)), fill=get_random_color())
# 保存图片
img.save("static/captcha/" + text + ".jpg")
return text + ".jpg"
if __name__ == "__main__":
for i in range(1000):
generate_captcha()显示验证码图片
2. 显示验证码图片
完成上一步后，我们已在 static/captcha 文件夹中保存了 1000 张验证码图片。接下来的问题是如何在网页上显示这些图片。解决思路是定义一个路由，用于随机选取一张验证码图片并返回其路径。
在 Flask 中，route() 装饰器用于将函数绑定到 URL。虽然它可以配置动态 URL，但此处使用静态 URL 即可满足需求。定义该路由的代码如下：
@app.route('/get_captcha', methods=['GET'])
def get_captcha():
img_list = os.listdir("static/captcha")
img = img_list[random.randint(0, 1000)]
return os.path.join("static/captcha", img)
其中，os.listdir() 用于列出文件夹内的所有文件，os.path.join() 用于拼接并返回完整的图片路径。
刷新验证码图片
3. 刷新验证码图片
验证码的刷新功能可以通过 Ajax 技术实现。具体流程是：前端向后端发送请求，后端返回验证码图片路径，前端获取路径后更新图片的 src 属性，从而完成图片的无刷新更换。在 Ajax 请求中，URL 可以直接写静态地址，也可以使用 url_for 进行反向解析获取对应 URL，使用方法如下：
<script>
function Change() {
$.ajax({
url: '{{ url_for('get_captcha') }}',
async: true,
type: "GET",
success: function (data) {
document.getElementById("captcha").src = data;
}
})
}
</script>验证码内容验证
4. 验证码内容验证
用户输入验证码后，系统需要对输入内容进行校验。由于生成图片时已使用图片内容作为文件名，因此可以通过 JavaScript 获取图片名称，并与输入框中的内容进行比对。此外，还可以实现忽略大小写的比较逻辑。具体代码实现此处不再赘述。
运行效果与总结
四、运行截图
以下是运行页面的截图。点击“看不清楚，换一张”按钮即可刷新验证码，点击“确认”按钮则验证输入内容是否正确：
当输入内容与验证码一致时，系统会显示验证成功的提示信息：
至此，一个简单的验证码系统已经搭建完成。当然，该系统仍有诸多完善空间，例如采用更复杂的验证码类型、增加验证次数限制等。
完整代码已上传至 GitHub，欢迎查阅。
总结
以上介绍了使用 Python 和 Flask 制作简单验证码系统的过程，希望能为读者提供帮助。如有疑问，欢迎留言，作者会及时回复。
本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
