Zadani predlošci django-allauth-a izgledaju tupo i možda neće odgovarati vašim potrebama. Evo kako ih možete nadjačati.

django-allauth je Django paket koji vam omogućuje brzu i jednostavnu izgradnju sustava provjere autentičnosti za vaše Django aplikacije. Ima ugrađene predloške koji vam omogućuju da se usredotočite na druge važne dijelove svoje aplikacije.

Iako su ugrađeni predlošci korisni, poželjet ćete ih promijeniti jer nemaju najbolje korisničko sučelje.

Kako instalirati i konfigurirati django-allauth

Slijedeći nekoliko jednostavnih koraka, možete neprimjetno instalirati django-allauth u svoj Django projekt.

  1. Možete instalirati django-allauth paket pomoću upravitelja paketa Pip:
    pip install django-allauth
  2. U datoteci postavki vašeg projekta dodajte ove aplikacije svojim instaliranim aplikacijama:
    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
    ]
  3. Dodajte pozadinu provjere autentičnosti u svoju datoteku postavki:
    AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
    ]
  4. Dodajte ID stranice svom projektu:
    SITE_ID = 1
  5. Konfigurirajte URL-ove za django-allauth:
    from django.urls import path, include
    urlpatterns = [
    # Djang-allauth url pattern
     path('accounts/', include('allauth.urls')),
    ]

Ako ispravno izvršite gornje konfiguracije, trebali biste vidjeti predložak poput ovog kada prijeđete na http://127.0.0.1:8000/accounts/signup/:

Popis dostupnih URL-ova možete vidjeti ako odete na http://127.0.0.1:8000/accounts/ s DEBUG=Istina u vašoj datoteci postavki.

Kako nadjačati predložak za prijavu u django-allauthu

Prvo morate konfigurirati svoj šablone mapu ako to niste učinili. Otvorite datoteku postavki i idite na PREDLOŠCI popis. Unutar njega pronađite DIRS popis i izmijenite ga ovako:

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

Provjerite imate li šablone mapu u korijenskom direktoriju vašeg projekta. Možete nadjačati zadani predložak za prijavu u django-allauth slijedeći sljedeće korake.

Korak 1: Izradite svoje datoteke predložaka

U vašem šablone mapu, stvorite novu mapu pod nazivom račun za držanje predložaka koji se odnose na django-allauth.

Predlošci za registraciju i prijavu trebali bi biti prijava.html i prijava.html odnosno. Ispravan naziv predloška možete odrediti otvaranjem svog Python virtualno okruženje i navigacija do Lib > site-packages > allauth > templates > account mapu za pronalaženje predložaka. Trebali biste proći kroz kôd da biste razumjeli kako predlošci funkcioniraju. Na primjer, predložak za prijavu sadrži ovaj kod:

Korak 2: Dodajte HTML kôd datotekama predloška

Nakon što izradite datoteke, trebali biste dodati prilagođeni HTML kôd za svoj predložak. Na primjer, da nadjačate gornji predložak za prijavu, možda ćete htjeti kopirati sve iz {% else %} blok koji sadrži obrazac i gumb za slanje i dodajte ga svom prilagođenom predlošku. Evo primjera:

{% extends 'base.html' %}
{% block content %}
<p>If you have not created an account yet, then please
<ahref="{{ signup_url }}">sign upa> first.p>

<formclass="login"method="POST"action="{% url 'account_login' %}">
 {% csrf_token %}
 {{ form.as_p }}
 {% if redirect_field_value %}
<inputtype="hidden"name="{{ redirect_field_name }}"value="{{ redirect_field_value }}" />
 {% endif %}
<aclass="button secondaryAction"href="{% url 'account_reset_password' %}">Forgot password?a>
<buttonclass="primaryAction"type="submit">SIgn inbutton>
form>
 {% endblock content %}

Gornji kod koristi Djangovo nasljeđe predloška naslijediti značajke od baza.html šablona. Provjerite jeste li uklonili nepotrebne oznake kao što je {% blocktrans %} označiti. Ako ste to učinili, vaša bi stranica za prijavu trebala biti slična ovoj:

Zaglavlje i podnožje na gornjoj slici razlikovat će se od vaših.

Korak 3: Dodajte prilagođene stilove svom obrascu

U prethodnom koraku, obrazac za prijavu se prikazuje kao odlomak pomoću {{ form.as_p }} označiti. Da biste svom obrascu dodali stilove, morate znati vrijednost Ime atribut pridružen svakom polju za unos.

Možete pregledati svoju stranicu kako biste dobili vrijednosti koje trebate.

Gornja slika prikazuje atribut imena povezan s elektronička pošta polje obrasca.

Sada možete pojedinačno dodati polja obrasca u svoj projekt. Na primjer, polje e-pošte možete dodati ovako:

{{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
{{ form.login.errors|safe }}

Možeš koristite Bootstrap sa svojim Django projektom za jednostavno stiliziranje vašeg oblika. Evo primjera:

<divclass="form-floating form-group">
 {{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
 {{ form.login.errors|safe }}
div>

Gornji kod dodaje Bootstrap klase obrazaca u obrazac. Sada možete dodati druga polja koja su vam potrebna i stilizirati ih prema vašim željama. Ako ne volite koristiti Bootstrap za stiliziranje, django-crispy-forms je alternativa oblikovanju vaših obrazaca. Primjer ispod koristi Bootstrap za oblikovanje.

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

Gornji blok koda proizvest će izlaz sličan sljedećoj slici:

Možete saznati više o obrascima u django-allauthu čitajući službena dokumentacija.

Nadjačaj bilo koji predložak u django-allauthu

django-allauth sadrži mnoge zadane predloške koje možete nadjačati. Pomoću koraka u ovom vodiču možete nadjačati bilo koji predložak u django-allauthu. Trebali biste razmisliti o korištenju ovog paketa za rukovanje svojim sustavom provjere autentičnosti, tako da se možete usredotočiti na izgradnju drugih važnih značajki vaše aplikacije.