Verwendung des Flask-Framework-Formular-Plug-ins Flask-WTF von Python zur Implementierung der Web-Login-Überprüfung

# 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()])

Vor Flask-WTF Version 0.9 stellte Flask-WTF eine eigene Verpackung für WTForms-Felder und Validatoren bereit. Möglicherweise sehen Sie draußen viel Code, der TextField und PasswordField aus flask.ext.wtforms und nicht aus wtforms importiert.
Nach Flask-WTF Version 0.9 sollten wir diese Felder und Validatoren direkt aus wtforms importieren.
Das von uns definierte Formular ist ein Benutzeranmeldeformular. Wir nennen es EmailPasswordForm() und können dieselbe Formularklasse (Form) für andere Dinge wie Registrierungsformulare wiederverwenden. Hier definieren wir kein langes und nutzloses Formular, sondern wählen ein sehr häufig verwendetes Formular aus, nur um Ihnen vorzustellen, wie Sie Flask-WTF zum Definieren eines Formulars verwenden. Vielleicht wird in Zukunft in einem formalen Projekt eine besonders komplexe Form definiert. Für Formulare, die Feldnamen enthalten, empfehlen wir die Verwendung eines Namens, der innerhalb eines Formulars eindeutig und eindeutig ist. Es muss gesagt werden, dass wir für eine Langform möglicherweise einen Feldnamen vergeben müssen, der besser mit dem oben Gesagten übereinstimmt.

Anmeldeformulare können einiges für uns tun. Es schützt unsere Anwendung vor CSRF-Schwachstellen, validiert Benutzereingaben und rendert geeignete Markups für die Felder, die wir für unsere Formulare definieren.

CSRF-Schutz und -Verifizierung
CSRF steht für Cross-Site Request Forgery. Ein CSRF-Angriff liegt vor, wenn ein Dritter eine Anfrage (z. B. eine Formularübermittlung) an den Server einer Anwendung fälscht. Ein anfälliger Server geht davon aus, dass die Daten eines Formulars von seiner eigenen Website stammen und handelt entsprechend.

Angenommen, ein E-Mail-Anbieter ermöglicht Ihnen die Löschung Ihres Kontos durch Absenden eines Formulars. Das Formular sendet eine POST-Anfrage an den Endpunkt „account_delete“ auf dem Server und löscht das angemeldete Konto, wenn das Formular gesendet wird. Wir können auf unserer Website ein Formular erstellen, das eine POST-Anfrage an denselben Account_delete-Endpunkt sendet. Wenn wir nun zulassen, dass jemand auf unserem Formular auf die Schaltfläche „Senden“ klickt (oder dies über JavaScript tut), wird der vom E-Mail-Anbieter bereitgestellte Login entfernt. Natürlich weiß der E-Mail-Anbieter noch nicht, dass die Formularübermittlung nicht auf seiner Website erfolgt.

Wie kann ich also verhindern, dass POST-Anfragen von anderen Websites kommen? WTForms macht dies möglich, indem beim Rendern jedes Formulars ein eindeutiger Token generiert wird. Das generierte Token wird zusammen mit den Daten in der POST-Anfrage an den Server zurückgesendet und das Token muss vom Server validiert werden, bevor das Formular akzeptiert werden kann. Entscheidend ist, dass das Token mit einem in der Sitzung des Benutzers gespeicherten Wert (Cookies) verknüpft ist und nach einer bestimmten Zeitspanne abläuft (Standard sind 30 Minuten). Auf diese Weise stellen Sie sicher, dass die Person, die ein gültiges Formular einreicht, dieselbe Person ist, die die Seite geladen hat (oder zumindest dieselbe Person, die denselben Computer verwendet), und dass dies nur innerhalb von 30 Minuten nach dem Laden der Seite möglich ist.

Um CSRF mit Flask-WTF zu schützen, müssen wir eine Ansicht für unsere Anmeldeseite definieren.

# 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)

{# 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>

# 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()])

# 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)

# 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()])

{# 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>

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'])

<!-- 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 %}