第5天上篇：在Flask应用中使用用户认证—Flask

原文： http://www.catonlinepy.tech/
声明： 原创不易，未经许可，不得转载

1. 你将学会什么

今天的课程主要给大家介绍一款非常好用的Flask插件—Flask_Login，该插件主要用来管理用户的登陆状态。通过今天的学习，你将学会如何维护用户的登录、登出状态。教程中的代码都会托管到github上，猫姐一再强调，在学习本课内容时一定要亲自动手实现代码，遇到问题再到github上查看代码，如果实在不知道如何解决，可以在日志下方留言。

2. 使用Flask_Login

2.1 项目目录结构的创建

当用户登录某个应用时，应用需要记住该用户的登陆状态。在开发过程中，如果我们自己造轮子，去实现管理用户登录状态的代码，就会浪费大量时间。但现实中，我们往往需要聚焦在业务上的开发，Flask_Login就是前人造好的管理用户登录状态的轮子，并且这个插件上手起来毫无难度。照旧，在正式使用Flask_Login插件之前，还是先建立今天的项目目录，如下：

# 进入到虚拟环境目录，激活虚拟环境
maojie@Thinkpad:~/flask-plan/$ source miao_venv/bin/activate

# 到flask-course-primary目录下创建第五天的课程day5目录
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary$ mkdir day5

# 进入day5目录
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary$ cd day5

# 新建userauth_demo目录
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5$ mkdir userauth_demo

# 进入到userauth_demo目录
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5$ cd userauth_demo/

# 在userauth_demo目录中新建__init__.py文件
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo$ touch __init__.py

# 在userauth_demo包中新建routes.py路由文件
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo$ touch routes.py

# 在userauth_demo包中新建models.py文件
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo$ touch models.py

# 在userauth_demo包中新建forms.py文件
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo$ touch forms.py

# 在userauth_demo包中新建config.py文件
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo$ touch config.py

# 在userauth_demo包中新建templates目录
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo$ mkdir templates

# 进入到templates目录
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo$ cd templates/

# 在templates目录中新建layout.html
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo/templates$ touch layout.html

# 在templates目录中新建login.html
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo/templates$ touch login.html

# 在templates目录中新建register.html
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo/templates$ touch register.html

# 在templates目录中新建index.html
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/userauth_demo/templates$ touch index.html

# 在day5目录下新建run.py文件
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5/$ touch run.py

最终，我们得到今天项目的目录结构如下(使用tree命令得到)：

(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary$ tree day5
day5
├── run.py
└── userauth_demo
    ├── config.py
    ├── database.db
    ├── forms.py
    ├── __init__.py
    ├── models.py
    ├── routes.py
    └── templates
        ├── index.html
        ├── layout.html
        ├── login.html
        └── register.html

安装Flask_Login插件的方式与其它插件的安装方式一样，使用pip命令，如下：

# 注意，一定要在虚拟环境中
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5$ pip install Flask_Login

然后在__init__.py文件中对Flask_Login进行配置，大家首先把第4天__init__.py文件中的内容复制过来，然后添加如下代码：

# ...
from flask_login import LoginManager

app = Flask(__name__)
# ...
login_manager = LoginManager(app)

# ...

2.2 准备用户的登陆模型

在正式创建登录模型之前，我们先介绍一下config.py文件，该文件的作用存放与应用相关的所有配置信息。在之前的教程中，我们直接将配置信息写到了__init__.py文件中，这样不利于复杂 web应用程序的开发管理，后续章节的配置内容都将会放到config.py文件中，配置代码如下所示：

# config.py文件中的内容
import os
basedir = os.path.abspath(os.path.dirname(__file__))

class Config(object):
    SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'database.db')
    # 使用表单,对Flask_WTF进行配置
    SECRET_KEY = 'miaojie is great!'

__init__.py文件只需添加如下代码便可导入config.py文件中所有配置信息：

# __init__.py文件中的内容

# ..
from userauth_demo.config import Config
app = Flask(__name__)
app.config.from_object(Config)
# ..

建立用户的登陆模型是创建数据库表的过程，在第4课中，我们谈到了如何去建立用户模型，这里不再详细讲解，直接使用即可。要想使用Flask_Login插件，在模型中需要实现下面几个方法(函数)，如下：
方法说明
is_authenticated() 如果用户已经登录,必须返回 True ,否则返回 False
is_active() 如果允许用户登录,必须返回 True ,否则返回 False 。如果要禁用账户,可以返回 False
is_anonymous() 对普通用户必须返回 False
get_id() 必须返回用户的唯一标识符,使用 Unicode 编码字符串

但是Flask_Login提供了一个更简便的方法—UserMixin类，开发人员只需要让User类继承UserMixin类即可完成对User表的登录管理，UserMixin包含这4个方法的默认实现(因此上面这张表的内容大家完全不用关心)。由于后面的代码会越来越复杂，为了使代码更易管理，所有建立数据库模型的代码将放在models.py文件中。如下所示，在models.py中建立User模型：

# 在models.py文件中的内容
#!coding:utf8
from userauth_demo import db
from flask_login import UserMixin

# User继承UserMixin类
class User(UserMixin, db.Model):
    __tablename__ = 'user'
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(20), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)
    password = db.Column(db.String(60),  nullable=False)

    def __repr__(self):
        return f"User('{self.username}','{self.email}','{self.password}')"

# 在这个模型中，还添加了email字段，因为在用户登陆的时候，不仅可以输入用户名登陆，也可以输入email登陆

第4课中已经讲了数据库的迁移，大家可以直接按照第4课的5.3小结内容进行操作即可，同样在操作之前，需要设置环境变量，环境变量在第1课的3节最后已经讲过如何设置了。

最后，Flask_Login插件要求程序有一个回调函数，可以加载指定ID的用户。在models.py文件中增加如下代码：

# ..
# 从userauth_demo包中导入login_manager实例
from userauth_demo import login_manager

# 回调函数
@login_manager.user_loader
def load_user(user_id):
    # print调试时用
    #print(user_id)  
    return User.query.get(int(user_id))

# ..

2.3 添加登陆表单

表单在第三课中已经讲到过，现在将表单直接拿过来用，所有建立表单的代码都将放在forms.py文件中，在forms.py文件中添加登陆表单内容：

# 在forms.py文件中的内容
from flask_wtf import FlaskForm
from wtforms.fields.html5 import EmailField
from wtforms import PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired, Length

class LoginForm(FlaskForm):
    # 表单包括邮箱，密码和是否记住密码及一个提交按钮
    email = EmailField(u'邮箱', validators=[DataRequired(), Length(min=2, max=20)])
    password = PasswordField(u'密码', validators=[DataRequired()])
    remember = BooleanField(u'记住我')
    submit = SubmitField(u'登陆')

在表单中email字段使用了WTForms提供的Length()验证函数，确保用户输入的email长度在2到20的范围内，PasswordField可使Jinja2生成type="password"的标签；BooleanField可使Jinjia2生成true或false的可选框；SubmiteField可使Jinjia2生成type="submit"的标签。

2.4 表单的渲染

在第二课中已经讲到过模板的继承概念，今天的课程会继续用到这一概念，这里就不重复描述了（大家如果不清楚，可回去再看看第2天的课程）。在templates/layout.html中输入如下html代码：




    
      {% if title %}
        {{ title }}-喵星在线
      {% else %}
        喵星在线
      {% endif %}
    
    
        
            主页
            登陆
        
    
    
    
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    
                        {{ message }}
                    
                {% endfor %}
            {% endif %}
        {% endwith %}
       {% block content %}
       {% endblock %}

然后通过子模板index.html继承基模板layout.html，在templates/index.html中输入如下代码：


{% extends "layout.html" %}
 
{% block content %}
    你好，喵星在线!
{% endblock %}

此外，我们还需要一个登录页面，让我们可以输入邮箱和密码，在templates/login.html中输入如下代码：


{% extends "layout.html" %}

{% block content %}
    登陆
    
            
            {{html_form.hidden_tag() }}
        
            {{ html_form.email.label }}

            {{ html_form.email() }}
            {% if html_form.email.errors %}
         
            {% for error in html_form.email.errors %}
               {{ error }}
            {% endfor %}
         
         {% endif %}
        
        
          {{ html_form.password.label }}

          {{ html_form.password() }}
        
        
            {{ html_form.remember.label }}
            {{ html_form.remember() }}
        
        
           {{ html_form.submit() }}
        
    
{% endblock content %}

上面已经完成login.html页面前台form表单的显示（渲染）工作，这时就需要在视图函数中（python文件）将代表表单的类传递到前端模板文件（html文件）中，下面在routes.py中完成视图函数的编写：

# routes.py文件中的内容
#!coding:utf8                                                # 文件中有中文，必须在代码最前面注明utf8编码，否则程序拉起时会报错
from flask import render_template, redirect, url_for, flash
from userauth_demo import app

from userauth_demo.forms import LoginForm                    # 从userauth_demo.forms中导入LoginForm类
from flask_login import current_user
from userauth_demo.models import User

# 添加视图函数渲染主页内容
@app.route('/')
def index():
    return render_template('index.html', title='第五天')

# 在视图函数中将form表单传到前端html文件中去
@app.route('/login', method=['GET','POST'])
def login():
    if current_user.is_authenticated:
        return redirect(url_for('index'))
    # 对类LoginForm的实例
    form = LoginForm()
    if form.validate_on_submit():
        if form.email.data == '[email protected]' and form.password.data == 'miaojie':
            flash('你已经登陆成功', 'success')                 # flash消息的渲染
            return redirect(url_for('index'))               # 如果登陆成功，则重定向到主页

    # 将视图函数中的变量form传到模板login.html文件中去
    return render_template('login.html', title='第五天', html_form=form)

current_user是由Flask_Login导入的，它在视图函数和模板中可以直接使用。它表示的是当前登陆的用户，如果用户未登陆，则表示用户是匿名用户，is_authenticated则会返回False。当在表单中填好内容后，点击提交按钮时，validate_on_submit发送的是post请求，if判断语句中填入的是假数据，因为数据还没有写入到数据库，无法使用数据库将用户的邮箱和密码读取出来，后面会讲到用户的注册，将用户的信息写到数据库中。

在run.py文件中输入如下代码，将web程序拉起:

from userauth_demo import app  # 从userauth_demo包中导入app实例

if __name__ == "__main__":
    app.run(debug=True, port=5005)        # app实例调用自己的run函数
# 在app.run里面可以指定端口号,当下次再运行python run.py时，可能提示端口号被占用，此时，可以修改run.py文件中的端口号

现在，所有代码已编写完成，通过python run.py将web程序拉起，开始验证结果，在浏览器中输入http://127.0.0.1:5005/login，效果图如下所示：

在登陆表单中输入用户名及密码，点提交按钮后的效果图：

3. 上篇完，未完待续...

由于第5天的课程涉及登录和注册两方面的知识，内容比较多，因此猫姐将第5天的课程分为上、下两篇进行讲解，这里我们完成上篇登录功能的实现，下篇我们将接着讲解注册功能，以及注册后登录功能的实现。

第5天上篇：在Flask应用中使用用户认证—Flask_Login