Django – #13 – System Autoryzacji cz. 1

Posted on Author Dominik Bednarski 0

Wprowadzenie.

W kolejnym cyklu wpisów poświęconym Django postaram się w prosty sposób przedstawić system autoryzacji użytkownika, który jest zaimplementowany w Django. W cyklu tym stworzymy prosty projekt aplikacji w którym będziemy mogli się rejestrować, logować, wylogowywać oraz dodamy mechanizm, który pozwala na odwiedzenie strony jedynie przez zalogowane osoby.

  1. System Autoryzacji cz. 1 ⇐
  2. System Autoryzacji cz. 2
  3. System Autoryzacji cz. 3
  4. System Autoryzacji cz. 4
  5. System Autoryzacji cz. 5
  6. System Autoryzacji cz. 6

Zakres artykułu.

  • Tworzenie bazowego projektu i aplikacji

Tworzenie bazowego projektu i aplikacji

W celu stworzenia projektu w konsoli wpisujemy polecenie django-admin startproject django_auth_system. Jak widzimy nasz projekt będzie nosił nazwę django_auth_system. W następnym kroku stwórzmy aplikację o nazwie auth_system przy pomocy polecenia python3 manage.py startapp auth_system. Należy pamiętać, o przejściu do katalogu naszego projektu w którym znajduje się plik manage.py.

Gdy już mamy stworzony projekt i aplikację dokonujemy rejestracji aplikacji w pliku settings.py w sekcji INSTALLED_APPS.

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'auth_system',
]

W następnym kroku przeprowadźmy migrację bazy danych za pomocą polecenia python3 manage.py migrate, aby nie pojawiały nam się ostrzeżenia podczas uruchamiania serwera. Następnie uruchommy serwer przy pomocy polecenia python3 manage.py runserver i sprawdźmy, czy działa standardowa strona projektu Django (127.0.0.1:8000).

Kolejno stwórzmy naszą stronę domową. W tym celu w pliku urls.py dodajmy ścieżkę do widoku path(”, views.home, name=’home’), (widok dodamy w następnym kroku) od naszej strony domowej oraz zaimportujmy widoki z naszej aplikacji from auth_system import views.

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'),
]

Następnie w pliku views.py stwórzmy funkcję dla widoku home. Widok ten będzie zwracać wyrenderowany szablon home.html, który stworzymy w następnym kroku.

from django.shortcuts import render

# Create your views here.


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

W katalogu naszej aplikacji utwórzmy następującą strukturę katalogów templates/auth_system, a następnie stwórzmy tam nasz szablon home.html.

Dla testów w szablonie home.html napiszmy tylko jedną prostą linijkę.

<h2>HOME</h2>

Następnie możemy sprawdzić, czy pojawia nam się napis HOME po wywołaniu strony domowej 127.0.0.1:8000.

W celu łatwiejszej nawigacji po naszych kolejnych stronach stwórzmy szablon bazowy base.html, który będzie rozszerzał nasze kolejne szablony. W szablonie bazowym stwórzmy prosty panel nawigacyjny. Kod całego pliku 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="#">Zarejestruj się</a>
        <a class="btn btn-outline-primary" href="#">Zaloguj się</a>
        <a class="btn btn-outline-danger" href="#">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>

Aby przyjemniej nam się korzystało z naszej strony w szablonie bazowym dodałem trochę styli z bootstrapa.

W kolejnym kroku zmodyfikujmy szablon home.html, tak aby podczas renderowania został załączany szablon bazowy {% extends ‘auth_system/base.html’ %} oraz żeby został załączany nasz kod html. {% block content %} {% endblock %}. 

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

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

Po zapisaniu wszystkich zmian sprawdźmy w przeglądarce, czy udało nam się osiąganć efekt jak na poniższym screenie.

  1. System Autoryzacji cz. 1 ⇐
  2. System Autoryzacji cz. 2
  3. System Autoryzacji cz. 3
  4. System Autoryzacji cz. 4
  5. System Autoryzacji cz. 5
  6. System Autoryzacji cz. 6

Autor artykułu
Dominik Bednarski

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.