Home-theater-designers
django-allauth este un pachet Django care vă permite să construiți rapid și ușor un sistem de autentificare pentru aplicațiile Django. Are șabloane încorporate pentru a vă permite să vă concentrați asupra altor părți importante ale aplicației dvs.
MUO Videoclipul zilei Derulați PENTRU A CONTINUA CU CONȚINUT
Deși șabloanele încorporate sunt utile, veți dori să le schimbați deoarece nu au cea mai bună interfață de utilizare.
Cum se instalează și se configurează django-allauth
Urmând câțiva pași simpli, puteți instala fără probleme django-allauth în proiectul dvs. Django.
- Puteți instala django-allauth pachet utilizând managerul de pachete Pip:
pip install django-allauth - În fișierul de setări al proiectului, adăugați aceste aplicații la aplicațiile instalate:
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
] - Adăugați backend-uri de autentificare la fișierul de setări:
AUTHENTICATION_BACKENDS = [
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
] - Adăugați un ID de site la proiectul dvs.:
SITE_ID = 1 - Configurați adresele URL pentru django-allauth:
from django.urls import path, include
urlpatterns = [
# Djang-allauth url pattern
path('accounts/', include('allauth.urls')),
]
Dacă faceți corect configurațiile de mai sus, ar trebui să vedeți un șablon ca acesta când navigați la http://127.0.0.1:8000/accounts/signup/ :
Puteți vedea lista de adrese URL disponibile navigând la http://127.0.0.1:8000/accounts/ cu DEBUG=Adevărat în fișierul dvs. de setări.
Cum să suprascrieți șablonul de conectare în django-allauth
În primul rând, trebuie să configurați șabloane folder dacă nu ați făcut acest lucru. Deschideți fișierul de setări și navigați la ȘABLONE listă. În interiorul acestuia, localizați DIRS listă și modificați-o astfel:
conturi de e-mail asociate cu numărul de telefon
'DIRS': [BASE_DIR/'templates'],
Asigurați-vă că aveți un șabloane folderul din directorul rădăcină al proiectului dvs. Puteți suprascrie șablonul de autentificare implicit în django-allauth urmând acești pași următori.
Pasul 1: Creați fișierele șablon
În dumneavoastră șabloane folder, creați un nou folder numit cont pentru a deține șabloanele legate de django-allauth.
Șabloanele de înregistrare și autentificare ar trebui să fie signup.html și login.html respectiv. Puteți determina numele corect al șablonului prin deschiderea dvs Mediul virtual Python și navigarea către Lib > site-packages > allauth > templates > account folder pentru a găsi șabloanele. Ar trebui să parcurgeți codul pentru a înțelege cum funcționează șabloanele. De exemplu, șablonul de autentificare are acest cod în el:
Pasul 2: Adăugați cod HTML la fișierele șablon
După crearea fișierelor, ar trebui să adăugați codul HTML personalizat pentru șablonul dvs. De exemplu, pentru a înlocui șablonul de autentificare de mai sus, este posibil să doriți să copiați totul din {% altfel %} bloc, care conține formularul și butonul de trimitere și adăugați-l la șablonul dvs. personalizat. Iată un exemplu:
{% 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 %}
Codul de mai sus folosește Moștenirea șablonului lui Django a moșteni caracteristici de la baza.html șablon. Asigurați-vă că eliminați etichetele inutile, cum ar fi {% blocktrans %} etichetă. Dacă ați făcut acest lucru, pagina dvs. de autentificare ar trebui să fie similară cu aceasta:
Antetul și subsolul din imaginea de mai sus vor fi diferite de ale dvs.
Google recompensează modul în care puteți obține mai multe sondaje
Pasul 3: Adăugați stiluri personalizate în formularul dvs
În pasul anterior, formularul de autentificare este redat ca un paragraf utilizând {{ form.as_p }} etichetă. Pentru a adăuga stiluri în formularul dvs., trebuie să cunoașteți valoarea Nume atribut asociat fiecărui câmp de intrare.
Vă puteți inspecta pagina pentru a obține valorile de care aveți nevoie.
Imaginea de mai sus arată atributul nume asociat cu e-mail câmpul formularului.
Acum, puteți adăuga câmpurile de formular individual în proiectul dvs. De exemplu, puteți adăuga câmpul de e-mail astfel:
{{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}
Puteți utilizați Bootstrap cu proiectul dvs. Django pentru a vă stila cu ușurință formularul. Iată un exemplu:
cum să-ți faci filtrul Snapchat
<div class="form-floating form-group">
{{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}
</div>
Codul de mai sus adaugă clase de formular Bootstrap la formular. Acum, puteți adăuga celelalte câmpuri de care aveți nevoie și le puteți modela după preferințele dvs. Dacă nu vă place să utilizați Bootstrap pentru coafare, django-crispy-forms este o alternativă la stilarea formularelor . Exemplul de mai jos folosește Bootstrap pentru stil.
<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>
Blocul de cod de mai sus va produce rezultate similare cu următoarea imagine:
Puteți afla mai multe despre formularele din django-allauth citind documentație oficială .
Ignorați orice șablon în django-allauth
django-allauth conține multe șabloane implicite pe care le puteți suprascrie. Cu pașii din acest ghid, puteți suprascrie orice șablon în django-allauth. Ar trebui să luați în considerare utilizarea acestui pachet pentru a gestiona sistemul dvs. de autentificare, astfel încât să vă puteți concentra pe construirea altor caracteristici importante ale aplicației dvs.