#11 Работа с формами во Flask
Формы — важный элемент любого веб-приложения, но, к сожалению, работать с ними достаточно сложно. Сначала нужно подтвердить данные на стороне клиента, затем — на сервере. И даже этого недостаточно, если разработчик приложения озабочен такими проблемами безопасности как CSRF, XSS, SQL Injection и так далее. Все вместе — это масса работы. К счастью, есть отличная библиотека WTForms, выполняет большую часть задач за разработчика. Перед тем как узнать больше о WTForms, следует все-таки разобраться, как работать с формами без библиотек и пакетов.
Работа с формами — сложный вариант
Для начала создадим шаблон login.html со следующим кодом:
Этот код нужно добавить после функции представления books() в файле main2.py :
Запрос к странице был сделан с помощью метода GET, поэтому код внутри блока if функции login() пропущен.
Если попробовать отправить форму без ввода данных, страница будет выглядеть следующим образом:
Если заполнить форму с корректными именем пользователям и паролем и нажать Enter, появится приветственное сообщение “Correct username and password” :
Таким образом можно работать с формами во Flask. Теперь же стоит обратить внимание на пакет WTForms.
WTForms
WTForms – это мощная библиотека, написанная на Python и независимая от фреймворков. Она умеет генерировать формы, проверять их и предварительно заполнять информацией (удобно для редактирования) и многое другое. Также она предлагает защиту от CSRF. Для установки WTForms используется Flask-WTF.
Flask- WTF – это расширение для Flask, которое интегрирует WTForms во Flask. Оно также предлагает дополнительные функции, такие как загрузка файлов, reCAPTCHA, интернационализация (i18n) и другие. Для установки Flask-WTF нужно ввести следующую команду.
Создание класса Form
Для начала нужно создать файл forms.py внутри словаря flask_app и добавить в него следующий код.
DataRequired: он проверяет, ввел ли пользователь хоть какую-информацию в поле.
Email: проверяет, является ли введенный электронный адрес действующим.
Введенные данные не будут приняты до тех пор, пока валидатор не подтвердит соответствие данных.
Примечание: это лишь основа полей форм и валидаторов. Полный список доступен по ссылке https://wtforms.readthedocs.io.
Установка SECRET_KEY
По умолчанию Flask-WTF предотвращает любые варианты CSFR-атак. Это делается с помощью встраивания специального токена в скрытый элемент внутри формы. Затем этот токен используется для проверки подлинности запроса. До того как Flask-WTF сможет сгенерировать csrf-токен, необходимо добавить секретный ключ. Установить его в файле main2.py необходимо следующим образом:
Секретный ключ должен быть строкой — такой, которую сложно разгадать и, желательно, длинной. SECRET_KEY используется не только для создания CSFR-токенов. Он применяется и в других расширениях Flask. Секретный ключ должен быть безопасно сохранен. Вместо того чтобы хранить его в приложении, лучше разместить в переменной окружения. О том как это сделать — будет рассказано в следующих разделах.
Формы в консоли
Откроем оболочку Python с помощью следующей команды:
Это запустит оболочку Python внутри контекста приложения.
Теперь нужно импортировать класс ContactForm и создать экземпляр объекта новой формы, передав данные формы.
Форма не прошла проверку, потому что обязательному полю message при создании объекта формы не было передано никаких данных. Получить доступ к ошибкам форм можно с помощью атрибута errors объекта формы:
Отключить CSFR-защиту можно, передав csfr_enabled=False при создании экземпляра класса формы. Пример:
Проверка формы в этот раз прошла успешно.
Следующий шаг — рендеринг формы.
Рендеринг формы
Существует два варианта рендеринга:
Рендеринг полей один за одним
Поскольку в шаблонах есть доступ к экземпляру формы, можно использовать имена полей, чтобы отрендерить имена, метки и ошибки:
Стоит протестировать этот способ в консоли:
Здесь экземпляр объекта формы был создан без данных запроса. Так и происходит, когда форма отображается первый раз с помощью запроса GET.
Поскольку форма выводится первый раз, у полей не будет ошибок проверки. Следующий код наглядно демонстрирует это:
При рендеринге полей и меток можно добавить дополнительные аргументы-ключевые слова, которые окажутся в HTML-коде в виде пар ключей-значений. Например:
Предположим, форма была отправлена. Теперь можно попробовать отрендерить поля и посмотреть, что получится.
Стоит обратить внимание, что у атрибута value в полях name и email есть данные. Но элемент
для поля message пуст, потому что ему данные переданы не были. Получить доступ к ошибке валидации для поля message можно следующим образом:
Как вариант, form.errors можно использовать, чтобы перебрать все ошибки валидации за раз.
Стоит обратить внимание, что ошибки csfr-токена нет, потому что запрос был отправлен без токена. Отрендерить поле csfr можно как и любое другое поле:
Рендеринг полей один из одним может занять много времени, особенно если их несколько. Для таких случаев используется цикл.
Рендеринг полей с помощью цикла
Следующий код демонстрирует, как можно отрендерить поля с помощью цикла for.
Теперь, зная как создавать, поверять и рендерить формы, можно использовать полученные знания для создания реальных форм.
Вначале нужно создать шаблон contact.html со следующим кодом:
Единственный недостающий кусочек пазла — функция представления, которая будет создана далее.
Работа с подтверждением формы
В 7 строке создается объект формы. На 8 строке проверяется значение, которое вернул метод validate_on_submit() для исполнения кода внутри инструкции if.
Поля формы, определенные в классе формы становятся атрибутами объекта формы. Чтобы получить доступ к данным поля используется атрибут data поля формы:
Чтобы получить доступ ко всем данные формы сразу нужно использовать атрибут data к объекту формы:
Если попробовать нажать Submit, не вводя данных, появятся следующие сообщения об ошибках валидации:
Теперь можно ввести определенные данные в поля Name и Message и некорректные данные в поле Email, и попробовать отправить форму снова. 
Нужно обратить внимание, что все поля содержат данные из прошлого запроса.
Теперь можно ввести корректный email в поле Email и нажать Submit. Теперь проверка пройдет успешно, а в оболочке появится следующий вывод:
Рекомендуется отображать обратную связь пользователю после успешной отправки. Во Flask это делается с помощью всплывающих сообщений.
Всплывающие сообщения
Всплывающие сообщения — еще одна из тех функций, которые зависят от секретного ключа. Он необходим, потому что сообщения хранятся в сессиях. Сессиям во Flask будет посвящен отдельный урок. Поскольку в этом уроке секретный ключ уже был настроен, можно двигаться дальше.
Это только настройка сообщения. Для его отображения нужно поменять также шаблон.
Для этого нужно открыть файл contact.html и изменить его следующим образом:
Валидация форм с помощью WTForms во Flask.
Содержание:
Модуль WTForms определяет свои формы для использования в шаблонах как классы. Для этого рекомендуется разбить приложение на несколько модулей и добавить отдельный модуль для форм.
Примечание. Расширение Flask-WTF добавляет несколько небольших помощников, которые делают работу с формами и фреймворком Flask более быстрой и удобной.
Пример определения класса HTML-формы для приложения Flask.
Пример формы для типичной страницы регистрации:
Использование класса HTML-формы в функции-представлении Flask.
В функции-представлении, обработка формы, определенной выше, выглядит так:
То, что нужно помнить:
Использование класса HTML-формы в шаблонах Jinja2.
Модуль WTForms генерирует практически всю форму за нас. Чтобы это было еще приятнее, можно написать макрос, который отображает поле с меткой и списком ошибок, если таковые имеются.
Пример шаблона jinja2 _formhelpers.html с таким макросом:
Класс WTForm.Form
Класс Form содержит определения полей, делегирует проверку/валидацию, принимает ввод, объединяет ошибки и в целом служит связующим звеном, скрепляющим все вместе.
Чтобы определить форму, нужно создать подкласс Form и декларативно определить поля как атрибуты класса:
Имена полей могут быть любыми допустимыми идентификаторами python со следующими ограничениями:
Наследование форм.
Формы могут при необходимости подклассифицировать другие формы. Новая форма будет содержать все поля родительской формы, а также любые новые поля, определенные в подклассе. Повторное использование имени поля в подклассе приводит к тому, что новое определение переопределяет исходное.
Метод validate_ в качестве валидатора поля формы.
Атрибуты экземпляра класса Form :
Методы экземпляра класса Form :
Form.populate_obj(obj) : заполняет атрибуты переданного объекта obj данными из полей формы.
Примечание: Любой атрибут переданного obj с тем же именем, что и поле, будет переопределен. Используйте с осторожностью.
Одним из распространенных способов использования:
Определение полей формы
Поля формы отвечают за визуализацию и преобразование данных. Они делегируют полномочия валидаторам для проверки данных.
Поля декларативно определяются как атрибуты класса формы Form :
Когда в форме определено поле, параметры построения сохраняются до тех пор, пока форма не будет создана. Во время создания экземпляра формы создается копия поля со всеми параметрами, указанными в определении. Каждый экземпляр поля хранит свои собственные данные поля и список ошибок.
Метка label и валидаторы могут быть переданы конструктору в качестве позиционных аргументов, в то время как все остальные аргументы должны передаваться в качестве ключевых аргументов. Некоторые поля (например, SelectField ) также могут принимать дополнительные аргументы ключевых слов для конкретных полей. Обратитесь к справочнику по встроенным полям для получения информации о них.
Аргументы конструктора класса типа поля.
Встроенные типы полей для формы.
Встроенные типы полей обычно представляют скалярные типы данных с отдельными значениями и относятся к одному полю формы.
Необязательный аргумент false_values : последовательность строк, каждая из которых является строкой точного соответствия тому, что считается ложным значением. По умолчанию используется кортеж (False, ‘false’, »,)
FileField(field_arguments) : отображает поле загрузки файла. По умолчанию, значением будет имя файла, отправленное в данных формы.
Модуль WTForms не занимается обработки файлов. Расширение Flask-WTF может заменить значение имени файла объектом, представляющим загруженные данные.
IntegerField(field_arguments) : текстовое поле, за исключением всего ввода, приводится к целому числу. Ошибочный ввод игнорируется и не принимается в качестве значения.
Итерация/цикл по полю приведет к созданию подполей (каждое из которых также содержит метку).
Простой вывод поля без создания цикла, приведет к получению
- списка.
SelectField(field_arguments, choices=[], coerce=unicode, option_widget=None, validate_choice=True) :
Пример поля SelectField() со статическими значениями:
Пример поля SelectField() со статическими значениями:
Скрытые поля похожи на любое другое поле в том смысле, что они могут принимать валидаторы и значения и быть доступны в объекте формы. Рассмотрите возможность проверки/валидации скрытых полей так же, как обычных.
TextAreaField(field_arguments) : поле представляет собой текстовое поле
и может использоваться для многострочного ввода.
Встроенные валидаторы полей.
Список встроенных валидаторов, определяемых в wtforms.validators :
Email(message=None, granular_message=False, check_deliverability=False, allow_smtputf8=True, allow_empty_local=False) :
EqualTo(fieldname, message=None) : сравнивает значения двух полей.
Этот валидатор можно использовать для облегчения одного из наиболее распространенных сценариев формы смены пароля:
NumberRange(min=None, max=None, message=None) : проверяет, что число имеет минимальное и/или максимальное значение включительно. Это будет работать с любым сопоставимым типом чисел, таким как числа с плавающей запятой и десятичные дроби, а не только с целыми числами.
Optional(strip_whitespace=True) : разрешает пустой ввод (необязательное поле) и останавливает продолжение цепочки проверки. Если ввод пуст, также удаляются предыдущие ошибки из поля (например, ошибки обработки). Если аргумент strip_whitespace=True (по умолчанию), то также остановит цепочку проверки, если значение поля состоит только из пробелов.
URL(require_tld=True, message=None) : простая проверка URL на основе регулярного выражения. Вероятно потребуется его проверка на доступность другими способами.
UUID(message=None) : проверяет UUID.
Создание собственного валидатора.
Выше было показано использование встроенного в класс Form валидатора (как метода с определенным именем) для проверки одного поля. Встроенные валидаторы хороши, но их сложно использовать повторно.
Мега-Учебник Flask, Часть 3: Формы
Это третья статья в серии, где я описываю свой опыт написания веб-приложения на Python с использованием микрофреймворка Flask.
Цель данного руководства — разработать довольно функциональное приложение-микроблог, которое я за полным отсутствием оригинальности решил назвать microblog.
Краткое повторение
В предыдущей части мы определили простой шаблон для домашней страницы и использовали мнимые объекты в качестве прототипов вещей, которых у нас еще нет. К примеру пользователи или записи.
В этой статье мы собираемся заполнить один из пробелов, которые есть в нашем приложении. Мы рассмотрим работу с формами.
Формы являются одними из самых основных блоков в любом веб-приложении. Использование форм позволит пользователям оставлять записи в блоге, а также логиниться в приложение.
Чтобы следовать этой части, ваше приложение микроблога должно быть таким, каким мы оставили его в конце предыдущей. Пожалуйста, убедитесь, что прилолжение установлено и работает.
Конфигурация
Многие расширения Flask требуют некоторой настройки, поэтому мы создадим файл конфигурации внутри нашей корневой папки microblog, так что он будет легко доступен для изменения, если понадобится. Вот с чего мы начнем (файл config.py):
Теперь у нас есть конфиг, и мы должны сказать Flask’у прочесть и использовать его. Мы сможем сделать это сразу после того, как объект приложения Flask создан. (файл app/__init__.py):
Форма входа
Мы создадим форму логина, которая будет использоваться вместе с системой идентификации. Механизм входа, который мы будем поддерживать в нашем приложении, не стандартного типа имя пользователя/пароль, — мы будем использовать OpenID в качестве логинов. Преимущество OpenID в том, что авторизация пройдена у провайдера OpenID, поэтому нам не нужно проверять пароли, что сделает наш сайт более защищенным для наших пользователей.
OpenID логин требует только одну строку под названием OpenID. Также мы закинем чекбокс ‘Запомнить меня’ в форму, чтобы пользователь мог установить cookie в свой браузер, который будет помнить их логин, когда они вернутся.
Напишем нашу первую форму (файл app/forms.py):
Импортированный Required — это валидатор, функция, которая может быть прикреплена к полю, для выполнения валидации данных отправленных пользователем. Валидатор Required просто проверяет, что поле не было отправлено пустым. В Flask-WTF есть много валидаторов, мы будем использовать несколько новых в будущем.
Шаблоны форм
Обратите внимание, что мы снова используем шаблон base.html через оператор наследования, расширяя его. Мы будем делать так со всеми нашими шаблонами, обеспечивая согласование макета на всех страницах.
Параметр шаблона form.hidden_tag() будет заменен скрытым полем для предотвращения CSRF, включенное в нашем файле настроек. Это поле должно быть во всех ваших формах, если CSRF включен.
Поля нашей формы отданы объектом формы, вы просто должны обращаться к аргументу <
Так как мы не определили кнопку отправки в классе формы, мы должны определить её как обычное поле. Поле отправки не несет каких-либо данных, поэтому нет нужды определять его в классе формы.
Представления форм
Последним шагом перед тем, как мы сможем увидеть нашу форму, будет написание функции представления, которая отдает шаблон.
На самом деле это весьма просто, так как мы должны всего лишь передать объект формы в шаблон. вот наша новая функция представления (файл app/views.py):
На этой стадии вы можете запустить приложение и посмотреть на вашу форму в браузере. После запуска откройте адрес, который мы связали с функцией представления login: http://localhost:5000/login
Мы еще не запрограммировали ту часть, которая принимает данные, поэтому нажатие на кнопку submit не принесет никакого эффекта.
Если как минимум одно поле не проходит валидацию, тогда функция вернет False и это снова вызовет отрисовку формы перед пользователем, тем самым дав возможность исправить ошибки. Позже мы научимся показывать сообщения об ошибке, когда не проходит валидация.
Flash сообщения не будут автоматически появляться на нашей странице, наши шаблоны должны отображать сообщени в том виде, который подходит для макета нашего сайта. Мы добавим сообщения в базовый шаблон, так что все наши шаблоны наследуют эту функциональность. Это обновленный шаблон base (файл app/templates/base.html):
Надеюсь способ отображения сообщений не требует пояснений.
Прекрасное время для того, чтобы запустить приложение и проверить как работают формы. Попробуйте отправить форму с пустым полем openid, чтобы увидеть как валидатор Required останавливает процесс передачи.
Улучшение валидации полей
С приложением в его текущем состоянии, переданные с неверными данными формы не будут приняты. Вместо этого форма снова будет отдана пользователю для исправления. Это именно то, что нам нужно.
Что мы пропустили, так это уведомления пользователя о том, что именно не так с формой. К счастью, Flask-WTF также облегчает эту задачу.
Когда поле не проходит валидацию Flask-WTF добавляет наглядное сообщение об ошибке в объект формы. Эти сообщения доступны в шаблоне, так что нам просто нужно добавить немного логики для их отображения.
Это наш шаблон login с сообщениями валидации полей (файл app/templates/login.html):
Взаимодействие с OpenID
На деле, мы будем сталкиваться с тем, что много людей даже не знают, что у них уже есть парочка OpenID. Не слишком известно, что ряд крупных поставщиков услуг в интернете поддерживает OpenID аутентификацию для их пользователей. Например, если у вас есть аккаунт в Google, то с ним у вас есть и OpenID. Так же как и в Yahoo, AOL, Flickr и множестве других сервисов.
Чтобы облегчить пользователю вход на наш сайт с одним из часто используемых OpenID, мы добавим ссылки на часть из них, чтобы пользователю не нужно было вводить OpenID вручную.
Начнем с определения списка OpenID провайдеров, которых мы хотим представить. Мы можем сделать это в нашем файле конфигурации (файл config.py):
Теперь посмотрим как мы используем этот список в нашей функции представления login:
Как вы догадались, нам нужно сделать еще один шаг, чтобы покончить с этим. Сейчас нам нужно указат как мы хотели бы отображать ссылки на этих провайдеров в нашем шаблоне login (файл app/templates/login.html):
Шаблон получился несколько длинным в связи со всеми этими изменениями. Некоторые OpenID включают в себя имена пользователей, для них у нас должно быть немного javascript магии, которая запрашивает имя пользователя, а затем создает OpenID. Когда пользователь кликает на ссылку OpenID провайдера и (опционально) вводит имя пользователя, OpenID для этого провайдера вставляется в текстовое поле.
скриншот нашей страницы входа после нажатия на ссылку Google OpenID
Заключительные слова
Хотя мы добились большого прогресса с нашими формами логина, в действительности мы не сделали ничего для входа пользователей в нашу систему. Все что мы сделали имело отношение к GUI процесса входа. Это потому, что прежде чем мы сможем сделать реальные логины, нам нужно иметь базу данных, где мы можем записывать наших пользователей.
В следующей части мы мы поднимем и запустим нашу базу данных, чуть позже мы завершим нашу систему входа, так что следите за обновлениями следующих статей.
Приложение microblog в его текущем состоянии доступно для загрузки здесь:
microblog-0.3.zip
Учтите, что zip файл не содержит в себе виртуального окружения flask. Создайте его сами, следуя инструкциям в первой части, перед тем, как вы сможете запустить приложение.
Если у вас есть какие-то вопросы или комментарии, то свободно оставляйте их ниже.
Применение WTForms для работы с формами сайта
и так далее. Это необходимая и не всегда тривиальная работа. Но, к счастью, есть расширения для Flask, которые значительно облегчают реализацию этих и подобных им типовых задач. В частности, библиотека
позволяет достаточно просто оперировать формами и выполняет большую часть задач за разработчика. На этом занятии мы, как раз, и познакомимся с основами ее функционала на примере нашего тестового сайта.
Вообще, WTForms – это библиотека, написанная на Python и независимая от фреймворков. Она способна генерировать формы, проверять их, наполнять начальной информацией, работать с reCaptcha и многое другое. Кроме того, в нее встроена защита от CSRF:
CSRF (Cross-Site Request Forgery) – межсайтовая подделка запросов.
Это атака, при которой происходит имитация запроса пользователя к стороннему сайту со страницы другого сайта. То есть, злоумышленник создает некую страницу на своем сайте, жертва заходит на нее и из формы запроса отправляется запрос на сайт, в котором посетитель авторизован. Если на сайте нет защиты от CSRF-атаки, злоумышленник, от имени пользователя получает доступ к стороннему ресурсу и творит свои «черные дела».
Так вот, такие атаки будут нипочем, при использовании WTForms. И первым делом нужно установить это расширение. Для Flask оно называется
и устанавливается с помощью команды:
pip install flask_wtf
Концепция создания форм здесь состоит в расширении базового класса
Это лишь часть классов. Полную документацию можно посмотреть на официальном сайте.
Создание класса формы
Давайте для примера создадим в нашем проекте вспомогательный файл forms.py, в котором будем определять все классы форм и начнем с класса LoginForm:
Конечно, это не все валидаторы, которые есть в WTForms. Полный их список и набор параметров можно посмотреть на странице официальной документации.
И, обратите внимание, валидатор Email может требовать отдельной дополнительной установки:
pip install email-validator
Поэтому, если при запуске программы будет отображаться ошибка с указанием класса Email, то просто выполните его установку.
Создание шаблона формы
Итак, класс определен. Как им теперь пользоваться? Для начала в основном модуле программы выполним импорт:
И, далее, в функции представления login создадим его экземпляр и передадим шаблону login.html:
То есть, в шаблоне будет доступ к переменным этого класса через параметр form:
Смотрите, здесь в самом начале идет вызов метода:
который создает скрытое поле, содержащее токен, используемый для защиты формы от CSRF-атак. Это все, что от нас требуется, остальное Flask-WTF сделает автоматически. Как видите, все просто и удобно.
Далее, мы вызываем методы label, которые вставляют в форму тег:
А методы email, psw, remember, submit – создают соответствующие теги полей ввода, кнопок, чекбоксов и так далее.
Давайте запустим программу и посмотрим как будет выглядеть эта форма и что представлять на уровне HTML-документа.
Отлично, это сделано, теперь в обработчике login выполним обработку элементов этой формы и свяжем ее с ранее созданным функционалом:
Смотрите, здесь вначале идет проверка validate_on_submit() корректности переданных данных по POST-запросу и правильность заполненных полей формы. И это очень удобно, т.к. программа пойдет дальше только в случае верных данных. В этом случае мы дополнительно проверяем корректность ввода пароля и, затем, авторизовываем пользователя и перенаправляем его на соответствующий URL. Иначе, снова отображается форма авторизации.
Видео по теме
Flask #1: Что это такое? Простое WSGI-приложение
Flask #2: Использование шаблонов страниц сайта
Flask #3: Контекст приложения и контекст запроса
Flask #4: Функция url_for и переменные URL-адреса
Flask #5: Подключение внешних ресурсов и работа с формами
Flask #7: Декоратор errorhandler, функции redirect и abort
Flask #8: Создание БД, установление и разрыв соединения при запросах
Flask #9: Добавление и отображение статей из БД
Flask #10: Способ представления полноценных HTML-страниц на сервере
Flask #11: Формирование ответа сервера, декораторы перехвата запроса
Flask #12: Порядок работы с cookies (куками)
Flask #13: Порядок работы с сессиями (session)
Flask #14: Регистрация пользователей и шифрование паролей
Flask #15: Авторизация пользователей на сайте через Flask-Login
Flask #16: Улучшение процесса авторизации (Flask-Login)
Flask #17: Загрузка файлов на сервер и сохранение в БД
Flask #18: Применение WTForms для работы с формами сайта
Flask #19: Обработка ошибок во Flask-WTF
Flask #23: Операции с таблицами через Flask-SQLAlchemy
© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта