Formularios web en el marco Flask de Python
Esquema
. En el capítulo anterior, definimos una plantilla simple para la página de inicio y algunos módulos que aún no se han implementado, como usuarios o publicaciones que utilizan objetos simulados como marcadores de posición temporales.
En este capítulo, aprenderemos cómo utilizar formularios web para llenar estos vacíos.
Los formularios web son los componentes básicos de las aplicaciones web y los usaremos para implementar la funcionalidad de publicación de usuarios y de inicio de sesión en la aplicación.
Para completar este capítulo, deberá basarse en el código de la aplicación Weibo que completó en los capítulos anteriores. Asegúrese de que el código esté instalado y ejecutándose correctamente.
Configuración
Flask-WTF es una extensión del framework Flask para el proyecto WTForms que usaremos para ayudarnos a trabajar con formularios web.
La mayoría de las extensiones de Flask requieren que se definan elementos de configuración, así que creemos un archivo de configuración en el directorio raíz de la aplicación para este propósito. Creémoslo así (fileconfig.py):
SRF_ENABLED = True
SECRET_KEY = nunca lo adivinarás
Simple, son 2 configuraciones requerido por Flask-WTF. La configuración csrf_enabled habilita la protección contra ataques de solicitudes entre sitios. En la mayoría de los casos, deberá habilitar esta función y hará que su aplicación sea más segura.
Cuando CSRF está habilitado, la configuración SECRET_KEY está vigente, lo que genera un token cifrado para la validación del formulario. Debe asegurarse de que la CLAVE sea lo suficientemente compleja y no pueda inferirse simplemente.
El archivo de configuración ahora está básicamente disponible. Después de crear el proyecto, podemos crear y editar el siguiente archivo (fileapp/__init__.py):
from flask import Flask
app = Flask(__name__)
app.config.from_object( config)
desde vistas de importación de aplicaciones
Formulario de inicio de sesión de usuario
El formulario creado con Flask-WTF es como un objeto y necesita ser una subclase en la clase Formulario. Luego simplemente defina algunas variables de atributos de clase como campos de formulario en esa subclase.
Crearemos un formulario de inicio de sesión para la autenticación del usuario. Pero a diferencia del método de inicio de sesión habitual que requiere la verificación del nombre de usuario y la contraseña, utilizaremos OpenId para gestionar el proceso de inicio de sesión. La ventaja de usar OpenId es que no tenemos que preocuparnos por el proceso de verificación de nombre de usuario y contraseña, dejamos que OpenId lo maneje y devolverá los datos de verificación de nuestro usuario. También es más seguro para los usuarios de nuestro sitio web.
Con OpenId, simplemente envía una cadena al servidor OpenId para iniciar sesión. También necesitamos agregar un cuadro "Recordarme" al formulario para los usuarios que no desean autenticarse cada vez que visitan el sitio. Después de seleccionar esta opción, la primera vez que inicien sesión, el navegador utilizará una cookie para recordar su información de inicio de sesión, por lo que no necesitarán iniciar sesión nuevamente la próxima vez que ingresen al sitio.
Comenzando con nuestro primer formulario (fileapp/forms.py):
desde flask.ext.wtf import Form, TextField, BooleanField
desde flask.ext .wtf import Requerido
form = form)
validate_on_submit() Este método completa todo el trabajo de procesamiento del formulario. Si se llama a este método mientras el formulario proporciona datos al usuario (por ejemplo, si el usuario modificó los datos enviados antes del formulario), este método devolverá False. ¿Aún no lo entiendes? Esto significa que los datos enviados no pasaron la validación y debes continuar renderizando la plantilla.
Cuando llamas al método validar_on_submit() del formulario al enviar una solicitud, toma todos los datos enviados de la solicitud y los valida utilizando las funciones de validación vinculadas a los campos del formulario. Devolverá Verdadero cuando todos los datos pasen la validación. Esto significa que puede utilizar los datos del formulario con confianza.
Si un campo no supera la validación, devolverá Falso. En este punto necesitamos devolver los datos al usuario para que pueda corregir el error. A continuación veremos cómo mostrar un mensaje de error al usuario cuando falla la validación de datos.
Cuando el método validar_on_submit() devuelve True, nuestra función de vista llamará a dos nuevas funciones. Todos se introducen desde Flask y la función flash se utiliza para mostrar el mensaje definido en la siguiente página abierta. Lo usamos para depurar. Dado que aún no hemos desarrollado el módulo de inicio de sesión de usuario, simplemente muestre los datos enviados por el usuario. Las funciones Flash son útiles, por ejemplo, para proporcionar mensajes para determinadas acciones del usuario.
El mensaje proporcionado por la función flash no aparece automáticamente en la página de nuestro sitio web, por lo que debemos seguir algunos pasos para que aparezca en la página del sitio web. Para que esta interesante función esté disponible para todas las páginas, la hemos agregado a la plantilla base, actualizada de la siguiente manera (fileapp/templates/base.html):
html
head
{ if title }
title {{title}}- Weibo/title
{ else }
titlemicroblog/ title
{ endif }
/head
cuerpo
divMicroblog: a href=/indexHome/a/div
hr
{ con mensajes = get_flashed_messages() }
{ si mensajes }
ul
{ para mensajes en mensajes }
li{{ mensaje }}/li
{ endfor }
/ul
{ endif }
{ endwith }
{ block content }{ endblock }<
/body
/html
Mostrar Flash en plantilla Esperamos que este mensaje funcione es útil para usted.
Otra función nueva que utilizamos en las funciones de vista es la redirección. Esta función notifica al navegador del usuario que salte a la dirección especificada. En nuestra función de vista, usamos esto para saltar a la página de inicio.
Tenga en cuenta que la información transmitida por la función flash se mostrará en la página después del salto.
La parte más interesante es ejecutar nuestro programa para ver cómo funciona el formulario. No complete el campo openid en el formulario y vea cómo Required (función de validación) hace su trabajo y bloquea todas las solicitudes de datos vacíos.
Mejorar la validación de campos
Nuestro programa actualmente funciona bien, se nos impide enviar datos que no cumplan con los requisitos y se devuelven al formulario para su modificación, que es básicamente el resultado. queremos.
Pero parece que falta algo. ¿No sería mejor si pudiéramos proporcionar a los usuarios un aviso cuando falla el envío de datos, informándoles el motivo del error? Afortunadamente, Flask-WTF puede resolver este problema fácilmente.
Cuando un campo de formulario falla en la validación, Flask-WTF agregará un mensaje de error al objeto del formulario. Estos mensajes también están disponibles en la plantilla, por lo que solo necesitamos agregar un poco de contenido a la plantilla.
Esta es la plantilla de inicio de sesión (fileapp/templates/login.html) con el mensaje de verificación agregado:
16
17
18
! -- Ampliar diseño básico--
{ extends base.html }
{ bloquear contenido }
h1Iniciar sesión/h1
formulario acción= método=nombre de la publicación=iniciar sesión
{{form.hidden_tag()}}
p
Ingrese su OpenID: br
{{form.openid(size=80)}}br
{ para error en form.errors.openid }
span style=color: red [{{ error; }}]/span
{endfor}br
/p
p{{form.remember_me}}Por favor, recuérdame/p
{formulario.recordar_me}. Recuérdame/p
pinput type=submit value=Iniciar sesión/p
/form
{ endblock }
Somos A La declaración de bucle se agrega a la derecha del campo openid que mostrará cualquier mensaje que no pueda validar el campo openid. Independientemente de cuántos campos tenga su formulario, todos los mensajes de error relacionados con fallas en la validación de campos del formulario se pueden usar de esta manera a través del nombre form.errors.field. En este formulario, usamos form.error.openid. Para llamar la atención del usuario sobre el mensaje de error, también agregamos un estilo CSS al mensaje para que aparezca en rojo.
Manejo de inicios de sesión OpenID
En la vida real, encontramos que muchas personas no saben que tienen algunas cuentas públicas. Algunos sitios web o proveedores de servicios de renombre utilizan cuentas públicas para proporcionar autenticación a sus miembros. Por ejemplo, si tienes una cuenta de Google, en realidad tienes una cuenta pública, al igual que sitios como Yahoo, AOL, Flickr, etc.
Para facilitar a los usuarios el uso de sus cuentas de **** públicas, agregaremos enlaces a estas cuentas de **** públicas en la lista para que los usuarios no tengan que ingresar estos enlaces manualmente.
Definiremos algunos proveedores de servicios de cuentas públicas disponibles para los usuarios en la lista y los colocaremos en el archivo de configuración (fileconfig.py):
7
8
9
CSRF_ENABLED = Verdadero
SECRET_KEY = nunca lo adivinarás
OPENID_PROVIDERS = [
{ nombre: Google, url:
{ nombre: Yahoo, url:
{ nombre: AOL, url:
{ nombre: Flickr, url:
{ nombre: MyOpenID, url:
}]
El siguiente paso es utilizar en nuestra función de vista de inicio de sesión esta lista:
@app.route(/login, métodos = [GET, POST])
def login():
formulario = LoginForm()
if form.validate_on_submit():
flash(Inicio de sesión solicitado para OpenID= form.openid.data, Remember_me= str(form.remember_me.data))
devolver redirección( /index)
return render_template(login.html,
title = Iniciar sesión,
form = formulario,
proveedores = aplicación .config[OPENID_PROVIDERS])
Introducimos la lista de configuración de proveedores de servicios de cuentas públicas *** desde app.config y luego la pasamos como parámetro a través de la función render_template a la plantilla.
Lo siguiente que debemos hacer es, como creo que habrás adivinado, mostrar estos enlaces de proveedores de servicios en la plantilla de inicio de sesión.
24
25
26
27
28
29 p>
30
31
32
33
34
! -- Ampliar diseño básico--
{ extends base.html }
{ bloquear contenido }
script type=text/javascript
función set_openid( openid, pr)
{
u = openid.search(nombre de usuario)
if (u != -1) {
// openid requiere nombre de usuario
usuario = solicitud(Ingrese su
pr
nombre de usuario:)
openid = openid .substr(0, u) usuario
}
form = document.forms[login];
form.elements[openid] . valor = openid
}
/script
h1Iniciar sesión/h1
formulario acción= método=nombre de publicación=iniciar sesión
{{form.hidden_tag()}}
Ingrese su OpenID o seleccione uno de los proveedores a continuación: br
{{form.openid(size= 80) )}}
{ por error en form.errors.openid }
span style=color: red; [{{error}}]/span
{ endfor } br
|{ para pr en proveedores }
a href=javascript:set_openid({{pr.url}}, {{pr.name}}); {pr.name}}/a |
{ endfor }
p{{form.remember_me}}recordarme/p
tipo de entrada = valor de envío =Iniciar sesión/p
/form
{ endblock }
Esta vez, el contenido agregado a la plantilla parece ser demasiado. Cuando el usuario hace clic en el enlace de la cuenta pública asociada, la cuenta pública que requiere un nombre de usuario le solicita un nombre de usuario y JavaScript maneja el nombre de usuario como una cuenta pública disponible y luego se inserta en el cuadro de texto del campo openid.
Aquí hay una captura de pantalla de cuando haces clic en el enlace de Google en la página de inicio de sesión: