原文： http://www.catonlinepy.tech/
聲明： 原創不易，未經許可，不得轉載
接第5天上篇的內容，我們接着介紹用戶註冊功能的實現
3. 用戶的註冊
3.1 註冊表單及前端渲染
根據經驗，當我們在登錄某個應用時，如果我們沒有在平臺註冊過賬號，平臺會提醒我們註冊一個賬號，註冊成功後方可進行登陸。與登錄頁面的實現類似，前端的註冊頁面也需要後臺傳入註冊表單，然後Jinjia2將表單渲染成前端瀏覽器能解析的form表單。由於註冊頁面通常要求用戶輸入電子郵箱，用戶名，密碼以及確認密碼，下面我們首先在forms.py文件中增加註冊表單類registerForm：
# forms.py文件中新增的內容
# ..
# 在wtforms中還需要導入StringField，ValidationError字段
from wtforms import PasswordField, BooleanField, SubmitField, StringField，ValidationError
# 在validators驗證器中還需要導入EqualTo, InputRequired驗證器
from wtforms.validators import DataRequired, Length, EqualTo, InputRequired
# 在def兩個函數中使用到User模型，需要導入
from userauth_demo.models import User
# ..
class registerForm(FlaskForm):
username = StringField(u'用戶名',
validators=[DataRequired(), Length(min=2, max=20)])
email = EmailField(u"郵箱",
validators=[DataRequired(), Length(min=2, max=20)])
password = PasswordField(u'密碼',
validators=[InputRequired(), EqualTo(u"confirm_password", message="兩次輸入的密碼不一致！")])
confirm_password = PasswordField(u'確認密碼',
validators=[DataRequired()])
submit = SubmitField(u'註冊')
def validate_username(self, username):
user = User.query.filter_by(username=username.data).first()
if user is not None:
raise ValidationError('該用戶名已被註冊！')
def validate_email(self, email):
user = User.query.filter_by(email=email.data).first()
if user is not None:
raise ValidationError('該郵箱已被註冊！')在上面的註冊表單類registerForm中，爲了減少輸入錯誤的風險，使用到了password和confirm_password，password密碼中用到了EqualTo驗證器，它需要與confirm_password中輸入的密碼一致才通過驗證。這個註冊表單中還使用到了兩個自定義函數，它們以validate開頭，後面接上_<fieldname>，這裏的filedname都是WTForms提供的自定義字段，當前端用戶點提交按鍵時，就會觸發這兩個函數的調用。在這裏，當用戶提供了註冊信息後，會在數據庫中的user表中進行查詢，如果用戶名和郵箱不存在，則可順利的完成註冊，否則，就會執行if語句內的錯誤提醒程序，這些錯誤提醒會在瀏覽器頁面渲染出來。
註冊表單寫好後，需要在前端HTML模板中渲染表單，它與登陸功能的模板類似，在register.html文件中輸入如下內容：
<!-- register.html 文件中的內容-->
{% extends "layout.html" %}
{% block content %}
<h2>註冊</h2>
<form action="" method="post">
<!--防跨站僞造請求-->
{{html_form.hidden_tag() }}
<div>
{{ html_form.username.label }}<br />
{{ html_form.username() }}
{% if html_form.username.errors %}
<div >
{% for error in html_form.username.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% endif %}
</div>
<div>
{{ html_form.email.label }}<br />
{{ html_form.email() }}
{% if html_form.email.errors %}
<div >
{% for error in html_form.email.errors %}
<span>{{ error }}</span>
{% endfor %}
</div>
{% endif %}
</div>
<div>
{{ html_form.password.label }}<br />
{{ html_form.password() }}
</div>
<div>
{{ html_form.confirm_password.label }}<br />
{{ html_form.confirm_password() }}
</div>
<div>
{{ html_form.submit() }}
</div>
</form>
<!-- 添加跳轉到登陸頁面的超鏈接 -->
<p>
已經有賬戶? <a href="{{ url_for('login')}}">登陸</a>
</p>
{% endblock content %}3.2 爲註冊表單編寫路由函數
在編寫路由函數之前，先來講講密碼哈希的重要性。因爲在註冊頁面中，用戶需要輸入密碼，而密碼最終需要存入到數據庫中的，但是如果把明文密碼存到數據庫，這是一件很危險的事兒。假如數據庫被黑客獲取後（脫褲），用戶的個人賬號、密碼就完全泄漏給了黑客。這時，就需要有工具將密碼加密後再寫到數據庫。flask_bcrypt就是幹這個活兒的插件，負責對明文密碼進行加密操作，下面先在虛擬環境中安裝這個插件：
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5$ pip install Flask_Bcrypt安裝完成後，我們先在python shell中練練手，熟悉熟悉這個插件的基本用法：
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day5$ python
Python 3.6.7 (default, Oct 22 2018, 11:32:17)
[GCC 8.2.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> from flask_bcrypt import Bcrypt # 從flask_bcrypt中導入Bcrypt類
>>> bcrypt = Bcrypt() # 對Bcrypt()進行實例
>>> bcrypt.generate_password_hash('miaojie') # 產生哈希密碼
b'$2b$12$4D2eChUFV45DkC/VMsc0.u3JSjkSPvSZHHtokDHmrhD7tnKldFf/a'
>>> bcrypt.generate_password_hash('miaojie').decode('utf-8') # 對哈希密碼進行解碼
'$2b$12$Q8.Io9ld5mwXiCKc2TiWI.8c7FPDwh440zo80NkwUwvtebXy.8xoO'
>>> bcrypt.generate_password_hash('miaojie').decode('utf-8') # 每次產生的密碼會不一樣，這使得得通過哈希過的密碼無法查看它原始的密碼
'$2b$12$YXKa1TSyROPvpprL7UfjOOoWdq16z/ZH2n8dpn8tCc8nDTwNoB.Jm'
>>> hashed_password = bcrypt.generate_password_hash('miaojie').decode('utf-8')
>>> bcrypt.check_password_hash(hashed_password,'password') # 哈希過的密碼和明文密碼進行對比，匹配則返回True,不匹配則返回False
False
>>> bcrypt.check_password_hash(hashed_password,'miaojie')
True
>>> 熟悉了flask_bcrypt插件後，我們就可以使用它了，在__init__.py文件中添加bcrypt對象，如下所示：
# 在__init__.py文件中新增的內容
# ..
# 從flask_bcrypt中導入Bcrypt類
from flask_bcrypt import Bcrypt
# Bcrypt()的實例
bcrypt = Bcrypt()
# ..在routes.py文件中新增註冊表單的路由函數register，如下所示：
# ..
from userauth_demo.forms import registerForm
from userauth_demo import db,bcrypt
from userauth_demo.models import User
# ..
@app.route("/register", methods=["GET", "POST"])
def register():
if current_user.is_authenticated:
return redirect(url_for('index'))
form = registerForm()
# 發送post請求
if form.validate_on_submit():
hashed_password = bcrypt.generate_password_hash(form.password.data).decode('utf-8')
user = User(username=form.username.data, email=form.email.data, password=hashed_password)
db.session.add(user)
db.session.commit()
flash('該用戶名已註冊，請登陸！', 'success')
return redirect(url_for('login'))
return render_template('register.html', title="第五天", html_form=form)當用戶填寫完註冊信息，點擊註冊按鍵後，就會向後臺發送post請求，後臺接收到post請求後，會將用戶名、郵箱以及哈希後的密碼保存到數據庫中。註冊成功後，提示flash消息，並重定向到登陸頁面。如果是發送get請求，則直接會對模板進行渲染，顯示出註冊頁面的表單。
通過python run.py將web程序拉起，開始驗證結果，在瀏覽器中輸入http://127.0.0.1:5005/register，效果圖如下所示：
如圖，在註冊表單中輸入用戶名、郵箱及密碼，點擊註冊按鈕後，如果註冊成功，就會跳轉到下圖所示的登陸頁面。
4. 真正的登錄過程
上面我們在註冊頁面的最下方，添加了跳轉到登陸頁面的超鏈接，這裏也需要在登陸頁面的最下方添加跳轉到註冊頁面的超鏈接，方便未註冊的用戶快速找到註冊頁面。這裏在login.html文件的<form></form>標籤下方添加註冊超鏈接：
<! --login.html文件中添加註冊鏈接-->
# ..
<p>
沒有賬號? <a href="{{ url_for('register')}}">註冊</a>
</p>
# ..效果如下所示：
4.1 登陸用戶
在第5天上篇的課程中，我們完成了登陸表單路由函數的實現。其中，當用戶發送post請求時，後臺直接使用了假的郵箱和密碼（不是從數據庫中讀取出來的用戶信息）進行驗證。但是真實的登錄過程中，後臺程序通過用戶輸入的郵箱，從數據庫中讀取出用戶的密碼信息，然後將數據庫中的密碼與用戶在前端輸入的密碼進行比較，如果用戶輸入的密碼是正確的，就將該用戶標記爲登錄狀態，否則就提示用戶密碼輸入錯誤。修改routes.py文件的內容，添加用戶登錄認證的代碼：
# routes.py文件中修改登陸表單路由函數
# ..
# 從userauth_demo中導入bcrypt實例
from userauth_demo import db, bcrypt
# 從flask_login中導入login_user函數
from flask_login import current_user, login_user
# 從userauth_demo.models中導入User模型
from userauth_demo.models import User
#..
@app.route('/login', methods=['GET','POST'])
def login():
if current_user.is_authenticated:
return redirect(url_for('index'))
# 對類LoginForm的實例
form = LoginForm()
if form.validate_on_submit():
user = User.query.filter_by(email=form.email.data).first()
if user and bcrypt.check_password_hash(user.password, form.password.data):
login_user(user, remember=form.remember.data)
else:
flash('登陸不成功，請檢查郵箱和密碼！', 'danger')
return render_template('login.html', title='第五天', html_form=form)
# ..我們對上面代碼的工作流程進行簡單的講解：首先，用戶發送post請求後，後臺接收到該請求後，通過用戶輸入的郵箱從數據庫中找到該用戶，再使用first()方法返回第一個匹配的用戶。接下來的if語句判斷該用戶是否存在，並且使用check_password_hash函數驗證用戶輸入的密碼是否和數據庫中的密碼一致，如果條件都滿足則會執行login_user()函數，並將用戶登陸狀態記爲已登陸，否則，會執行else語句，flash消息提示登陸不成功，請檢查郵箱和密碼。
4.2 頁面訪問權限控制
web開發過程中，經常會碰到網頁權限控制的問題，即有些頁面需要登錄狀態才能訪問，Flask_Login直接爲我們提供了該功能：如果用戶訪問的頁面需要登錄權限，而此時用戶不是處於登錄狀態，則會強制用戶跳轉到登錄頁面。爲了實現這個功能，Flask_Login需要知道哪個視圖函數用於處理登陸機制，在__init__.py文件中的添加如下代碼：
# 在__init__.py文件中添加內容
login_manager = LoginManager(app)
login_manager.login_view = 'login' #login是登錄頁面視圖函數的函數名Flask_Login使用@login_required裝飾器讓已通過認證的用戶進行訪問，如果將該裝飾器放到@app.route裝飾器下的視圖函數上面時，則該路由函數受到保護，不會讓匿名（未登錄）的用戶進行訪問，Flask-Login 會攔截請求，把用戶發往登錄頁面。對routes.py文件進行修改，如下所示：
# routes.py文件中添加內容
# ..
# 從flask_login中導入login_required類
from flask_login import current_user, login_user, login_required
# ..
@app.route('/')
# 在主頁的視圖函數上面加上@login_required裝飾器
@login_required
def index():
return render_template('index.html', title='第五天')此時，我們在未登錄狀態下訪問主頁/，則會跳轉到如下圖所示的登錄頁面：
login_required裝飾器攔截請求並將主頁重定向到登錄頁面，此時URL中還包含其它的信息，如/login?next=%2F。next參數可以幫助用戶在登錄成功後，直接跳轉到之前沒有權限訪問的頁面。下面這段代碼，展示瞭如何查詢和處理next參數，在routes.py中進行修改：
# routes.py文件中添加內容
# 從flask中導入request
from flask import render_template, redirect, url_for, flash, request
# ..
@app.route('/login', methods=['GET','POST'])
def login():
if current_user.is_authenticated:
return redirect(url_for('index'))
form = LoginForm()
if form.validate_on_submit():
user = User.query.filter_by(email=form.email.data).first()
if user and bcrypt.check_password_hash(user.password, form.password.data):
login_user(user, remember=form.remember.data)
# 查詢next參數
nextpage = request.args.get('next')
# 對next參數進行處理
if nextpage:
return redirect(nextpage)
else:
url = url_for('index')
return redirect(url)
else:
flash('登陸不成功，請檢查郵箱和密碼！', 'danger')
return render_template('login.html', title='第五天', html_form=form)
# ..request.args.get可以得到next的參數賦值給nextpage，下面的if語句判斷nextpage是否存在，如果存在，則直接重定向到nextpage所在頁面，如果不存在，則會重定向到主頁。
下面，我們在登錄頁面輸入正確的用戶郵箱和密碼，點擊登陸按鈕後頁面將重定向到主頁，效果如下圖所示:
4.3 用戶註銷
通常當用戶登錄後，想要退出登錄狀態，那麼註銷功能也是必須的，借用Flask_Login的logout_user()函數，可以輕鬆的實現用戶的註銷功能。在routes.py文件中添註銷功能的代碼，如下：
# routes.py文件中添加的內容
# ..
# 從flask_login中導入logout_user類
from flask_login import current_user, login_user, login_required, logout_user
# ..
# 添加註銷功能的視圖函數
@app.route('/logout')
def logout():
logout_user()
return redirect(url_for('index'))此外，還需要在基模板中添加註銷的前端代碼，修改layout.html文件中的內容：
<! -- layout.html文件中添加內容 -->
# ..
<header>
<div>
<a href="{{ url_for('index') }}">主頁</a>
{% if current_user.is_authenticated() %}
<a href="{{ url_for('logout') }}">註銷</a>
{% else %}
<a href="{{ url_for('login') }}">登陸</a>
{% endif %}
</div>
</header>
#..添加完以上代碼後，我們只需刷新一下主頁，就會在主頁看到新增的註銷按鈕，效果圖如下所示：
5. 總結
學習完今天的內容，我們掌握瞭如下技能：
- 學習了Flask_Login插件的基本使用方法
- 學習瞭如何對明文密碼進行加密、比對
- 學習瞭如何利用數據庫完成用戶註冊功能
- 學習瞭如何實現用戶的登陸及頁面權限管理
- 學習瞭如何控制用戶的登錄狀態和註銷狀態
下一課的教程，貓姐將帶領大家一起學習個人主頁的實現及用戶頭像功能的管理。今天的內容就到這裏，喜歡的同學們可以在下面點贊留言，或是訪問我的博客地址：http://www.catonlinepy.tech/ 加入我們的QQ羣進一步交流學習！
6. 代碼的獲取
大家可以到github上獲取今天教程的所有代碼：https://github.com/miaojie19/...
具體下載代碼的命令如下：
# 使用git命令下載flask-course-primary倉庫所有的代碼
git clone https://github.com/miaojie19/flask-course-primary.git
# 下載完成後，進入day5目錄下面，即可看到今天的代碼
cd flask-course-primary
cd day5