使用Python的Flask框架表单插件Flask-WTF实现Web登录验证

表单是让用户与我们的网页应用程序交互的基本元素。Flask 本身并不会帮助我们处理表单，但是 Flask-WTF 扩展让我们在我们的 Flask 应用程序中使用流行的 WTForms 包。这个包使得定义表单和处理提交容易一些。

Flask-WTF
我们想要使用 Flask-WTF 做的第一件事情（在安装它以后，GitHub项目页：https://github.com/lepture/flask-wtf ）就是在 myapp.forms 包中定义一个表单。

# ourapp/forms.py

from flask_wtf import Form
from wtforms import StringField, PasswordField
from wtforms.validators import DataRequired, Email

class EmailPasswordForm(Form):
 email = StringField('Email', validators=[DataRequired(), Email()])
 password = PasswordField('Password', validators=[DataRequired()])

在 Flask-WTF 0.9 版本以前，Flask-WTF 提供了针对 WTForms 字段以及验证器的自己的封装。你可能看到外面一大堆的代码是从 flask.ext.wtforms 中不是从 wtforms 中导入 TextField，PasswordField。
在 Flask-WTF 0.9 版本以后，我们应该直接从 wtforms 中导入这些字段和验证器。
我们定义的表单是一个用户登录表单。我们把它叫做 EmailPasswordForm()，我们可以重用这个同样的表单类（Form）去做其它的一些事情，像注册表单。这里我们没有去定义一个又长又没有用的表单，而是选择一个很常用的表单，只是为了给你们介绍使用 Flask-WTF 定义表单的方式。也许以后在正式项目中会定义一个特别复杂表单。对于表单中包含字段名称，我们建议使用一个清楚的名称，并且在一个表单中保持唯一。不得不说，对于一个长的表单，我们可能要给出一个更符合上文的字段名称。

登录表单可以替我们做一些事情。它能够保证我们应用程序的安全以防止 CSRF 漏洞，验证用户输入并且渲染适当的标记，这些标记是我们为表单定义的字段。

CSRF 保护和验证
CSRF 表示跨站请求伪造。CSRF 攻击是指第三方伪造（像一个表单提交）请求到一个应用程序的服务器。一个易受攻击的服务器假设从一个表单来的数据是来自它自己的网站并且采取相应的操作。

作为一个例子，比方说，一个邮件提供商可以让你通过提交一个表单来删除你的账号。表单发送一个 POST 请求到服务器上的 account_delete 端点并且当表单被提交的时候删除登录的账号。我们可以在自己的网站上创建一个表单，该表单发送一个 POST 请求到同一个 account_delete 端点。现在，如果我们让某人点击我们表单的提交按钮（或者通过 JavaScript 来这样做），邮件提供商提供的登录账号就会被删除掉。当然邮件提供商还不知道表单提交并不是发生在他们的网站上。

因此如何才能阻止 POST 请求来自别的网站？WTForms 通过在渲染每一个表单的时候生成一个唯一的令牌使得成为可能。生成的令牌会被传回到服务器，伴随着 POST 请求的数据，在表单被接受之前令牌必须接受服务器的验证。关键的是令牌是与存储在用户会话（cookies）的一个值有关并且会在一段时间后失效（默认是 30 分钟）。这种方式就能够保证提交一个有效表单的人就是加载页面的人（或者至少是使用同一电脑的人），而且他们只能在加载页面 30 分钟内这样做。

要开始使用 Flask-WTF 保护 CSRF，我们需要为我们的登录页定义一个视图。

# ourapp/views.py

from flask import render_template, redirect, url_for

from . import app
from .forms import EmailPasswordForm

@app.route('/login', methods=["GET", "POST"])
def login():
 form = EmailPasswordForm()
 if form.validate_on_submit():

  # Check the password and log the user in
  # [...]

  return redirect(url_for('index'))
 return render_template('login.html', form=form)

如果表单已经被提交和验证的话，我们可以继续登录的逻辑。如果它没有被提交的话（例如，只是一个 GET 请求），我们就要把表单对象传递给我们的模板，以便它能够被渲染。下面就是我们使用 CSRF 保护的时候模板的样子。

{# ourapp/templates/login.html #}

{% extends "layout.html" %}
{% endraw %}
<html>
 <head>
  <title>Login Page</title>
 </head>
 <body>
  <form action="{{ url_for('login') }}" method="post">
   <input type="text" name="email" />
   <input type="password" name="password" />
   {{ form.csrf_token }}
  </form>
 </body>
</html>

{% raw %}{{ form.csrf_token }}{% endraw %} 渲染了一个隐藏的字段，该字段包含那些奇特的 CSRF 令牌，并且当 WTForms 验证表单的时候会寻找这个字段。我们不用担心包含处理令牌的逻辑，WTForms 会主动帮我们去做。好哇！

自定义验证
除了由 WTForms 提供的内置的表单验证器（例如，Required()，Email() 等等），我们能创建我们自己的验证器。我们将通过编写一个 Unique() 验证器来说明如何创建自己的验证器，Unique() 验证器是用来检查数据库并且确保用户提供的值在数据库中不存在。这能够用于确保用户名或者邮箱地址还没有使用。没有 WTForms 的话，我们可能要在视图中做这些事情，但是现在我们可以在表单本身做些事情。

现在我们来定义一个简单的注册表单，其实这个表单和登录的表单几乎一样。只是会在后面给它添加一些自定义的验证器。

# ourapp/forms.py

from flask_wtf import Form
from wtforms import StringField, PasswordField
from wtforms.validators import DataRequired, Email

class EmailPasswordForm(Form):
 email = StringField('Email', validators=[DataRequired(), Email()])
 password = PasswordField('Password', validators=[DataRequired()])

现在我们要添加我们的验证器用来确保它们提供的邮箱地址不存在数据库中。我们把这个验证器放在一个新的 util 模块，util.validators。

# ourapp/util/validators.py
from wtforms.validators import ValidationError

class Unique(object):
 def __init__(self, model, field, message=u'This element already exists.'):
  self.model = model
  self.field = field

 def __call__(self, form, field):
  check = self.model.query.filter(self.field == field.data).first()
  if check:
   raise ValidationError(self.message)

这个验证器假设我们是使用 SQLAlchemy 来定义我们的模型。WTForms 期待验证器返回某种可调用的对象（例如，一个可调用的类）。

在 Unique() 的 \_\_init\_\_ 中我们可以指定哪些参数传入到验证器中，在本例中我们要传入相关的模型（例如，在我们例子中是传入 User 模型）以及要检查的字段。当验证器被调用的时候，如果定义模型的任何实例匹配表单中提交的值，它将会抛出一个 ValidationError。我们也可以添加一个具有通用默认值的消息，它将会被包含在 ValidationError 中。

现在我们可以修改 EmailPasswordForm，使用我们自定义的 Unique 验证器。

# ourapp/forms.py

from flask_wtf import Form
from wtforms import StringField, PasswordField
from wtforms.validators import DataRequired

from .util.validators import Unique
from .models import User

class EmailPasswordForm(Form):
 email = StringField('Email', validators=[DataRequired(), Email(),
  Unique(
   User,
   User.email,
   message='There is already an account with that email.')])
 password = PasswordField('Password', validators=[DataRequired()])

渲染表单
WTForms 也能帮助我们为表单渲染成 HTML 表示。WTForms 实现的 Field 字段能够渲染成该字段的 HTML 表示，所以为了渲染它们，我们只必须在我们模板中调用表单的字段。这就像渲染 csrf_token 字段。下面给出了一个登录模板的示例，在里面我们使用 WTForms 来渲染我们的字段。

{# ourapp/templates/login.html #}

{% extends "layout.html" %}
<html>
 <head>
  <title>Login Page</title>
 </head>
 <body>
  <form action="" method="post">
   {{ form.email }}
   {{ form.password }}
   {{ form.csrf_token }}
  </form>
 </body>
</html>

我们可以自定义如何渲染字段，通过传入字段的属性作为参数到调用中。

<form action="" method="post">
 {{ form.email.label }}: {{ form.email(placeholder='yourname@email.com') }}
 <br>
 {% raw %}{{ form.password.label }}: {{ form.password }}{% endraw %}
 <br>
 {% raw %}{{ form.csrf_token }}{% endraw %}
</form>

处理 OpenID 登录
现实生活中，我们发现有很多人都不知道他们拥有一些公共账号。一部分大牌的网站或服务商都会为他们的会员提供公共账号的认证。举个栗子，如果你有一个 google 账号，其实你就有了一个公共账号，类似的还有 Yahoo, AOL, Flickr 等。
为了方便我们的用户能简单的使用他们的公共账号，我们将把这些公共账号的链接添加到一个列表，这样用户就不用自手工输入了。

我们要把一些提供给用户的公共账号服务商定义到一个列表里面，这个列表就放到配置文件中吧 (fileconfig.py):

CSRF_ENABLED = True
SECRET_KEY = 'you-will-never-guess'

OPENID_PROVIDERS = [
 { 'name': 'Google', 'url': 'https://www.google.com/accounts/o8/id' },
 { 'name': 'Yahoo', 'url': 'https://me.yahoo.com' },
 { 'name': 'AOL', 'url': 'http://openid.aol.com/<username>' },
 { 'name': 'Flickr', 'url': 'http://www.flickr.com/<username>' },
 { 'name': 'MyOpenID', 'url': 'https://www.myopenid.com' }]

接下来就是要在我们的登录视图函数中使用这个列表了:

@app.route('/login', methods = ['GET', 'POST'])
def login():
 form = LoginForm()
 if form.validate_on_submit():
  flash('Login requested for OpenID="' + form.openid.data + '", remember_me=' + str(form.remember_me.data))
  return redirect('/index')
 return render_template('login.html',
  title = 'Sign In',
  form = form,
  providers = app.config['OPENID_PROVIDERS'])

我们从 app.config 中引入了公共账号服务商的配置列表，然后把它作为一个参数通过 render_template 函数引入到模板。

接下来要做的我想你也猜得到，我们需要在登录模板中把这些服务商链接显示出来。

<!-- extend base layout -->
{% extends "base.html" %}

{% block content %}
<script type="text/javascript">
function set_openid(openid, pr)
{
 u = openid.search('<username>')
 if (u != -1) {
  // openid requires username
  user = prompt('Enter your ' + pr + ' username:')
  openid = openid.substr(0, u) + user
 }
 form = document.forms['login'];
 form.elements['openid'].value = openid
}
</script>
<h1>Sign In</h1>
<form action="" method="post" name="login">
 {{form.hidden_tag()}}
 <p>
  Please enter your OpenID, or select one of the providers below:<br>
  {{form.openid(size=80)}}
  {% for error in form.errors.openid %}
  <span style="color: red;">[{{error}}]</span>
  {% endfor %}<br>
  |{% for pr in providers %}
  <a href="javascript:set_openid('{{pr.url}}', '{{pr.name}}');">{{pr.name}}</a> |
  {% endfor %}
 </p>
 <p>{{form.remember_me}} Remember Me</p>
 <p><input type="submit" value="Sign In"></p>
</form>
{% endblock %}

这次的模板添加的东西似乎有点多。一些公共账号需要提供用户名，为了解决这个我们用了点 javascript。当用户点击相关的公共账号链接时，需要用户名的公共账号会提示用户输入用户名， javascript 会把用户名处理成可用的公共账号，最后再插入到 openid 字段的文本框中。

下面这个是在登录页面点击 google 链接后显示的截图：

赞 (0)

相关推荐

  • Python模拟登录验证码（代码简单）

    废话不多说了,直接给大家贴代码了. import urllib import urllib2 import cookielib def getImg(picurl): ''' request for random_code picture and cookie ''' pic = opener.open(picurl).read() with open('./verifyImg.jpg','wb') as emptyPic: emptyPic.write(pic) def verifyImg(p

  • Python 用户登录验证的小例子

    复制代码 代码如下: #!/usr/bin/python#coding=gbk class User:    def __init__(self,username,password,age,sex):        self.username=username        self.password=password        self.age=age        self.sex=sex def tell(self):        print 'UserContext:Name:%s

  • Python模拟用户登录验证

    Python模拟用户登录验证

    本文实例为大家分享了Python模拟用户登录验证的具体代码,供大家参考,具体内容如下 1.功能简介 此程序模拟用户登录验证的过程,实现用户名输入.黑名单检测.用户有效性判别.密码输入及验证等.用户在3次以内输入正确密码登陆成功,连续输错3次密码登陆失败,且该用户名被记录在黑名单,黑名单中的用户被锁定不能再登陆. 2.实现方法 本程序采用python语言编写,将各项任务进行分解并用定义对应的函数来处理,从而使程序结构清晰,易于维护.主要编写了四个函数: login() #登陆函数,为主函数,完成用

  • Python实现简单登录验证

    本文实例为大家分享了简单的Python登录验证,供大家参考,具体内容如下 编写登录接口 要求:1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定 #coding=utf-8 __author__ = 'wangwc' import sys,os count = 0 locked = 0 mark_user = 0 mark_passwd = 0 #获取路径 def cur_file_dir(): path = sys.path[0] if os.path.isdir(path):

  • Python爬虫模拟登录带验证码网站

    Python爬虫模拟登录带验证码网站

    爬取网站时经常会遇到需要登录的问题,这是就需要用到模拟登录的相关方法.python提供了强大的url库,想做到这个并不难.这里以登录学校教务系统为例,做一个简单的例子. 首先得明白cookie的作用,cookie是某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据.因此我们需要用Cookielib模块来保持网站的cookie. 这个是要登陆的地址 http://202.115.80.153/ 和验证码地址 http://202.115.80.153/CheckCode.

  • 使用Python的Flask框架表单插件Flask-WTF实现Web登录验证

    使用Python的Flask框架表单插件Flask-WTF实现Web登录验证

    表单是让用户与我们的网页应用程序交互的基本元素.Flask 本身并不会帮助我们处理表单,但是 Flask-WTF 扩展让我们在我们的 Flask 应用程序中使用流行的 WTForms 包.这个包使得定义表单和处理提交容易一些. Flask-WTF 我们想要使用 Flask-WTF 做的第一件事情(在安装它以后,GitHub项目页:https://github.com/lepture/flask-wtf )就是在 myapp.forms 包中定义一个表单. # ourapp/forms.py fr

  • 关于ThinkPhp 框架表单验证及ajax验证问题

    之前的表单验证都是用js写的,这里也可以使用tp框架的验证.但是两者比较而言还是js验证比较好,因为tp框架验证会运行后台代码,这样运行速度和效率就会下降. 自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证.验证的代码要写在模型层即Model里面. 数据验证有两种方式: 静态方式:在模型类里面通过$_validate属性定义验证规则.静态方式定义好以后其它地方都可以使用. 动态方式:使用模型类的validate方法动态创建自动验证规

  • Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册

    动态验证:(不需要建Model模型) 1.建一个控制器,做表单操作(包含验证) <?php namespace Biaodan\Controller; use Think\Controller; class BiaodanController extends Controller { public function test() { if(empty($_POST))//如果$_POST空,显示添加页面, { $this->show(); } else //如果$_POST不为空,走验证,验证

  • CI框架表单验证实例详解

    本文实例讲述了CI框架表单验证的方法.分享给大家供大家参考,具体如下: 1.form头部信息的自动输出函数(view) <?php $attributes = array('class' => 'email', 'id' => 'myform'); echo form_open('email/send', $attributes); //上面一行代码输出: //<form method="post" accept-charset="utf-8"

  • Yii框架表单提交验证功能分析

    本文实例讲述了Yii框架表单提交验证功能.分享给大家供大家参考,具体如下: 一.前端提交的三种方式 前面已经提出,表单提交一共只有三种方式. 1. 前端原生html (1)原生html标签 首先,直接使用html标签的input,a等: 其次,使用css进行布局. 再次,使用js或jquery方式验证 最后,提交(get/post/ajax,目前较多使用jquery提交). 注:该种方式由于较灵活,使用最多. (2)原生form js或jquery方式验证,yii方式提交. 相对灵活 <form

  • ThinkPHP框架表单验证操作方法

    ThinkPHP框架表单验证操作方法

    自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证.分为静态验证和动态验证. 一.静态验证 (1)在Home/Controller/路径下新建Index控制器.IndexController IndexController.class.php页面 注意:静态定义方式因为必须定义模型类,所以只能用D函数实例化模型 create方法是对表单提交的POST数据进行自动验证 <?php namespace Home\Controller; u

  • 快速学习jQuery插件 Form表单插件使用方法

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields() 和 resetForm()等.

  • 分享27款非常棒的jQuery 表单插件

    分享27款非常棒的jQuery 表单插件

    本文收集了非常棒的jQuery表单插件与大家分享,欢迎大家推荐更多更好的插件. 1- jQuery inline form validation 2- Uniform 3- Autotab 4- jquery Niceforms 5- jquery Form Validator 6- Toggle FormText plug-in 7- jQuery Field Plug-in 8- In-Field Labels jQuery Plugin 9- jQuery Comment Preview

  • jquery表单插件Autotab使用方法详解

    Autotab也是一款功能专一的表单插件,它提供了自动跳格的功能,当用户输入的字符数一旦超过已定义的最大长度,则会根据事先设置的目标自动跳转到相应元素上,省却了 用户按[Tab]键的麻烦.最典型的应用就是输入IP地址.软件激活码等地方了,我们做的web项目中也有很多地方可以用到这插件,对于提高用户体验还是很有帮助的. 使用时需要引入jquery.autotab.js,下载地址:点击进入下载页面 <html> <head> <title> New Document <

  • jQuery表单插件ajaxForm实例详解

    前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t

随机推荐