图片验证码

图片验证码验证流程

• 前端页生成验证码编号，并将编号并提交到后台去请求验证码图片
• 后台生成图片验证码，并把验证码文字内容当作值，验证码编号当作key存储在 redis 中
• 后台把验证码图片当作响应返回给前端
• 前端申请发送短信验证码的时候带上第1步验证码编号和用户输入的验证码内容
• 后台取出验证码编号对应的验证码内容与前端传过来的验证码内容进行对比
• 如果一样，则向指定手机发送验证码，如果不一样，则返回验证码错误

代码实现

• 实现 \info\static\news\js\main.js 中的 generateImageCode 方法
  • 步骤：
    1. 通过uuid生成验证码编号
    2. 拼接验证码地址
    3. 设置验证码图片标签的src

// 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
function generateImageCode() {
    // 1. 生成一个编号
    // 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
    imageCodeId = generateUUID();

    // 2. 拼接验证码地址
    var imageCodeUrl = "/passport/image_code?code_id=" + imageCodeId;
    // 3. 设置页面中图片验证码img标签的src属性
    $(".get_pic_code").attr("src", imageCodeUrl)
}

• 在 passport 目录下的 view.py 文件中添加获取验证码的路由 image_code
  • 步骤：
    1. 获取参数
    2. 生成验证码
    3. 删除之前验证码并保存当前验证码
    4. 错误处理
    5. 响应返回

from . import passport_blu

@passport_blu.route('/image_code')
def get_image_code():
    pass

• 安装图片验证码所需要的 Pillow 模块

pip install Pillow

• 导入验证码生成工具包和自定义状态码文件
  • 在业务逻辑目录 info 下创建 utils Package
  • 将 captcha 文件夹和 response_code.py 文件拷贝到该目录

• 根据步骤实现视图函数

from flask import current_app, jsonify
from flask import make_response
from flask import request

from info import constants
from info import redis_store
from info.utils.captcha.captcha import captcha
from info.utils.response_code import RET
from . import passport_blu


@passport_blu.route('/image_code')
def get_image_code():
    """
    获取图片验证码
    :return:
    """

    # 1. 获取到当前的图片编号id
    code_id = request.args.get('code_id')
    # 2. 生成验证码
    name, text, image = captcha.generate_captcha()
    try:
        # 保存当前生成的图片验证码内容
        redis_store.setex('ImageCode_' + code_id, constants.IMAGE_CODE_REDIS_EXPIRES, text)
    except Exception as e:
        current_app.logger.error(e)
        return make_response(jsonify(errno=RET.DATAERR, errmsg='保存图片验证码失败'))

    # 返回响应内容
    resp = make_response(image)
    # 设置内容类型
    resp.headers['Content-Type'] = 'image/jpg'
    return resp

运行测试

• 实现一打开登录和注册就有验证码显示，在 main.js 文件中指定 js 点击回调中添加生成验证码的函数

// 打开注册框
$('.register_btn').click(function () {
    $('.register_form_con').show();
    generateImageCode()
})


// 登录框和注册框切换
$('.to_register').click(function () {
    $('.login_form_con').hide();
    $('.register_form_con').show();
    generateImageCode()
})