Python3教程Web开发实战梳理-day10(用户注册和登录)
2017-07-31 10:14
267 查看
Day10(上)-注册
用户管理是绝大部分Web网站都需要解决的问题。用户管理涉及到用户注册和登录。通过API把实现用户注册功能。
API与MVC的区别:
mvc主要用于建站,web api主要用于构建http服务,API更抽象,更不注重View的生成。
编写的API必须有以下几点功能:
验证注册信息 对用户密码进行加密,这里使用SHA1单向算法,并储存到数据库 发送对应的cookie到浏览器
在handlers.py中编写注册部分代码:
@get('/register') #呈现注册页面 def register(): return { '__template__': 'register.html' } _RE_EMAIL = re.compile(r'^[a-z0-9\.\-\_]+\@[a-z0-9\-\_]+(\.[a-z0-9\-\_]+){1,4}$') _RE_SHA1 = re.compile(r'^[0-9a-f]{40}$') #正则表达式参考 http://www.cnblogs.com/vs-bug/archive/2010/03/26/1696752.html #API函数 @post('/api/users') #注意这里路径是'/api/users',而不是`/register` def api_register_user(*, email, name, passwd): if not name or not name.strip(): raise APIValueError('name') if not email or not _RE_EMAIL.match(email): raise APIValueError('email') if not passwd or not _RE_SHA1.match(passwd): raise APIValueError('passwd') users = yield from User.findAll('email=?', [email]) #查询邮箱是否已注册 if len(users) > 0: raise APIError('register:failed', 'email', 'Email is already in use.') #接下来就是注册到数据库上, #这里用来注册数据库表id不是使用User类中的默认id生成,而是调到外部来,原因是后面的密码存储摘要算法时,会把id使用上。 uid = next_id() sha1_passwd = '%s:%s' % (uid, passwd) user = User(id=uid, name=name.strip(), email=email, passwd=hashlib.sha1(sha1_passwd.encode('utf-8')).hexdigest(), image='http://www.gravatar.com/avatar/%s?d=mm&s=120' % hashlib.md5(email.encode('utf-8')).hexdigest()) yield from user.save() # make session cookie: #制作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
注意用户口令是客户端传递的经过SHA1计算后的40位Hash字符串,所以服务器端并不知道用户的原始口令。
接下来可以创建一个注册页面,并且依旧是jinja2模板,让用户填写注册表单,然后,提交数据到注册用户的API:
register.html:
{% e 1154d xtends '__base__.html' %} {% block title %}注册{% endblock %} {% block beforehead %} <script> function validateEmail(email) { var re = /^[a-z0-9\.\-\_]+\@[a-z0-9\-\_]+(\.[a-z0-9\-\_]+){1,4}$/; return re.test(email.toLowerCase()); } $(function () { var vm = new Vue({ el: '#vm', data: { name: '', email: '', password1: '', password2: '' }, methods: { submit: function (event) { event.preventDefault(); var $form = $('#vm'); if (! this.name.trim()) { return $form.showFormError('请输入名字'); } if (! validateEmail(this.email.trim().toLowerCase())) { return $form.showFormError('请输入正确的Email地址'); } if (this.password1.length < 6) { return $form.showFormError('口令长度至少为6个字符'); } if (this.password1 !== this.password2) { return $form.showFormError('两次输入的口令不一致'); } var email = this.email.trim().toLowerCase(); $form.postJSON('/api/users', { name: this.name.trim(), email: email, passwd: CryptoJS.SHA1(email + ':' + this.password1).toString() }, function (err, r) { if (err) { return $form.showFormError(err); } return location.assign('/'); }); } } }); $('#vm').show(); }); </script> {% endblock %} {% block content %} <div class="uk-width-2-3"> <h1>欢迎注册!</h1> <form id="vm" v-on="submit: submit" class="uk-form uk-form-stacked"> <div class="uk-alert uk-alert-danger uk-hidden"></div> <div class="uk-form-row"> <label class="uk-form-label">名字:</label> <div class="uk-form-controls"> <input v-model="name" type="text" maxlength="50" placeholder="名字" class="uk-width-1-1"> </div> </div> <div class="uk-form-row"> <label class="uk-form-label">电子邮件:</label> <div class="uk-form-controls"> <input v-model="email" type="text" maxlength="50" placeholder="your-name@example.com" class="uk-width-1-1"> </div> </div> <div class="uk-form-row"> <label class="uk-form-label">输入口令:</label> <div class="uk-form-controls"> <input v-model="password1" type="password" maxlength="50" placeholder="输入口令" class="uk-width-1-1"> </div> </div> <div class="uk-form-row"> <label class="uk-form-label">重复口令:</label> <div class="uk-form-controls"> <input v-model="password2" type="password" maxlength="50" placeholder="重复口令" class="uk-width-1-1"> </div> </div> <div class="uk-form-row"> <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-user"></i> 注册</button> </div> </form> </div> {% endblock %}
到这就完成了用户注册的功能。
Day10(下)-登录
用户登录比用户注册复杂。由于HTTP协议是一种无状态协议,而服务器要跟踪用户状态,就只能通过cookie实现。大多数Web框架提供了Session功能来封装保存用户状态的cookie。
Session的优点是简单易用,可以直接从Session中取出用户登录信息。
我们采用直接读取cookie的方式来验证用户登录,每次用户访问任意URL,都会对cookie进行验证,这种方式的好处是保证服务器处理任意的URL都是无状态的,可以扩展到多台服务器。
由于登录成功后是由服务器生成一个cookie发送给浏览器,所以,要保证这个cookie不会被客户端伪造出来。
实现防伪造cookie的关键是通过一个单向算法(例如SHA1)
在编写登录界面是,我们发现当一个正确的密码输入,会经历以下步骤:
首先会由网页中的JavaScript取得对应的值,并按照如下组合方式,进行摘要算法计算出一个字符串(A):
`"email" + ":" + "passwd"`
然后字符串(A)被以密码的形式传递到API内,在API内,字符串(A)再一次按照如下组合方式,进行摘要算法计算出一个字符串(B),并保存到服务器数据库上。
`"用户id" + ":" + 字串符(A)`
到了最后制作cookie发送给浏览器时,又使用字符串(B)按照如下组合方式,进行摘要算法计算出一个字符串(C):
`"用户id" + 字串符(B) + "到期时间" + "密匙"`
最后再按照如下组合方式,生成一个字串符(D)发送给浏览器
"用户id" + "到期时间" + 字符串(C)`
所以浏览器实际收到的信息有:用户id、过期时间、SHA1值(字串符(C))
在cookie未到过期的期间,当服务器验证cookie是否伪造时,其实只需根据用户信息在数据库查找相应的用户口令(即字符串(B)),再使用其进行摘要算法与cookie中的字符串(C)比较是否等价,就可以知道是否伪造了。
这个算法的关键在于SHA1是一种单向算法,即可以通过原始字符串计算出SHA1结果,但无法通过SHA1结果反推出原始字符串。
依旧在handlers.py中编写登录的API函数:
@get('/signin') def signin(): return { '__template__': 'signin.html' } COOKIE_NAME = 'awesession'#用来在set_cookie中命名 _COOKIE_KEY = config['session']['secret']#导入默认设置 @post('/api/authenticate') def authenticate(*, email, passwd): if not email: raise APIValueError('email', 'Invalid email.') if not passwd: raise APIValueError('passwd', 'Invalid password.') users = yield from 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: #制作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
对于每个URL处理函数,如果我们都去写解析cookie的代码,那会导致代码重复很多次。
day5的任务中我们曾引入了middle。利用middle在处理URL之前,把cookie解析出来,并将登录用户绑定到request对象上,这样,后续的URL处理函数就可以直接拿到登录用户:
解析cookie的函数:
# 解密cookie: @asyncio.coroutine 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 = yield from User.find(uid) if user is None: return None 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并绑定在request对象上:
@asyncio.coroutine def auth_factory(app, handler): @asyncio.coroutine def auth(request): logging.info('check user: %s %s' % (request.method, request.path)) request.__user__ = None cookie_str = request.cookies.get(COOKIE_NAME) if cookie_str: user = yield from 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 (yield from handler(request)) return auth
登录界面的源码代signin.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>
相关文章推荐
- Python廖雪峰实战web开发(Day10(上)-用户注册)
- Python3教程Web开发实战梳理-day11(编写日志创建页MVVC)
- Python3教程Web开发实战梳理-day4(编写Model)
- Python3教程Web开发实战梳理-day5(Web框架)
- 用Python实现web端用户登录和注册功能的教程
- Python3教程Web开发实战梳理-day3(编写ORM)
- 用Python实现web端用户登录和注册功能的教程
- Python3教程Web开发实战梳理-day8(构建前端)
- Python3教程Web开发实战梳理-day1+day2(开发环境与基本骨架)
- Python3教程Web开发实战梳理-day7(编写MVC)
- Python3教程Web开发实战梳理-day6(配置文件)
- Android实战简易教程-第二十三枪(基于Baas的用户注册和登录模块实现!)
- Python3教程Web开发实战梳理-day9(编写API)
- Python3教程Web开发实战梳理-day12(编写日志列表页)
- Python基础-项目实战-day10 用户注册与登陆
- Yii2系列教程四:实现用户注册,验证,登录
- Python 实现简单的用户注册和登录
- php,与ucenter同步用户登录,注册的教程
- 简明Python教程(四)———用户登录验证
- Android实战简易教程-第二十三枪(基于Baas的用户注冊和登录模块实现!)