下载：

利用已经集成好的工具可以帮助我们提高效率，自动生成图形验证码：

点此进入下载

在info文件夹下新建utils目录，将解压得到的文件夹直接拖入utils目录即可。

 

 

图形验证码的基本使用：

后端Flask代码：

@blue_passport.route("/image_code", methods=["GET"])
def image_code():
    """
        图形验证码
        1.接收参数(UUID, GET)
        2.校验参数(UUID)
            2.1校验参数是否存在
        3.生成图形验证码
        4.将k=UUID,v=文字验证码存入redis数据库
        5.返回图形验证码
    :return: 图形验证码的响应对象
    """
    # 1.接收参数(UUID, GET)
    image_code_uuid = request.args.get("image_code_uuid")
    # 2.校验参数(UUID)
    if not image_code_uuid:
        abort(404)
    # 3.生成图形验证码
    name, image_code, image = captcha.generate_captcha()
    print("图形验证码:"+image_code)
    # 4.将k=UUID,v=文字验证码存入redis数据库
    sr.set("imageCodeUUID:"+image_code_uuid, image_code, ex=constants.IMAGE_CODE_REDIS_EXPIRES)
    # 5.返回图形验证码
    res = make_response(image)
    res.headers["Content-Type"] = "image/jpg"
    return res

Html代码：

<div class="form_group">
    <input type="text" name="code_pwd" id="imagecode" class="code_pwd">
    <div class="input_tip">图形验证码</div>
    <img src="" class="get_pic_code" onclick="generateImageCode()">
    <div id="register-image-code-err" class="error_tip">图形码不能为空</div>
</div>

Js代码：

var imageCodeId = ""

// TODO 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
function generateImageCode() {
    imageCodeId = generateUUID()
    var url = "/passport/image_code?image_code_uuid=" + imageCodeId
    $(".get_pic_code").attr("src", url)
}


// TODO 生成一个图片验证码的UUID
function generateUUID() {
    var d = new Date().getTime();
    if(window.performance && typeof window.performance.now === "function"){
        d += performance.now(); //use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
}

解析：

1. passport的蓝图设置：

from flask import Blueprint

blue_passport = Blueprint("passport", __name__, url_prefix="/passport")

from . import views

url前缀为 passport ，image_code路由为 image_code

2. 因此获取图形验证码时，在JS中手动构造请求地址并携带参数UUID：

// imageCodeId 为通过自定义函数生成的随机UUID
var url = "/passport/image_code?image_code_uuid=" + imageCodeId

3. 后台接收到参数UUID并校验后通过工具生成图形验证码，

生成的内容为一个包含了三个元素的元组：

第一个元素：图片名

第二个元素：图片验证码对应的文字验证码

第三个元素：二进制图片信息

4. 将k=UUID，v=图片验证码对应的文字验证码的形式保存进redis数据库

5. 利用二进制图片信息构造响应对象，设置 Content-Type 为 image/jpg ，

返回图片信息即可。