针对这个话题，我将详细解释如何使用 Flask 实现图形验证码及验证码的动态刷新。

需求分析：

我们的目标是实现两个示例：

Example 1：静态图形验证码
Example 2：动态图形验证码

环境部署：

首先，我们需要安装 Flask 和 Pillow 两个库。Flask 用于构建我们的 Web 应用程序，而 Pillow 用于操作图像。

pip install flask
pip install pillow

示例 1：静态图形验证码

步骤 1：创建 Flask 应用程序

from flask import Flask, make_response, session
from PIL import Image, ImageDraw, ImageFont
import random

app = Flask(__name__)
app.secret_key = 'hard to guess string'

这里我们引入 Flask 应用程序和相关库，并创建了一个 Flask 的实例 app，并设置了一个 secret_key，用于加强安全性。

步骤 2：定义路由

@app.route('/static')
def get_static_captcha():
    captcha_str = ''.join(random.sample('0123456789abcdefghijklmnopqrstuvwxyz', 4))
    img = Image.new('RGBA', (120, 30), color=(255, 255, 255))
    draw = ImageDraw.Draw(img)
    fonts_path = '/usr/share/fonts/truetype/freefont/FreeMono.ttf'
    font = ImageFont.truetype(fonts_path, 25)
    draw.text((10, 5), captcha_str, font=font, fill=(0, 0, 0))
    response = make_response(img.tobytes())
    response.headers['Content-Type'] = 'image/png'
    session['captcha'] = captcha_str
    return response

这里我们定义了一个路由，当用户访问 /static 路径时，会返回一个 PNG 图片。

步骤 3：设置图片响应头

response.headers['Content-Type'] = 'image/png'

设置图片的响应头（MIME 类型）为 image/png。

步骤 4：生成验证码字符串，并将其存储在 session 中

captcha_str = ''.join(random.sample('0123456789abcdefghijklmnopqrstuvwxyz', 4))
session['captcha'] = captcha_str

这里我们使用 Python 的 random 模块生成 4 位随机字符串，用于生成验证码，并将验证码字符串存储在 session 中，以备后续验证。

步骤 5：使用 Pillow 生成图形验证码

img = Image.new('RGBA', (120, 30), color=(255, 255, 255))
draw = ImageDraw.Draw(img)
fonts_path = '/usr/share/fonts/truetype/freefont/FreeMono.ttf'
font = ImageFont.truetype(fonts_path, 25)
draw.text((10, 5), captcha_str, font=font, fill=(0, 0, 0))
response = make_response(img.tobytes())

使用 Pillow 库操作图像，生成 120 * 30 的白色图片，并在其上绘制生成的验证码，返回生成的图片对象。

步骤 6：启动 Flask 应用

if __name__ == '__main__':
    app.run()

将应用程序运行在本地服务器上。

启动应用后，可以通过浏览器访问 http://127.0.0.1:5000/static，即可看到生成的验证码。

示例 2：动态图形验证码

步骤 1：安装 jQuery

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask dynamic captcha demo</title>
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <img src="/dynamic" id="dynamic-captcha">
    <button id="refresh">Refresh</button>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#refresh").click(function () {
                $("#dynamic-captcha").attr("src", "/dynamic");
            });
        });
    </script>
</body>
</html>

这里使用了 jQuery 库，添加了一个动态刷新验证码的按钮，当用户点击按钮时，会使用 Ajax 技术重新加载 /dynamic 路径，获取新的验证码。

步骤 2：创建路由

@app.route('/dynamic')
def generate_dynamic_captcha():
    captcha_str = ''.join(random.sample('0123456789abcdefghijklmnopqrstuvwxyz', 4))
    img = Image.new('RGBA', (120, 30), color=(255, 255, 255))
    draw = ImageDraw.Draw(img)
    fonts_path = '/usr/share/fonts/truetype/freefont/FreeMono.ttf'
    font = ImageFont.truetype(fonts_path, 25)
    draw.text((10, 5), captcha_str, font=font, fill=(0, 0, 0))
    response = make_response(img.tobytes())
    response.headers['Content-Type'] = 'image/png'
    session['captcha'] = captcha_str
    return response

这里我们定义了一个新的路由 /dynamic，与 /static 相比，这里增加了一个刷新验证码字符串的操作。

步骤 3：编写 HTML 模板

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask dynamic captcha demo</title>
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <img src="/dynamic" id="dynamic-captcha">
    <button id="refresh">Refresh</button>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#refresh").click(function () {
                $("#dynamic-captcha").attr("src", "/dynamic");
            });
        });
    </script>
</body>
</html>

这里定义了一个包含动态或静态验证码的图片标签，并添加一个刷新按钮。

步骤 4：使用 Flask 渲染模板

@app.route('/')
def index():
    return render_template('index.html')

这里我们将模板 index.html 渲染为响应内容。

步骤 5：启动 Flask 应用

if __name__ == '__main__':
    app.run()

将应用程序运行在本地服务器上。

启动应用后，可以通过浏览器访问 http://127.0.0.1:5000，即可看到动态验证码的示例，而点击 Refresh 按钮后会刷新验证码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：python web框架Flask实现图形验证码及验证码的动态刷新实例 - Python技术站

python web框架Flask实现图形验证码及验证码的动态刷新实例

需求分析：

环境部署：

示例 1：静态图形验证码

示例 2：动态图形验证码

相关文章