Tutorial : Sử dụng flask cho người mới bắt đầu ( Phần 3)

Hôm nay mình sẽ tiếp tục hướng dẫn các bạn tạo form web với framework Flask. Đối với mỗi website không thể thiếu form là phần tương tác người dùng được, và với framework trẻ Flask cũng được cộng đồng phát triển nhiều packet hỗ trợ form. Trong đó mình xin giới thiệu Flask_WTF extension. Chúng ta phải thiết lập cho extension này:

1. Thiết lập

chúng ta thiết lập cho file config.py trong folder root của microblog:

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

Trên đây là 2 thông số để thiêt lập ngăn ngừa tấn công CSRF và mã hóa token dùng trong validate form.

Tiếp theo ta cần khai báo cho Flask để đọc thông số file config trên(file app/__init__.py)

from flask import Flask

app = Flask(__name__)
app.config.from_object('config')

from app import views

2. Login Form

Chúng ta sẽ thử khởi tạo Login form, nó sẽ có 2 trường: username và password. Chúng ta sẽ có user login sử dụng OpenID. OpenIDs là extension sử dụng authentication bởi provider của OpenIDs. Do đó chúng ta không cần validate trường password. Ngoài ra 1 form login thường có checkbox "remember me". (file app/forms.py):

from flask.ext.wtf import Form
from wtforms import StringField, BooleanField
from wtforms.validators import DataRequired

class LoginForm(Form):
    openid = StringField('openid', validators=[DataRequired()])
    remember_me = BooleanField('remember_me', default=False)

3. Form Template

Chúng ta tạo template chứa HTML.(file app/templates/login.html):

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

{% block content %}
  <h1>Sign In</h1>
  <form action="" method="post" name="login">
      {{ form.hidden_tag() }}
      <p>
          Please enter your OpenID:<br>
          {{ form.openid(size=80) }}<br>
      </p>
      <p>{{ form.remember_me }} Remember Me</p>
      <p><input type="submit" value="Sign In"></p>
  </form>
{% endblock %}

tiếp theo chúng ta khai báo form trong app/view.py: giúp flask sẽ nhận diện đợc form

from flask import render_template, flash, redirect
from app import app
from .forms import LoginForm

# index view function suppressed for brevity

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    return render_template('login.html',
                           title='Sign In',
                           form=form)

Để validate form chúng ta sẽ update app/view.py:

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

Như vậy việc tạo form login đã cơ bản hoàn thành. Đối với các website tích hợp chức năng đăng nhập bằng mạng xã hội là cần thiết. dùng OpenID việc này càng trở nên dễ dàng hơn. Chúng ta có thể thêm vào file config.py:

WTF_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'},

và update lại file view.py:

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

Tổng kết

Chúng ta đã tìm hiểu và biết cách sử dụng form với WTF_Form trong Flask. Trong bài sau tôi sẽ hướng dẫn các bạn tạo database với Flask.