Django – #14 – System Autoryzacji cz. 2

Wprowadzenie.

Drugi wpis poświęcony systemowi autoryzacji jest nieco krótszy i ma na celu z jednej strony  zbudowanie logicznej struktury aplikacji, natomiast z drugiej strony ma na celu urtwalenie mechanizmów Django.

Zakres artykułu.

  • Dodanie szablonów rejestracji, logowania i wylogowywania

Dodanie szablonów rejestracji, logowania i wylogowywania

W pierwszym kroku przejdźmy do pliku urls.py i dodajmy trzy ścieżki do następujących widoków: rejestacji, logowania i wylogowywania naszej aplikacji.
path(‘signup’, views.signup_page, name=’signup_page’),
path(‘login’, views.login_page, name=’login_page’),
path(‘logout’, views.logout_page, name=’logout_page’),

from django.contrib import admin
from django.urls import path
from auth_system import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home, name='home'),
    path('signup', views.signup_page, name='signup_page'),
    path('login', views.login_page, name='login_page'),
    path('logout', views.logout_page, name='logout_page'),
]

Następnie w pliku views.py dodajmy trzy funkcje wspomnianych wyżej widoków.
def signup_page(request):
def login_page(request):
def logout_page(request):

from django.shortcuts import render

# Create your views here.


def home(request):
    return render(request, 'auth_system/home.html')

def signup_page(request):
    return render(request, 'auth_system/signup.html')

def login_page(request):
    return render(request, 'auth_system/login.html')

def logout_page(request):
    return render(request, 'auth_system/logout.html')

Kolejno stwórzmy trzy proste szablony:
signup.html
login.html
logout.html

{% extends 'auth_system/base.html' %}

{% block content %}
  <div class="container">
    <h2>SIGNUP</h2>
  </div>
{% endblock %}

{% extends 'auth_system/base.html' %}

{% block content %}
  <div class="container">
    <h2>LOGIN</h2>
  </div>
{% endblock %}

{% extends 'auth_system/base.html' %}

{% block content %}
  <div class="container">
    <h2>LOGOUT</h2>
  </div>
{% endblock %}

W celu łatwiejszego przemieszczania się po stronach zmodyfikujmy szablon base.html tak aby po naciśnięciu na określony wyraz przeniosło nas na daną stronę.

    <a class="btn btn-outline-primary" href="{% url 'home' %}">HOME</a>
    <a class="btn btn-outline-primary" href="{% url 'signup_page' %}">Zarejestruj się</a>
    <a class="btn btn-outline-primary" href="{% url 'login_page' %}">Zaloguj się</a>
    <a class="btn btn-outline-danger" href="{% url 'logout_page' %}">Wyloguj się</a>

Cały plik base.html wygląda następująco.

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="shortcut icon" href="#" />
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
      <h5 class="my-0 mr-md-auto font-weight-normal">AUTH SYSTEM</h5>
      <nav class="my-2 my-md-0 mr-md-3">
        <a class="btn btn-outline-primary" href="{% url 'home' %}">HOME</a>
        <a class="btn btn-outline-primary" href="{% url 'signup_page' %}">Zarejestruj się</a>
        <a class="btn btn-outline-primary" href="{% url 'login_page' %}">Zaloguj się</a>
        <a class="btn btn-outline-danger" href="{% url 'logout_page' %}">Wyloguj się</a>
      </nav>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    {% block content %}{% endblock %}
    </body>
</html>

Na koniec sprawdźmy, czy nasza strona działa zgodnie z oczekiwaniami naciskając na wyrazy HOME, Zarejestruj się, Zaloguj się, Wyloguj się.

Efekt po naciśnięciu na wyraz HOME.

Efekt po naciśnięciu na wyraz Zarejestruj się.

Efekt po naciśnięciu na wyraz Zaloguj się.

Efekt po naciśnięciu na wyraz Wyloguj się.

Autor artykułu
Dominik Bednarski

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.