Урок 4: Аутентифікація користувачів – Бо не кожен має доступ до святилища вашого блогу

Урок 4

Урок 4: Аутентифікація користувачів – Бо не кожен має доступ до святилища вашого блогу

Вітаю, знову, маги коду! 🧙‍♂️ До цього часу ви вже створили блог, додали можливість коментування, а може навіть отримали відгуки на кшталт “Гарний шрифт” (або “Чому Comic Sans?”). Але сьогодні ми підіймаємо ставки, бо не всі заслуговують на доступ до вашого святилища.

Сьогодні ми додаємо магію логіну і лог-ауту. А щоб усе виглядало красиво, ми введемо шаблон base.html, щоб зробити структуру блогу гармонійною. Також, налаштуємо перенаправлення після виходу, щоб ніхто не блукав безцільно після натискання кнопки “вийти”. 😉

Крок 1: Активуйте віртуальне середовище (А.К.А. Одягніть мантію мага)

Перед тим, як почати чаклувати, переконайтеся, що ваше віртуальне середовище активоване. Це як перевірити, що ви вдягли мантію, перш ніж запускати фаєрбол. Бо хто хоче неприємностей, правда?

Перевірте, чи активоване середовище за допомогою команди:

echo $VIRTUAL_ENV

Якщо у відповідь ви бачите шлях до середовища – чудово! Якщо ні, активуйте його:

source venv/bin/activate

Як тільки у вас з’явиться (venv) на початку кожного рядка терміналу, ви в своєму затишному магічному кутку, де всі залежності зберігаються в безпеці, як під захисним заклинанням. 🛡️

Крок 2: Вбудована аутентифікація (Django – ваш чарівний дворецький)

Django вже все передбачив і має вбудовану систему аутентифікації! Це означає, що вам не потрібно писати логін з нуля (хто має на це час?). Django – це ваш чарівний дворецький, що виконує всю важку роботу, залишаючи вам час на важливіші справи – наприклад, обирати, який смаколик з’їсти під час кодування.

Давайте все налаштуємо!

Перейдіть до файлу myblog/myblog/urls.py і додайте ці рядки, щоб включити маршрути для логіну та логауту:

from django.contrib.auth import views as auth_views
from django.urls import path, include  # Додаємо include для маршрутизації додатку

urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),  # Підключаємо маршрути додатку blog
    path('login/', auth_views.LoginView.as_view(), name='login'),
    path('logout/', auth_views.LogoutView.as_view(), name='logout'),
]

Ось так легко Django налаштовує логін і логаут. Здається, що у вас тепер є невидимий дворецький для вашого коду, так? 🧹

Крок 3: Перенаправлення після логіну та логауту (Бо хто хоче блукати в тумані?)

За замовчуванням Django перенаправляє користувачів на /accounts/profile/ після логіну, але, чесно кажучи, ніхто не хоче опинитися на випадковій нудній сторінці. Давайте також налаштуємо перенаправлення після логауту, щоб усе було по-феншую.

Додаємо перенаправлення після логіну:

Відкрийте файл settings.py (який знаходиться у myblog/myblog/settings.py) і додайте цей магічний рядок:

# Перенаправлення на головну сторінку після логіну
LOGIN_REDIRECT_URL = '/blog/'

Додаємо перенаправлення після логауту:

Щоб забезпечити м’який вихід, додайте цей рядок в той самий settings.py:

# Перенаправлення на головну сторінку після логауту
LOGOUT_REDIRECT_URL = '/blog/'

Тепер кожен, хто ввійде або вийде з системи, буде відправлений прямо на вашу блог-сторінку, де відбувається вся магія! 🎨

Крок 4: Створюємо шаблон base.html (Гармонія на всіх сторінках)

Давайте додамо краси вашому блогу – бо навіть маги мають стиль! Створимо шаблон base.html, який буде основою для всіх сторінок блогу. Це буде ваш магічний замок, кожна кімната якого (сторінка) зможе бути оформлена по-різному. 🏰

Створіть файл base.html у папці blog/templates:

myblog/
    blog/
        templates/
            base.html

Тепер наповніть його наступним кодом:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Мій Блог{% endblock %}</title>
</head>
<body>
    <header>
        <h1>Мій Блог</h1>
        <nav>
            <ul>
                <li><a href="{% url 'blog_index' %}">Головна</a></li>
                <li>
                    {% if user.is_authenticated %}
                        <a href="{% url 'logout' %}">Вийти</a>
                    {% else %}
                        <a href="{% url 'login' %}">Увійти</a>
                    {% endif %}
                </li>
            </ul>
        </nav>
    </header>

    <div class="content">
        {% block content %}
        <!-- Тут буде виводитись вміст кожної сторінки -->
        {% endblock %}
    </div>

    <footer>
        <p>&copy; 2024 Мій Блог. Всі права захищені. Також ми використовуємо печиво.</p>
    </footer>
</body>
</html>

Ось і наш замок! 🎉 У нас є заголовок, навігація та футер, готові зустрічати відвідувачів. Магія відбувається всередині {% block content %} – там кожна сторінка зможе додати свою індивідуальність. 🌟

Крок 5: Створення шаблону login.html (Відкриваємо магічні ворота)

Настав час створити сторінку логіну, щоб користувачі могли входити до блогу. Django очікує шаблон login.html всередині папки registration.

  1. Створіть папку registration у blog/templates:

    • У папці вашого додатку blog створіть папку templates, якщо її ще немає, а потім створіть у ній папку registration.

    Структура має виглядати так:

    myblog/
    blog/
        templates/
            registration/
                login.html

  2. Додайте цей код у login.html для розширення шаблону base.html:

{% extends "base.html" %}

{% block title %}Увійти{% endblock %}

{% block content %}
<h2>Увійдіть до вашого облікового запису</h2>
<form method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Увійти</button>
</form>
{% endblock %}

Ось так ваша сторінка входу готова, і вона успадковує розмітку від base.html, щоб відповідати загальному стилю сайту. Тепер можна пропустити користувачів – але тільки гідних! 😉

Крок 6: Оновлюємо blog_index.html та blog_post_detail.html

Тепер, коли у нас є шаблон base.html, давайте оновимо файли blog_index.html і blog_post_detail.html, щоб вони також використовували цей шаблон.

6.1 Оновлюємо blog_index.html

Відкрийте myblog/blog/templates/blog_index.html і замініть код на:

{% extends "base.html" %}

{% block title %}Головна Блогу{% endblock %}

{% block content %}
<h2>Ласкаво просимо до Мого Блогу!</h2>
<ul>
    {% for post in posts %}
        <li>
            <strong><a href="{% url 'blog_post_detail' post.pk %}">{{ post.title }}</a></strong> - {{ post.created_at }}
            <p>{{ post.content|truncatewords:30 }}</p>
            <a href="{% url 'blog_post_detail' post.pk %}">Читати далі</a>
        </li>
    {% endfor %}
</ul>
{% endblock %}

Тепер наш блог-індекс отримує стильний та чистий вигляд за допомогою шаблону base.html.

6.2 Оновлюємо blog_post_detail.html

Оновіть файл myblog/blog/templates/blog_post_detail.html:

{% extends "base.html" %}

{% block title %}{{ post.title }}{% endblock %}

{% block content %}
<h2>{{ post.title }}</h2>
<p>{{ post.created_at }}</p>
<p>{{ post.content }}</p>

<h3>Коментарі</h3>
<ul>
    {% for comment in comments %}
        <li><strong>{{ comment.author }}</strong>: {{ comment.content }}</li>
    {% empty %}
        <li>Ще немає коментарів. Станьте першим, хто прокоментує!</li>
    {% endfor %}
</ul>

<h3>Залишити коментар</h3>
<form method="POST">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Надіслати</button>
</form>
{% endblock %}

Тепер сторінки з постами теж використовують наш новий шаблон.

Крок 7: Додаємо посилання для виходу (Бо кожна втеча має бути стильною)

Що за вхід, якщо не можна вийти? У шаблоні base.html ми вже додали посилання для виходу в навігації. Воно буде динамічно змінюватися в залежності від того, чи користувач увійшов чи ні:

{% if user.is_authenticated %}
    <a href="{% url 'logout' %}">Вийти</a>
{% else %}
    <a href="{% url 'login' %}">Увійти</a>
{% endif %}

Це як магічні двері – коли ви виходите, вони тихенько зачиняються за вами (ймовірно, щоб ви могли піти на каву).

Крок 8: Тестуємо магію (Це найцікавіше!)

Час протестувати функціонал входу та виходу!

Запускаємо сервер:

python3 manage.py runserver

Відвідайте http://127.0.0.1:8000/login/ і спробуйте увійти. Після входу ви будете автоматично перенаправлені на http://localhost:8000/blog/ (або на сторінку, яку ви вказали у LOGIN_REDIRECT_URL).

Перевірте також вихід – ви будете перенаправлені назад на головну сторінку блогу.

Крок 9: Створіть обліковий запис суперкористувача (Бо кожен замок має мати свого короля)

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

Виконайте цю команду:

python3 manage.py createsuperuser

Заповніть поля і вуаля – тепер ви маєте доступ до адміністраторського інтерфейсу блогу.

Крок 10: Деактивуйте віртуальне середовище (Навіть магам треба відпочивати)

Коли ви закінчили на сьогодні (або вирішили, що час на перекус), не забудьте деактивувати віртуальне середовище:

deactivate

Тепер ви можете спокійно насолодитися своїм перекусом, знаючи, що ваш Django блог працює як годинник.

Висновок уроку 4

І ось вам! 🎉 Тепер ви не тільки додали аутентифікацію користувачів (логін і логаут), але й зробили свій блог стильним за допомогою шаблону base.html. Крім того, тепер користувачі будуть автоматично перенаправлятися на головну сторінку після входу і виходу – бо хто хоче залишати когось блукати в невідомості?

У наступному уроці ми розглянемо реєстрацію користувачів, щоб ваш блог почав збирати підписників (які обов’язково захочуть залишити коментар до ваших геніальних постів). До наступного разу, відпочивайте і милуйтеся своєю магією кодування, може й заїжте це чимось солоденьким. 🍩

Django  Аутентифікація користувачів  Login  Logout  Шаблон Base 

See also