Jak zastąpić domyślne szablony w django-allauth?

Alicia Brunner included in Programming Python Web Development Coding Tutorials

2023-10-03 1029 words 5 minutes

Contents

django-allauth to pakiet Django, który pozwala szybko i łatwo zbudować system uwierzytelniania dla aplikacji Django. Ma wbudowane szablony, które pozwalają skupić się na innych ważnych częściach aplikacji.

Podczas gdy domyślne szablony mogą być przydatne, często konieczna jest ich modyfikacja, ponieważ ich interfejs użytkownika (UI) może nie być zgodny z preferencjami lub wymaganiami użytkownika.

Jak zainstalować i skonfigurować django-allauth

Integracja django-allauth z projektem Django wymaga przestrzegania prostego zestawu wskazówek, które zapewnią płynny i nieprzerwany proces instalacji.

⭐ Możesz zainstalować pakiet django-allauth za pomocą menedżera pakietów Pip:

 pip install django-allauth

⭐ W pliku ustawień projektu dodaj te aplikacje do zainstalowanych aplikacji:

 INSTALLED_APPS = [

    """
    Add your other apps here
    """

    # Djang-allauth configuration apps
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'allauth.socialaccount', # add this if you want to enable social authentication
]

⭐ Dodaj backendy uwierzytelniania do pliku ustawień:

 AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

⭐ Dodaj identyfikator witryny do projektu:

 SITE_ID = 1

⭐ Skonfiguruj adresy URL dla django-allauth:

 from django.urls import path, include

urlpatterns = [
    # Djang-allauth url pattern
    path('accounts/', include('allauth.urls')),
]

Jeśli konfiguracja została wykonana poprawnie, nawigacja do http://127.0.0.1:8000/accounts/signup/ powinna wyświetlić szablon przypominający następujący:

Aby uzyskać dostęp do listy dostępnych adresów URL, przejdź do " http://127.0.0.1:8000/accounts/ " w ustawieniu “DEBUG=True” w pliku konfiguracyjnym.

Jak nadpisać szablon logowania w django-allauth

Aby wykorzystać nasz system szablonów, należy najpierw upewnić się, że katalog “templates” został poprawnie skonfigurowany. Aby to zrobić, należy uzyskać dostęp do pliku konfiguracyjnego aplikacji i przejść do sekcji “TEMPLATES”. W tej sekcji znajdź podlistę “DIRS” i dostosuj ją odpowiednio, jak pokazano poniżej:

 'DIRS': [BASE_DIR/'templates'],

Aby ułatwić integrację Django-Allauth, kluczowe jest ustanowienie obecności folderu “templates” znajdującego się w głównym katalogu projektu. Można zdecydować się na modyfikację standardowego szablonu logowania dostarczonego przez Django-Allauth poprzez zastosowanie się do poniższego zestawu instrukcji.

Krok 1: Stwórz pliki szablonów

Aby właściwie zorganizować i zarządzać szablonami powiązanymi z Django Allauth w ramach projektu, zaleca się utworzenie wyznaczonego folderu zatytułowanego “account” w istniejącym katalogu “templates”. Pozwoli to na efektywną organizację i usprawniony dostęp do tych konkretnych szablonów w razie potrzeby.

Aby poprawnie zidentyfikować szablony rejestracji i logowania dla Allauth, należy przejść do katalogu “Lib” w wirtualnym środowisku Python i przejść do folderu “site-packages”. Stamtąd należy przejść do folderu “allauth” i zlokalizować podfolder “templates”. Badając zawartość tego podfolderu, a konkretnie folderu “account”, odkryjesz odpowiednie nazwy szablonów dla stron rejestracji i logowania, które są odpowiednio “signup.html” i “login.html”. Aby lepiej zrozumieć działanie tych szablonów, konieczne może być przejrzenie odpowiedniego kodu.

Krok 2: Dodaj kod HTML do plików szablonu

Po wygenerowaniu plików konieczne jest włączenie dostosowanego kodu HTML do szablonu. Na przykład, aby zmodyfikować domyślny szablon logowania, można powielić całą zawartość zawartą w bloku {% else %} , który obejmuje formularz i przycisk przesyłania, i zintegrować go z dostosowanym szablonem. Przykładowa implementacja może wyglądać następująco:

 {% extends 'base.html' %}
{% block content %}
<p>If you have not created an account yet, then please
    <a href="{{ signup_url }}">sign up</a> first.</p>
    
    <form class="login" method="POST" action="{% url 'account_login' %}">
      {% csrf_token %}
      {{ form.as_p }}
      {% if redirect_field_value %}
      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
      {% endif %}
      <a class="button secondaryAction" href="{% url 'account_reset_password' %}">Forgot password?</a>
      <button class="primaryAction" type="submit">SIgn in</button>
    </form>
    {% endblock content %}

Django wykorzystuje technikę znaną jako dziedziczenie szablonów w swoim frameworku, która umożliwia dostosowywanie szablonów poprzez dziedziczenie atrybutów i cech z wcześniej istniejących szablonów bazowych. W tym konkretnym przypadku, kod wykorzystuje wbudowaną funkcję Django do dziedziczenia szablonów, aby włączyć układ i elementy stylizacji znalezione w pliku “base.html” do strony logowania. Aby zapewnić optymalną funkcjonalność, zaleca się wyeliminowanie wszelkich niechcianych lub zbędnych elementów HTML, w tym tagu " {% blocktrans %}" “. W ten sposób wynikowa strona logowania będzie bardzo podobna do podanej przykładowej struktury.

Powyższa grafika zawiera nagłówki i stopki, które różnią się od tych przedstawionych w niniejszym dokumencie.

Krok 3: Dodaj niestandardowe style do swojego formularza

Aby nadać naszemu formularzowi logowania estetyczny urok i atrakcyjność wizualną, konieczne jest zrozumienie znaczenia przypisywania określonych nazw poszczególnym polom wejściowym w tym formularzu. Korzystając z tagu {{ form.as_p }}, możemy skutecznie renderować nasz formularz logowania jako spójną narrację dla płynnej interakcji użytkownika. Aby jednak poprawić wygląd tego formularza i nadać mu poczucie wyrafinowania, ważne jest, abyśmy byli świadomi unikalnego identyfikatora przypisanego do każdego indywidualnego elementu formularza.

Aby uzyskać niezbędne dane, zaleca się sprawdzenie ich strony internetowej.

Grafika przedstawia etykietę przypisaną do pola wejściowego w formularzu, odpowiadającą wpisowi adresu e-mail.

Rzeczywiście, można uwzględnić poszczególne pola formularza w ramach konkretnego projektu. Na przykład, włączenie pola adresu e-mail można wykonać w następujący sposób:

 {{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}

Można wykorzystać Bootstrapa w połączeniu z projektem Django, aby bez wysiłku nadać swojemu formularzowi atrakcyjny wygląd. Rozważmy poniższą ilustrację jako punkt odniesienia:

 <div class="form-floating form-group">
 {{ form.login }}
 <label for="{{form.login.id_for_label}}">Email</label>
 {{ form.login.errors|safe }}
</div>

Podany kod stosuje formatowanie Bootstrap do danego formularza, pozwalając na dodanie kolejnych pól, a także spersonalizowanych preferencji projektowych. Dla tych, którzy nie chcą wykorzystywać Bootstrapa w swojej stylizacji, można rozważyć alternatywną opcję znaną jako “django-crispy-forms”. Jak pokazano w poniższym przykładzie, Bootstrap jest wykorzystywany w celu ukształtowania formularza.

 <div class="container d-flex justify-content-center align-items-center vh-100">
    <form method="post" class="login" id="signup_form" action="{% url 'account_login' %}">
        <div class="text-center mb-4">
            <h1 class="h3 mb-3 font-weight-normal">Sign in</h1>
        </div>
        {{ form.non_field_errors | safe }}
        {% csrf_token %}
        <div class="row g-3">
            <div class="col-12">
                <div class="form-floating form-group">
                    {{ form.login }}
                    <label for="{{form.login.id_for_label}}">Email</label>
                    {{ form.login.errors|safe }}
                </div>
            </div>
            <div class="col-12">
                <div class="form-floating form-group my-3">
                    {{ form.password }}
                    <label for="{{form.password.id_for_label}}">Password</label>
                    {{ form.password.errors|safe }}
                </div>
            </div>
            <div class="col-12">
                <div class="form-check">
                    <label for="{{form.remember.id_for_label}}" class="form-check-label">Remember me</label>
                    {{ form.remember }}
                </div>
            </div>
            <div class="col-6">
                {% if redirect_field_value %}
                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
                {% endif %}
                <button class="btn btn-primary w-100 py-3 bg-accent" type="submit">Sign in</button>
                <a class="button secondaryAction text-accent" href="{% url 'account_reset_password' %}">Forgot
                    Password?</a>
            </div>
        </div>
    </form>
</div>

Oczekuje się, że wyżej wymieniony segment kodu wygeneruje wynik przypominający przedstawioną poniżej ilustrację:

Możesz dowiedzieć się więcej o formularzach w django-allauth czytając oficjalną dokumentację .

Override Any Template in django-allauth

Django Allauth zapewnia wiele standardowych szablonów, które mogą być dostosowane do indywidualnych preferencji. Procedury opisane w tym zasobie oferują elastyczność w modyfikowaniu dowolnego z tych szablonów. Zdecydowanie zaleca się stosowanie Django Allauth jako kompleksowego rozwiązania do zarządzania uwierzytelnianiem użytkowników, umożliwiając programistom skoncentrowanie wysiłków wyłącznie na tworzeniu i ulepszaniu dodatkowych krytycznych aspektów ich aplikacji.