从头搭建一个flask鉴权系统之登陆

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 从头搭建一个flask鉴权系统之登陆

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

从登陆开始

01.知识树

本文涉及到如下知识点

  1. flask-login的简单使用

  2. 本地鉴权实践

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

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

02.表结构设计

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

usernamepasswordemail|------

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

user_idoauth_nameoauth_access_token|------

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

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

03.OAuth鉴权

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

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

从头搭建一个flask鉴权系统之登陆

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

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

  1. 本地鉴权

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 navigation/span
                span class="icon-bar"/span
                span class="icon-bar"/span
                span class="icon-bar"/span
            /button
            a class="navbar-brand" href="/"WebAuth/a
        /div
        div class="navbar-collapse collapse"
            ul class="nav navbar-nav"
                lia href="/"Home/a/li
            /ul
            ul class="nav navbar-nav navbar-right"
                 if current_user.is_authenticated %}
                lia href=" url_for('auth.logout') }}"Sign Out/a/li
                 else %}
                lia href=" url_for('auth.login') }}"Sign In/a/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"
    h1Login/h1
/div

div class="col-md-4"
     wtf.quick_form(form) }}
/div
 endblock %}

最后的登陆页面为

从头搭建一个flask鉴权系统之登陆

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,并点击登陆,发现可以正常登陆,效果如下

从头搭建一个flask鉴权系统之登陆

其中index页面代码为


 extends "base.html" %}
 import  "bootstrap/wtf.html" as wtf %}
 block title %}Login endblock %}
 block page_content %}
div 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"
    h1Home/h1
/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 }}" /
    /div
 else %}
    Your are not login yet
 endif %}
/div
 endblock %}
  1. 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 GitHub/a
/div

现在的登陆页面为

从头搭建一个flask鉴权系统之登陆

更新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登陆

登陆成功后,如下

从头搭建一个flask鉴权系统之登陆

至此,登陆功能完成

完整代码:

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

往期文章:

       

     

     

       

果喜欢我的文章,那就关注我吧!

从头搭建一个flask鉴权系统之登陆

万分感谢!

欢迎留言讨论

原文始发于微信公众号(萝卜大杂烩):

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> 从头搭建一个flask鉴权系统之登陆


 上一篇
从头搭建一个flask鉴权系统之注册 从头搭建一个flask鉴权系统之注册
微信公众号:**萝卜大杂烩** 关注可了解更多的原创内容。问题或建议,请公众号留言或加本人微信; **如果你觉得文章对你有帮助,欢迎好看** 知识树1.Python发送email2.token处理3.用户账号管理 一个微型的Emai
2021-04-06
下一篇 
从头搭建一个flask鉴权系统之角色 从头搭建一个flask鉴权系统之角色
微信公众号:**萝卜大杂烩** 关注可了解更多的原创内容。问题或建议,请公众号留言或加本人微信; **如果你觉得文章对你有帮助,欢迎加微信交流** 知识树1.用户角色2.block用户 更新表结构设计角色表结构设计一个简单的角色表,
2021-04-06