用户登录比用户注册复杂。由于HTTP协议是一种无状态协议,而服务器要跟踪用户状态,就只能通过
cookie
实现。
大多数Web框架提供了Session
功能来封装保存用户状态的cookie
,使用Session
的Web App很难扩展。
这里采用直接读取cookie
的方式来验证用户登录,每次用户访问任意URL,都会对cookie
进行验证(比方说,假如不验证左上角的用户栏会一直是请登录
状态等等),这种方式的好处是保证服务器处理任意的URL都是无状态的,可以扩展到多台服务器。
1. 用户登录
1.1 编写用户登录API
用户登录之后服务器会生成一cookie
发送给浏览器,所以,要保证这个cookie
不会被客户端伪造出来。
由上一章也知道,实现防伪造cookie的关键是通过一个单向算法。
查看上一章的代码,并不难发现当一个正确的密码输入,会经历以下步骤:
- 首先会由网页中的
javascript
取得对应的值,并按照如下组合方式,进行摘要算法计算出一个字符串(A):
"email" + ":" + "passwd"
- 然后字符串(A)被以密码的形式传递到API内,在API内,字符串(A)再一次按照如下组合方式,进行摘要算法计算出一个字符串(B),并保存到服务器数据库上。
"用户id" + ":" + 字串符(A)
- 到了最后制作
cookie
发送给浏览器时,又使用字符串(B)按照如下组合方式,进行摘要算法计算出一个字符串©:
"用户id" + 字串符(B) + "到期时间" + "密匙"
最后再按照如下**组合方式**,生成一个字串符(D)发送给浏览器
"用户id" + "到期时间" + 字符串(C)
所以浏览器实际收到的信息有:用户id、过期时间、SHA1值(字串符©)
在cookie
未到过期的期间,当服务器验证cookie
是否伪造时,其实只需根据用户信息在数据库查找相应的用户口令(即字符串(B)),再使用其进行摘要算法与cookie
中的字符串©比较是否等价,就可以知道是否伪造了。
先编写用户登录API:
#导入模块。。。
#显示登录页面
@get('/signin')
def signin():
return {
'__template__': 'signin.html'
}
COOKIE_NAME = 'awesession'#用来在set_cookie中命名
_COOKIE_KEY = config['session']['secret']#导入默认设置
#验证登录信息
@post('/api/authenticate')
async def authenticate(*,email,passwd):
if not email:
raise APIValueError('email')
if not passwd:
raise APIValueError('passwd')
users = await User.findall(where='email=?',args=[email])
if len(users) == 0:
raise APIValueError('email','Email not exist.')
user = user[0]#此时finall得出来的数值是一个仅含一个dict的list,就是sql语句返回什么类型的数据自己忘了
#把登录密码转化格式并进行摘要算法
sha1 = hashlib.sha1()
sha1.update(user.id.encode('utf-8'))
sha1.update(b':')
sha1.update(passwd.encode('utf-8'))
if sha1.hexdigest() != user.passwd:#与数据库密码比较
raise APIValueError('password','Invaild password')
#制作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
1.2 编写解析cookie
代码
由于每次用户访问任意URL,都会对cookie
进行验证,也就是说这对于每个URL处理函数,如果我们都要去写解析cookie的代码,那会导致代码重复很多次。
还记得Day5编写web框架时引入的middleware
吗?
利用
middleware
在处理URL之前,把cookie解析出来,并将登录用户绑定到request对象上,这样,后续的URL处理函数就可以直接拿到登录用户。
编写解析cookie代码:
#解释cookie
async def cookie2user(cookie_str):
if not cookie_str:
return None
try:
L = cookie_str.split('-') #拆分字符串(D)
if len(L) !=3:
return None
uid, expires, sha1 = L
if float(expires) < time.time():#查看是否过期,这里廖大用的是int,但是字符串用int的时候,只能全是数字,不能含小数点
return None
user = await User.find(uid)
if not user:
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
编写middleware
解析cookie
工厂函数:
#提取并解析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
return await handler(request)
return auth
最后附上登录页面的源码:
<!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>
编辑完代码后,进入网站进行登录,登录过后返回首页,发现左上角的用户状态还是请登录
状态,这时查看一下Jinja2
父模板,发现原来用户状态还需自己导进去,这时在URL处理函数上加多一个request
参数以及编写导进去的代码,例如:
@get('/')
def index(request):
summary = 'Hello,World.'
blogs = [
Blog(id='1', name='Test Blog', summary=summary, create_at=time.time()-120),
Blog(id='2', name='Something New', summary=summary, create_at=time.time()-3600),
Blog(id='3', name='Learn Swift', summary=summary, create_at=time.time()-7200)
]
return {
'__template__': 'blogs.html',
'blogs': blogs,
'__user__': request.__user__
}