Flask & Vue. Проста аутентифікація. Приклад№ 2.4

• Користувач вводить логін/пароль, ці дані зберігаються десь у додатку, і кожного разу надсилаються з запитом на сервер.

Дурня повна! Ніхто зараз так не робить, бо легко поцупити логін/пароль. Тому:

• Користувач вводить логін/пароль один раз і відправляє на сервер. Той перевіряє чи дійсно існує такий користувач і якщо все гаразд - надсилає у відповідь унікальну ID сессії користувача. І далі додаток додає цей ID сессії у всі запити до сервера. Далі я буду його називати токен (Token), хоча це не зовсім те, що наспраді називають токеном. Саме за цим токеном можна визначити що це за користувач. Додаток зберігає Token десь у куках або localstorage і поки існує Token, доти користувач вважається залогіненим.

Та це проблема, бо маючи доступ до компа, на якому залогінився юзер, можна легко поцупити токен і, використавши його на іншому компі, попасти в систему навіть не знаючи логіна/пароля. Це проблема! Тому:

• Токен видається з прив'язкою до конкретного девайсу. У такому випадку використання токена на іншому пристрої буде неможливим. Для того, щоб згенерувати унікальний ідентифікатор пристрою я використав у прикладі Fingerprint. Дивись файл sessionid.min.js. Це Fingerprint, але перейменований. Цього достатньо, щоб обійти блокування Fingerprint :) у браузерах, який вважають інструментом для слідкування. Тепер при кожному запиті до сервера відправляється "token" і Fingerprint, який я обізвав "sessionid". Сервер перевіряє відповідність sessionid і token.

Та от холера! Маючи доступ до компа, де залогінився юзер, можна ж і Fingerprint легко зтибрити. Потім, зі збоченнями, але ж таки використати його і токен, щоб отримати несанкційований доступ. Тому:

• Сервер має перевіряти не тільки згенерячений JS-скриптиком ID-девайса, але і ще щось, що змінити важко. У прикладі я аналізую User-Agent. Та і User-Agent теж можна підробити.

IP адресу для ідентифікації пристрою я не використовував, бо вона може бути динамічною, наприклад на мобільних пристроях. Тобто, зробити так, щоб сервер дійсно отримав ідентифікатор девайсу, який складно підробити, та ще задачка. Тому:

• Сервер видає token на певний час. І, коли активність користувача припиняється, через встановлений час токен видаляється. Користувачеві доведеться вводити пароль знову.

У цьому прикладі реалізована така собі проста схема Аутентифікації. Список користувачів у базі даних, таблиця USERS (дивись файл modifyDB.py, цей файл можна запустити для модифікації бази даних з попереднього прикладу).

Додані користувачі: admin/admin, user/123

У цьому прикладі на фронтенді реалізована форма логіну, збереження токену у localstorage, переадресація на відповідну сторінку після логіну.

Коли є підозра, що був витік інформації і логін + пароль став відомий зловмисникам, звісно, треба змінити пароль. Але, якщо зловмисник встиг увійти в систему на іншому пристрої, отримав токен, тоді зміна паролю не "викине" його з системи. Для вирішення подібних проблем існує пункт меню "Logout all user's devices". Саме завдяки йому, можна видалити всі токени, які були видані поточному користувачеві.

Але так вже ніхто не робить - цей підхід досить застарілий. Проте, поки що будемо використовувати його. Зараз нам треба займатися Фронтендом. Потім, звісно, буде приклад з використанням jwt токенів. Такий підхід ускладнює побудову і роботу розподілених систем, коли існує єдиний сервер аутентифікації і багато серверів з додатками. І всі ці сервери додатків мають перевіряти токен у сервера аутентифікації. Це додатково навантажує сервер аутентифікації і несе загрозу для працездатності системи в цілому, якщо виникають проблеми доступу до сервера аутентифікації. Як я казав, у подальшому буде розглянуто приклад з використанням сучасних інструментів.

Мета цього прикладу познайомити читача з проблемами аутентифікації, дивлячись з боку фронтенда, та вималювати проблемами безпеки.

Як запустити приклад?

1. Завантажити архів з прикладом, розпакувати
2. Запустити приклад командою:

   python ./my_app.py

   або

   python3 ./my_app.py

3. У браузері відкрити посилання: http://localhost:5000/

Дивись також:

• Flask & Vue. Приклад# 2.1
• Flask & Vue. Приклад# 2.2 Frontend - Зручна навігація
• Flask & Vue. Приклад# 2.3 Серверна пагінація, пошук, сортування даних
• Flask & Vue. Приклад# 2.4 Проста аутентифікація
• Flask & Vue. Приклад# 2.5 Авторизація
• Flask & Vue. Приклад# 2.6 Кастомні компоненти
• Flask & Vue. Приклад# 2.7 SQLAlchemy, Migrate, Marshmallow, JWT
• Flask & Vue. Використання систем збірки проекту. Webpack