网站搭建笔记精简版---廖雪峰WebApp实战-Day10:用户登陆（下）笔记

最新推荐文章于 2021-06-20 07:25:30 发布

三川水祭

最新推荐文章于 2021-06-20 07:25:30 发布

阅读量407

点赞数

分类专栏： web学习文章标签： web学习

本文链接：https://blog.csdn.net/suyiwei5993/article/details/83627395

版权

web学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这里的登陆页面转换花了好长时间。

网页登陆完整日志分析（重要）

此处讲述了具体signin.html的javascrip部分如何进行相应，写出了相关函数的调用顺序。花了好长时间理清楚思路。已调通的具体代码参考该网页。或参考之前的博文。

Signin.html GET ‘/signin’
直接进行middleware初始化处理,之后调用@get(‘/signin’)绑定函数
Logger_factory -> response_factoty -> auth_factory -> Auth_factory -> Cookie2user -> find -> select -> RequestHandler
Signin()
Signin.html POST ‘/api/authenticate’
先进性middleware初始化处理，之后调用@GET(‘/api/authenticate’)绑定函数.
Logger_factory -> response_factoty -> auth_factory 
authenticate -> findAll -> cookie2user –> RequestHandler
authenticate()
signin.html get ‘/’
先进性middleware初始化处理，之后调用@GET(‘/’)函数.
Logger_factory -> response_factoty -> auth_factory 
authenticate -> findAll -> cookie2user –> RequestHandler
index ()

为什么要使用cookie

使用cookie验证后，网页右上角就会显示成当前的用户。Session功能可来封装保存用户状态的cookie，但每次均需要从session中取出用户登陆状态。但是由session作的webapp很难扩展。因此直接使用cookie验证。
教程采用直接读取cookie的方式来验证用户登录，即每次用户访问任意URL，都会对cookie进行验证，这种方式的好处是保证服务器处理任意的URL都是无状态的，可以扩展到多台服务器。
由于登录成功后是由服务器生成一个cookie发送给浏览器，所以，要保证这个cookie不会被客户端伪造出来。因此通过一种单向算法SHA1来实现cookie的防伪造。

密码生成

从上一节中，可以看出密码生成的步骤如下：
1 ：在register.html文件中的JavaScript将passward进行第一次包装，生成A，传递到@get(’/api/users’)中。

CryptoJS.SHA1(email + ':' + this.password1).toString()

2：@post(’/api/users’)绑定函数接下来对A进行第二次包装，生成B。

sha1_passwd = '%s:%s' % (uid, passwd)

3：user2cookie函数对B进行第三次包装，生成C。

# id-B-到期时间-秘钥
expires = str(int(time.time() + max_age))
s = '%s-%s-%s-%s' % (user.id, user.passwd, expires, _COOKIE_KEY)

4：返回用户id-到期时间-C

# 用户id-到期时间-C
L = [user.id, expires, hashlib.sha1(s.encode('utf-8')).hexdigest()]

密码比较

在用户cookie未到期时，对用户认证的时候，通过signin.html里的SHA1(email+password)值对password进行包装生成A。

passwd: this.passwd==='' ? '' : CryptoJS.SHA1(email + ':' + this.passwd).toString()

接下来运行handlers中@post('/api/authenticate')的绑定函数，对密码进行再次包装生成B。

# check passwd:
sha1 = hashlib.sha1()
sha1.update(user.id.encode('utf-8'))
sha1.update(b':')
sha1.update(passwd.encode('utf-8'))

然后对比两个密码，判断是否登陆。

if user.passwd != sha1.hexdigest()

如果认证通过，更新cookie。最后通过signin.html中的location.assign('/');来跳转到主页面，并传递用户信息到blogs.html中。完成右上角的信息请求。

遇到问题

右上角登陆两个字一直不变成用户名。
解决办法：在@get(’/’)函数中return内容进行更改，以便使得右上角登陆两个字变成用户名。

return {
	'__template__': 'blogs.html',
	'blogs': blogs,
	'__user__': request.__user__
}

handler

# 进入登陆页面
@get('/signin')
async def signin():
    return {
        '__template__': 'signin.html'
}
# 登陆信息判别
@post('/api/authenticate')
async def authenticate(*, email, passwd):
    if not email:
        raise APIValueError('email', 'Invalid email.')
    if not passwd:
        raise APIValueError('passwd', 'Invalid password.')
    users = await User.findAll('email=?', [email])
    if len(users) == 0:
        raise APIValueError('email', 'Email not exist.')
    user = users[0]
    # check passwd:
    sha1 = hashlib.sha1()
    sha1.update(user.id.encode('utf-8'))
    sha1.update(b':')
    sha1.update(passwd.encode('utf-8'))
    if user.passwd != sha1.hexdigest():
        raise APIValueError('passwd', 'Invalid password.')
    # authenticate ok, set cookie:
    r = web.Response()
    r.set_cookie(COOKIE_NAME, user2cookie(user, 86400), max_age=86400, httponly=True)
    user.passwd = '******'
    r.content_type = 'application/json'
    r.body = json.dumps(user, ensure_ascii=False).encode('utf-8')
    return r

HTML

<!DOCTYPE html>
<html class="uk-height-1-1">
<head>
    <meta charset="utf-8" />
    <title>登录 - Awesome Python Webapp</title>
    <link rel="stylesheet" href="/static/css/uikit.min.css">
    <link rel="stylesheet" href="/static/css/uikit.gradient.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/sha1.min.js"></script>
    <script src="/static/js/uikit.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/awesome.js"></script>
    <script>
$(function() {
    var vmAuth = new Vue({
        el: '#vm',
        data: {
            email: '',
            passwd: ''
        },
        methods: {
            submit: function(event) {
                event.preventDefault();
                var
                    $form = $('#vm'),
                    email = this.email.trim().toLowerCase(),
                    data = {
                        email: email,
                        passwd: this.passwd==='' ? '' : CryptoJS.SHA1(email + ':' + this.passwd).toString()
                    };
                $form.postJSON('/api/authenticate', data, function(err, result) {
                    if (! err) {
                        location.assign('/');
                    }
                });
            }
        }
    });
});
    </script>
</head>
<body class="uk-height-1-1">
    <div class="uk-vertical-align uk-text-center uk-height-1-1">
        <div class="uk-vertical-align-middle" style="width: 320px">
            <p><a href="/" class="uk-icon-button"><i class="uk-icon-html5"></i></a> <a href="/">Awesome Python Webapp</a></p>
            <form id="vm" v-on="submit: submit" class="uk-panel uk-panel-box uk-form">
                <div class="uk-alert uk-alert-danger uk-hidden"></div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-envelope-o"></i>
                        <input v-model="email" name="email" type="text" placeholder="电子邮件" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <div class="uk-form-icon uk-width-1-1">
                        <i class="uk-icon-lock"></i>
                        <input v-model="passwd" name="passwd" type="password" placeholder="口令" maxlength="50" class="uk-width-1-1 uk-form-large">
                    </div>
                </div>
                <div class="uk-form-row">
                    <button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large"><i class="uk-icon-sign-in"></i> 登录</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

app

利用middle在处理URL之前，把cookie解析出来，并将登录用户绑定到request对象上，这样，后续的URL处理函数就可以直接拿到登录用户：

# 解释cookie，此处需要异步，进行阻塞等待。
async def cookie2user(cookie_str):
    '''
    Parse cookie and load user if cookie is valid.
    '''
    if not cookie_str:
        return None
    try:
        L = cookie_str.split('-') # 拆分字符串
        if len(L) != 3:
            return None
        uid, expires, sha1 = L
        if int(expires) < time.time(): #查看是否过期
            return None
        user = await User.find(uid)
        if user is None:
            return None
		# 用数据库生成字符串c并与cookie进行比较
        s = '%s-%s-%s-%s' % (uid, user.passwd, expires, _COOKIE_KEY)
        if sha1 != hashlib.sha1(s.encode('utf-8')).hexdigest():
            logging.info('invalid sha1')
            return None
        user.passwd = '******'
        return user
    except Exception as e:
        logging.exception(e)
        return None
# 提取并解析cookie并绑定在request对象上
async def auth_factory(app, handler):
    async def auth(request):
        logging.info('check user: %s %s' % (request.method, request.path))
        request.__user__ = None #初始化
        cookie_str = request.cookies.get(COOKIE_NAME) #读取cookie
        if cookie_str:
            user = await cookie2user(cookie_str)
            if user:
                logging.info('set current user: %s' % user.email)
                request.__user__ = user
        if request.path.startswith('/manage/') and (request.__user__ is None or not request.__user__.admin):
            return web.HTTPFound('/signin')
        return (await handler(request))
    return auth

这里注意将该middleware注册到app信息中。

app = web.Application(loop=loop, middlewares=[
    logger_factory, response_factory,auth_factory
])

参考博客
廖雪峰的官方网站
 Python廖雪峰实战web开发（Day10（下）-用户登录）

三川水祭

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网站搭建笔记精简版---廖雪峰WebApp实战-Day10:用户登陆（下）笔记

这里的登陆页面转换花了好长时间。为什么要使用cookie使用cookie验证后，网页右上角就会显示成当前的用户。Session功能可来封装保存用户状态的cookie，但每次均需要从session中取出用户登陆状态。但是由session作的webapp很难扩展。因此直接使用cookie验证。教程采用直接读取cookie的方式来验证用户登录，即每次用户访问任意URL，都会对cookie进行验证，...
复制链接

扫一扫