button active 跳转到另一个页面_从头搭建一个flask鉴权系统之登陆

墨蓝 2023-01-01 11:51 188阅读 0赞

**“** 从今天开始，准备从头开始搭建一个基于flask的鉴权系统，一点一滴，积累于生活**”**

从登陆开始

01.知识树

本文涉及到如下知识点

1. flask-login的简单使用

2. 本地鉴权实践

3. GitHub鉴权登陆实践，flask-github使用

4. 可扩展的表结构设计思路

02.表结构设计

我们首先设计一个User用户表，里面的字段可以包括username，password，email等用户信息，大致如下

<table> 
 <thead> 
  <tr> 
   <th>username</th> 
   <th>password</th> 
   <th>email</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>user1</td> 
   <td>p1</td> 
   <td>user1@gmail.com</td> 
  </tr> 
  <tr> 
   <td>user2</td> 
   <td>p2</td> 
   <td>user2@gmail.com</td> 
  </tr> 
  <tr> 
   <td>user3</td> 
   <td>p3</td> 
   <td>user3@gmail.com</td> 
  </tr> 
 </tbody> 
</table>

因为我们还会涉及到第三方登陆，那么为了后面便于扩展，再设计一张表，就命名为ThirdAuth，里面可以包括user\_id，与user表关联，oauth\_name，oauth\_access\_token等字段

<table> 
 <thead> 
  <tr> 
   <th>user_id</th> 
   <th>oauth_name</th> 
   <th>oauth_access_token</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>user-id1</td> 
   <td>auth1</td> 
   <td>token1</td> 
  </tr> 
  <tr> 
   <td>user-id2</td> 
   <td>auth2</td> 
   <td>token2</td> 
  </tr> 
  <tr> 
   <td>user-id3</td> 
   <td>auth3</td> 
   <td>token3</td> 
  </tr> 
 </tbody> 
</table>

这样，oauth\_name字段可以用来存储第三方来源，例如github，以此来区别不同的第三方登陆用户。

到此，一个简单的表结构就设计好了。

03.OAuth鉴权

简单来说，为一个网站添加第三方登录指的是提供通过其他第三方平台账号登入当前网站的功能。比如，使用QQ、微信、新浪微博账号登录。对于某些网站，甚至可以仅提供社交账号登录的选项，这样网站本身就不需要管理用户账户等相关信息。对用户来说，使用第三方登录可以省去注册的步骤，更加方便和快捷。这里，我就是使用GitHub的OAuth认证来进行鉴权登陆。

这里首先需要在自己的GitHub上创建一个OAuth程序，非常简单，访问这个地址：https://github.com/settings/applications/new，按照要求填写即可。

![c480bb5d0c65e25aababd21bcd7e6e03.png][]

其中的callback需要填写一个回调函数，具体后面再说。

创建好这个OAuth程序后，我们就会获得Client ID(客户端ID)和Client Secret(客户端密钥)，在后面调用Github的API时使用。

04. 本地鉴权

**1. 创建表结构**

根据刚才的表结构设计，对于本地鉴权，可以在models.py文件中创建一个WebUser类，定义对应的数据库字段。

对于password，不建议直接在数据库中存储明文，所以这里使用了werkzeug库来做hash转换。

同时WebUser类还继承自flask-login的UserMixin类，该类实现了关键的用于检测用户状态的方法：

is\_authenticated，如果用户已经登陆返回True，否则返回False

is\_active，如果用户允许登陆，返回True,否则返回Flase

is\_anonymous，对普通用户必须返回False

get\_id，必须返回用户的唯一标识

后面主要使用到了is\_authenticated方法。

而init\_user是用来初始化第一个用户的，password等几个方法分别是用来检测密码是否正确的。

class WebUser(UserMixin, db.Model):
        __tablename__ = 'webuser'
        id = db.Column(db.Integer, primary_key=True)
        user_id = db.Column(db.String(64), unique=True, index=True)
        email = db.Column(db.String(64), unique=True, index=True)
        username = db.Column(db.String(64), unique=True, index=True)
        password_hash = db.Column(db.String(128))
    
        @staticmethod
        def init_user():
            users = WebUser.query.filter_by(username='admin').first()
            if users is None:
                users = WebUser(email='admin@123.com', username='admin', user_id=time.time())
            users.password = '123456'
            db.session.add(users)
            db.session.commit()
    
        @property
        def password(self):
            raise AttributeError('password is not readable attribute')
    
        @password.setter
        def password(self, password):
            self.password_hash = generate_password_hash(password)
    
        def verify_password(self, password):
            return check_password_hash(self.password_hash, password)

**2. 定义登陆表单**

登陆表单比较简单，两个输入框，分别为用户名和密码，一个check box，用来选择是否保持登陆，外加一个提交按钮

class LoginForm(FlaskForm):
        email = StringField('Email', validators=[DataRequired(), Length(1, 64), Email()])
        password = PasswordField('Password', validators=[DataRequired()])
        remember_me = BooleanField('Keep me logged in')
        submit = SubmitField('Log In')

**3. 定义登陆登出函数**

当表单正确提交时，如果用户名和密码匹配，则提示登陆成功，并跳转页面，否则提示登陆失败。

因为是使用flask-login扩展，所以登陆直接调用login\_user()即可。

@auth.route('/login', methods=['GET', 'POST'])
    def login():
        form = LoginForm()
        if form.validate_on_submit():
            user = WebUser.query.filter_by(email=form.email.data).first()
            if user is not None and user.verify_password(form.password.data):
                login_user(user, form.remember_me.data)
                return redirect(request.args.get('next') or url_for('main.index'))
            flash('Invalid username or password!')
        return render_template('auth/login.html', form=form)

对于登出，同样简单，注意需要用login\_required装饰器保证只有已经登陆的用户才能调用该函数。

@auth.route('/logout')
    @login_required
    def logout():
        flash('You have logged out!')
        return redirect(url_for('main.index'))

**4. web模板**

创建一个base.html基础模板(继承自flask-bootstrap模板)，后面其他页面都继承自该模板，这样可以保证所有的页面风格统一，也可以减少代码量。

{% extends "bootstrap/base.html" %} 
    
    {% block title %}Flasky{% endblock %} 
    
    {% block navbar %}
    <div class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigationspan>
                    <span class="icon-bar">span>
                    <span class="icon-bar">span>
                    <span class="icon-bar">span>
                button>
                <a class="navbar-brand" href="/">WebAutha>
            div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Homea>li>
                ul>
                <ul class="nav navbar-nav navbar-right">
                    {% if current_user.is_authenticated %}
                    <li><a href="{
         { url_for('auth.logout') }}">Sign Outa>li>
                    {% else %}
                    <li><a href="{
         { url_for('auth.login') }}">Sign Ina>li>
                    {% endif %}
                ul>
            div>
        div>
    div>
    {% endblock %}
    
    {% block content %}
    <div class="container">
        {% block page_content %}{% endblock %}
    div>
    {% endblock %}

**5. 登陆页面**

登陆页面继承自base.html模板，并使用wtf快速渲染表单

{% extends "base.html" %}
    {% import  "bootstrap/wtf.html" as wtf %}
    {% block title %}Login{% endblock %}
    {% block page_content %}
    <div class="page-header">
        <h1>Loginh1>
    div>
    
    <div class="col-md-4">
        {
         { wtf.quick_form(form) }}
    div>
    {% endblock %}

最后的登陆页面为

![25d3e5fb68db3be416134ec1bbc04f38.png][]

**6. 初始化数据库**

使用flask-script扩展，定义runserver和shell两个命令行命令，shell用于数据库等调测操作，runserver用于启动服务。

from app import create_app, db
    from flask_script import Manager, Shell, Server
    from app.models import WebUser
    
    
    app = create_app('testing')
    manager = Manager(app)
    
    
    def make_shell_context():
        return dict(app=app, db=db, WebUser=WebUser)
    
    
    manager.add_command("runserver", Server(use_debugger=True, host='0.0.0.0', port='9982'))
    manager.add_command("shell", Shell(make_context=make_shell_context))
    
    
    if __name__ == '__main__':
        manager.run(default_command='runserver')

在命令行输入python manage.py shell，进入调测shell，然后输入db.create\_all()和WebUser.init\_user()，分别创建表并插入原始用户。

**7. 登陆测试**

在输入框分别键入admin@163.com和123456，并点击登陆，发现可以正常登陆，效果如下

![7ab92b82dd4df0cd1cbbf342fcecb68e.png][]

其中index页面代码为

{% extends "base.html" %}
    {% import  "bootstrap/wtf.html" as wtf %}
    {% block title %}Login{% endblock %}
    {% block page_content %}

`class="container">     {% for message in get_flashed_messages() %}     <div class="alert alert-warning">         <button type="button" class="close" data-dismiss="alert">×button>         { { message }}div>     {% endfor %}div> <div class="page-header">     <h1>Homeh1>div> <div class="col-md-4">     这是首页div> <div class="col-md-12"> {% if current_user.is_authenticated %}     { { current_user.username }}     { { name }}     <div>     <img style="-webkit-user-select: none;" src="{ { avatar }}" />`

`{% else %}     Your are not login yet {% endif %}`

\{% endblock %\}

05. GitHub鉴权

**1. 创建表结构**

类似的，定义需要的字段即可

class ThirdOAuth(db.Model):
        __tablename__ = 'thirdoauth'
        id = db.Column(db.Integer, primary_key=True)
        user_id = db.Column(db.String(64), unique=True, index=True)
        oauth_name = db.Column(db.String(128))
        oauth_id = db.Column(db.String(128), unique=True, index=True)
        oauth_access_token = db.Column(db.String(128), unique=True, index=True)
        oauth_expires = db.Column(db.String(64), unique=True, index=True)

**2. 发送授权请求**

这一步，flask-github已经为我们封装好了，直接调用即可

@auth.route('/githublogin', methods=['GET', 'POST'])
    def githublogin():
        return github.authorize(scope='repo')

这里需要说明，该调用需要用到我们前面获得的客户端ID和密钥，我这里把相关信息写到了一个配置文件中，并在初始化flask app时加载

配置文件

class Config:
        SECRET_KEY = "hardtoguess"
        GITHUB_CLIENT_ID = 'cf1AA35ef11d20bcdXXX'
        GITHUB_CLIENT_SECRET = 'ba7c8c8SSe9cd574eb3da1b5e704d11d35aXXXb8'

初始化app

def create_app(config_name):
        app = Flask(__name__)
        app.config.from_object(config[config_name])
        config[config_name].init_app(app)
        db.init_app(app)
        cors.init_app(app, supports_credentials=True)
        login_manager.init_app(app)
        bootstrap.init_app(app)
        github.init_app(app)
    
        from .main import main as main_blueprint
        app.register_blueprint(main_blueprint)
        from .api_1_0 import api_1_0 as api_blueprint
        app.register_blueprint(api_blueprint)
        from .auth import auth as auth_blueprint
        app.register_blueprint(auth_blueprint, url_prefix='/auth')
    
        return app

**3. 获取access令牌**

当用户同意授权或拒绝授权后，GitHub会将用户重定向到我们设置的callback URL，我们需要创建一个视图函数来处理回调请求。如果用户同意授权，GitHub会在重定向的请求中加入code参数，一个临时生成的值，用于程序再次发起请求交换access token。程序这时需要向请求访问令牌URL(即https://github.com/login/oauth/access\_token)发起一个POST请求，附带客户端ID、客户端密钥、code。请求成功后的的响应会包含访问令牌(Access Token)。

很幸运，上面的一系列工作flask-github会在背后替我们完成。我们只需要创建一个视图函数，定义正确的URL规则(这里的URL规则需要和GitHub上填写的Callback URL匹配)，并为其附加一个github.authorized\_handler装饰器。另外，这个函数要接受一个access\_token参数，GitHub-Flask会在授权请求结束后通过这个参数传入访问令牌。

同时判断，该用户是否存在于数据库中，并更新相关字段。

@auth.route('/callback/github')
    @github.authorized_handler
    def authorized(access_token):
        if access_token is None:
            flash('Login Failed!')
            return redirect(url_for('main.index'))
        response = github.get('user', access_token=access_token)
        username = response['login']
        u_id = response['id']
        email = response['email']
        avatar = response['avatar_url']
        user = WebUser.query.filter_by(username=username).first()
        if user is None:
            user = WebUser(username=username, user_id=time.time())
            db.session.add(user)
            db.session.commit()
            thirduser = ThirdOAuth(user_id=WebUser.query.filter_by(username=username).first().user_id,
                                   oauth_name='github', oauth_access_token=access_token,
                                   oauth_id=u_id)
            db.session.add(thirduser)
            db.session.commit()
            login_user(user)
            user.email = email
            db.session.add(user)
            db.session.commit()
            session['userid'] = user.user_id
            return render_template('index.html', avatar=avatar)
        else:
            thirduser = ThirdOAuth.query.filter_by(user_id=user.user_id).first()
            thirduser.oauth_access_token = access_token
            db.session.add(thirduser)
            db.session.commit()
            user.email = email
            db.session.add(user)
            db.session.commit()
            login_user(user)
            session['userid'] = user.user_id
            return render_template('index.html', avatar=avatar)

更多的GitHub开发文档资料可以查看：

https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/

更多flask-github资料可以查看：

https://github-flask.readthedocs.io/en/latest/

**4. 更新登陆页面**

更新登陆页面，增加一个以GitHub登陆的按钮

<div class="col-md-12">
        <a class="btn btn-primary" href="{
        { url_for('auth.githublogin') }}">Login with GitHuba>
    div>

现在的登陆页面为

![d0e1b2b0a913233a1f4c9bb54092aa7c.png][]

更新index路由函数，增加以GitHub登陆时的头像

@main.route('/', methods=['GET', 'POST'])
    def index():
        # print(session)
        if current_user.is_authenticated:
            if 'userid' in session:
                user = ThirdOAuth.query.filter_by(user_id=session['userid']).first()
                if user:
                    response = github.get('user', access_token=user.oauth_access_token)
                    avatar = response['avatar_url']
                    username = response['login']
                    return render_template('index.html', username=username, avatar=avatar)
        return render_template('index.html')

又因为在callback函数中增加了session.userid字段，所以在logout时，把该字段手动删除

@auth.route('/logout')
    @login_required
    def logout():
        logout_user()
        if 'userid' in session:
            session.pop('userid')
        flash('You have logged out!')
        return redirect(url_for('main.index'))

**5. 测试GitHub登陆**

登陆成功后，如下

![920684d8c2a8f934e7991bae0994dda4.png][]

至此，登陆功能完成

完整代码：

https://github.com/zhouwei713/flask-webauth

--------------------

往期文章：

使用sklearn+jieba完成一个文档分类器

从头完成一个restful API服务

从头搭建一个HTTPS网站

运用百度API来测评女神的质量

圣诞来临，爬取女神美图放松下

用Python探索红楼梦里的关系

Kubernetes系列入门文章

爬取女神王祖贤的海报评论，看看粉丝们是怎么说

果喜欢我的文章，那就关注我吧！

![632d39a5b483a747cb8409783b0d5aad.png][]

万分感谢！

欢迎留言讨论

![bb0f6bedd8f4b7055bb52dc203c16852.png][]

[c480bb5d0c65e25aababd21bcd7e6e03.png]: /images/20221120/0c6eabb38ac5480bab4178680f896259.png
[25d3e5fb68db3be416134ec1bbc04f38.png]: /images/20221120/beb33f0e58a64a7bac7c637256e7468a.png
[7ab92b82dd4df0cd1cbbf342fcecb68e.png]: /images/20221120/a5abdd6f1c1f4dabb74b6ce7bd6e1e93.png
[d0e1b2b0a913233a1f4c9bb54092aa7c.png]: /images/20221120/1efb286d626441c689c6108d4e2fac4f.png
[920684d8c2a8f934e7991bae0994dda4.png]: /images/20221120/a6ab5c38aaad4dc0916432523a722843.png
[632d39a5b483a747cb8409783b0d5aad.png]: /images/20221120/e912f48f8f6b43dbaf91253dad91b327.png
[bb0f6bedd8f4b7055bb52dc203c16852.png]: /images/20221120/b30295ad51494ac0842c16bee767ddc5.png