在flask中使用验证码

女爷i 2022-05-30 06:36 210阅读 0赞

# 前景 #

在学习flask web 开发的过程中，终于到了登录注册的界面，之前用PIL制作了自己的验证码，现在终于用上了，在搜集各种资料的情况下。终于初步完成了flask的验证码环节

## 验证码代码 ##

from PIL import Image, ImageFont, ImageDraw, ImageFilter
    import random
    
    
    def validate_picture():
        total = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ012345789'
        # 图片大小130 x 50
        width = 130
        heighth = 50
        # 先生成一个新图片对象
        im = Image.new('RGB',(width, heighth), 'white')
        # 设置字体
        font = ImageFont.truetype('FreeSans', 40)
        # 创建draw对象
        draw = ImageDraw.Draw(im)
        str = ''
        # 输出每一个文字
        for item in range(5):
            text = random.choice(total)
            str += text
            draw.text((5+random.randint(4,7)+20*item,5+random.randint(3,7)), text=text, fill='black',font=font )
    
        # 划几根干扰线
        for num in range(8):
            x1 = random.randint(0, width/2)
            y1 = random.randint(0, heighth/2)
            x2 = random.randint(0, width)
            y2 = random.randint(heighth/2, heighth)
            draw.line(((x1, y1),(x2,y2)), fill='black', width=1)
    
        # 模糊下,加个帅帅的滤镜～
        im = im.filter(ImageFilter.FIND_EDGES)
        return im, str

我选择用一个单独的文件写了一个验证码，这个函数返回im对象和验证码构成的字符串

### forms.py ###

class LoginForm(FlaskForm): email = StringField('电子邮箱', validators=[DataRequired(), Length(1, 64), Email()]) password = PasswordField('密码', validators=[DataRequired()]) verify_code = StringField('验证码', validators=[DataRequired()]) remember_me = BooleanField('记住自己的用户') submit = SubmitField('登录')

### views.py ###

@auth.route('/code')
    def get_code():
        image, str = validate_picture()
        # 将验证码图片以二进制形式写入在内存中，防止将图片都放在文件夹中，占用大量磁盘
        buf = BytesIO()
        image.save(buf, 'jpeg')
        buf_str = buf.getvalue()
        # 把二进制作为response发回前端，并设置首部字段
        response = make_response(buf_str)
        response.headers['Content-Type'] = 'image/gif'
        # 将验证码字符串储存在session中
        session['image'] = str
        return response

@auth.route('/login', methods=['GET', 'POST'])
    def login():
        form = LoginForm()
        if form.validate_on_submit():
            user = User.query.filter_by(email=form.email.data).first()
            if session.get('image') != form.verify_code.data:
                flash('验证码错误')
            # 验证用户的登录密码
            if user is not None and user.verify_password(form.password.data):
                login_user(user,form.remember_me.data)
                flash('验证通过，登录成功')
                return redirect(request.args.get('next') or 
                url_for('main.index'))
            else:
                flash('用户名或者密码不正确')
        return render_template('auth/login.html',form=form)

### login.html ###

{% extends "base.html" %}
    {% import "bootstrap/wtf.html" as wtf %}
    {% block title %}Flasky - Login{% endblock %}
    {% block page_content %}
    <div class="page-header">
        <h1>Login</h1>
    </div>
    <div class="col-md-4">
        {
       { wtf.quick_form(form) }}
        
        <img src="/auth/code " onclick="this.src='/auth/code?'+ Math.random()">
    </div>
    {% endblock %}

## 实验结果 ##

登录界面：  
![这里写图片描述][70]  
response返回的注册码图片：  
![这里写图片描述][70 1]  
查看一个头部信息：content-type为image/gif  
![这里写图片描述][70 2]  
同样，点击之后是会刷新验证码的

## 总结 ##

算是一个还行的东西把，虽说是从网上找的，然后结合了一些自己的想法。也理解了response的一点点东西。对session和cookie也稍微了解了一下，欠缺部分：HTTP的字段信息，和session和cookie的详细了解。正在做这件事，虽然每天空闲时间都蛮少的，但是尽量多做点事情，一天在web里面实现一个功能，用好这写空余时间。

[70]: /images/20220530/0c5287d0d3f149b78e14bc8cae377cf3.png
[70 1]: /images/20220530/61dc7a7bd3fb4d7b877993d94ff852aa.png
[70 2]: /images/20220530/a92bf00619e74310b486664e1c624707.png