Создание веб-приложения с использованием Python Flask

В предыдущей статье в блоге Timeweb Cloud мы познакомились с веб-разработкой на python с использованием Flask и рассмотрели способы работы с входящими данными. В этом туториале мы шагнем чуть дальше и напишем простое веб-приложение на python с базой данных для авторизации пользователей.

Мы будем работать в PyCharm+pipenv, а сайт сделаем на HTML+CSS. Операционная система — Win 10. Установка Flask, PyCharm и pipenv подробно описана в этой статье.

В рамках статьи мы будем использовать тестовые, учебные примеры, которые не подойдут для реализации на продакшене. Например,  для проверки пароля в БД необходимо хранить хэш пароля и сравнивать хэши, а не пароли. Также для работы с СУБД нужно использовать ORM, а не писать «сырой» SQL (подробнее про ORM см. здесь).

Кстати, в официальном канале Timeweb Cloud собрали комьюнити из специалистов, которые говорят про IT-тренды, делятся полезными инструкциями и даже приглашают к себе работать.

Для начала работы создадим директорию проекта — Timeweb. В ней разместим директории templates и static, а в директории static создадим директорию css. Теперь структура проекта выглядит так:

БД для логинов и паролей

После того, как вы установите Flask и остальные инструменты, можно перейти к работе. Для хранения данных пользователей будем использовать СУБД SQlite. Она отлично подходит для небольших проектов. Её основное преимущество заключается в автономности: для работы с ней не потребуется сервер. К тому же в python встроен модуль sqlite3 для работы с ней. Но если вы решите работать с СУБД на сервере, то обратите внимание на облачные серверы Timeweb Cloud.

В директории проекта создаем файл db.py. В файле импортируем модуль sqlite3 и создаем базу данных и таблицу с логинами и паролями:

Распишем подробно, что этот код делает:

• Подключаемся к БД с помощью метода connect(). Метод будет искать файл login_password.db в каталоге проекта. Если не найдет, то создаст самостоятельно.
• Создаем объект cursor_db для взаимодействия с БД;
• sql_create — это SQL-запрос для создания таблицы с логинами и паролями;
• С помощью метода execute() выполняем sql_create;
• Сохраняем изменения в БД методом commit();
• Закрываем объекты cursor_db и db_lp во избежание проблем с БД.

Для создания базы данных выполняем команду:

Авторизация

Основная форма

Сначала создадим форму, с помощью которой будет осуществляться авторизация в абстрактный сервис.

В директории templates создаем файл authorization.html с содержанием:

  Здесь важно 3 момента:

• <form method="POST"> — указываем, что будем использовать POST-запросы;
• label for="Login" и label for="Password" — отмечаем Login, который в дальнейшем будем обрабатывать с помощью метода get() из модуля request;
• <link rel="stylesheet" href="{{ url_for('static', filename= 'css/auth.css') }}"> — сообщаем HTML, где хранится css-файл.

В директории /static/css создаем файл auth.css:

В итоге наша форма будет выглядеть так:

Сообщение для успешной авторизации

Если пользователь ввёл верную пару логин-пароль, то выведем соответствующее сообщение.

В директории templates создаем файл successfulauth.html с содержанием:

В директории /static/css создаем файл successfulauth.css:

Сообщение при неудачной авторизации

В директории templates создаем файл auth_bad.html с содержанием:

В директории /static/css создаем файл auth_bad.css:

Теперь создадим форму для регистрации.

Регистрация

С помощью формы регистрации пользователь сможет создать свой аккаунт. 

В templates создаем файл registration.html:

В /static/css создаем regis.css:

Форма регистрации будет выглядть так:

При завершении регистрации пользователь увидит такое сообщение:

Для этого в templates создаем файл successfulregis.html:

А в /static/css создаем successfulregis.css:

Декоратор авторизации

После создания всех форм и БД мы можем начать разработку веб-приложения Flask. Для отправления html-документа в ответ на запрос клиента в Flask нужно использовать метод render_template(). Эта функция модуля Flask используется для отображения шаблонов из папки templates.

Сейчас каталог проекта имеет такую структуру:

В директории проекта /Timeweb создаем файл main.py, в котором импортируем необходимые модули из Flask и добавляем код для авторизации пользователей. Подробнее об аутентификации рекомендуем почитать здесь.

Вот логика его работы:

• Пользователь переходит на /authorization — это GET-запрос, и декоратор возвращает authorization.html;
• Когда пользователь введет логин, пароль и нажмет кнопку «Войти», сервер получит POST-запрос, который декоратор будет обрабатывать. Декоратор получит логин и пароль, которые ввел пользователь;
• Затем подключаемся к БД и выполняем SQL-запрос к ней. С помощью cursor_db.execute() и cursor_db.fetchall() получаем строку password (возможно, пустую), соответствующую введенному логину;
• Из строки «вытаскиваем» пароль, и:
• Если строка пустая, то это вызовет ошибку (выход за пределы массива), которую мы обрабатываем конструкцией try-except и сообщаем пользователю о неверных введенных данных. Декоратор завершает работу;
• Если пароль в БД не совпадает с полученным паролем, то просто возвращает сообщение о некорректности данных и завершаем работу;
• Если пароль верный, то выдаем сообщение о успешной авторизации и завершаем работу Flask-декоратора.

Декоратор регистрации

На страницу /registration пользователь попадает из формы авторизации. Вот код декоратора, добавляем его в конец main.py:

• Сначала обрабатывается GET-запрос /registration. Возвращаем registration.html;
• Когда пользователь введет данные и нажмет кнопку «Зарегистрироваться», сервер получит POST-запрос. Из него получаем Login и Password;
• Подключаемся к БД;
• sql_insert — запрос на добавление новой строки с данными пользователя;
• Выполняем sql_insert и сохраняем изменения;
• Закрываем cursor_db, db_lp и возвращаем сообщение об успешной регистрации.

Полный код программы