Τα προεπιλεγμένα πρότυπα του django-allauth φαίνονται αμβλύ και μπορεί να μην ταιριάζουν στις ανάγκες σας. Δείτε πώς μπορείτε να τα παρακάμψετε.
Το django-allauth είναι ένα πακέτο Django που σας επιτρέπει να δημιουργήσετε ένα σύστημα ελέγχου ταυτότητας για τις εφαρμογές σας Django γρήγορα και εύκολα. Διαθέτει ενσωματωμένα πρότυπα που σας επιτρέπουν να εστιάσετε σε άλλα σημαντικά μέρη της εφαρμογής σας.
Αν και τα ενσωματωμένα πρότυπα είναι χρήσιμα, θα θέλετε να τα αλλάξετε επειδή δεν έχουν την καλύτερη διεπαφή χρήστη.
Πώς να εγκαταστήσετε και να ρυθμίσετε το django-allauth
Ακολουθώντας μερικά απλά βήματα, μπορείτε να εγκαταστήσετε απρόσκοπτα το django-allauth στο έργο Django σας.
- Μπορείτε να εγκαταστήσετε τζάνγκο-αλλάουθ πακέτο χρησιμοποιώντας τον διαχειριστή πακέτων Pip:
pip install django-allauth
- Στο αρχείο ρυθμίσεων του έργου σας, προσθέστε αυτές τις εφαρμογές στις εγκατεστημένες εφαρμογές σας:
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
] - Προσθέστε backend ελέγχου ταυτότητας στο αρχείο ρυθμίσεών σας:
AUTHENTICATION_BACKENDS = [
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
] - Προσθέστε ένα αναγνωριστικό ιστότοπου στο έργο σας:
SITE_ID = 1
- Διαμορφώστε τις διευθύνσεις URL για το django-allauth:
from django.urls import path, include
urlpatterns = [
# Djang-allauth url pattern
path('accounts/', include('allauth.urls')),
]
Εάν κάνετε σωστά τις παραπάνω διαμορφώσεις, θα πρέπει να δείτε ένα πρότυπο σαν αυτό κατά την πλοήγηση http://127.0.0.1:8000/accounts/signup/:
Μπορείτε να δείτε τη λίστα με τις διαθέσιμες διευθύνσεις URL μεταβαίνοντας σε http://127.0.0.1:8000/accounts/ με DEBUG=Αλήθεια στο αρχείο ρυθμίσεών σας.
Πώς να παρακάμψετε το πρότυπο σύνδεσης στο django-allauth
Πρώτα, πρέπει να ρυθμίσετε τις παραμέτρους σας πρότυπα φάκελο αν δεν το έχετε κάνει. Ανοίξτε το αρχείο ρυθμίσεων και μεταβείτε στο ΠΡΟΤΥΠΑ λίστα. Μέσα σε αυτό, εντοπίστε το DIRS λίστα και τροποποιήστε την ως εξής:
'DIRS': [BASE_DIR/'templates'],
Βεβαιωθείτε ότι έχετε ένα πρότυπα φάκελο στον ριζικό κατάλογο του έργου σας. Μπορείτε να παρακάμψετε το προεπιλεγμένο πρότυπο σύνδεσης στο django-allauth ακολουθώντας αυτά τα επόμενα βήματα.
Βήμα 1: Δημιουργήστε τα αρχεία προτύπων σας
Στο δικό σου πρότυπα φάκελο, δημιουργήστε έναν νέο φάκελο που ονομάζεται λογαριασμός για να κρατήσετε τα πρότυπα που σχετίζονται με το django-allauth.
Τα πρότυπα εγγραφής και σύνδεσης πρέπει να είναι signup.html και login.html αντίστοιχα. Μπορείτε να προσδιορίσετε το σωστό όνομα προτύπου ανοίγοντας το Εικονικό περιβάλλον Python και πλοήγηση προς Lib > site-packages > allauth > templates > account φάκελο για να βρείτε τα πρότυπα. Θα πρέπει να διαβάσετε τον κώδικα για να κατανοήσετε πώς λειτουργούν τα πρότυπα. Για παράδειγμα, το πρότυπο σύνδεσης έχει αυτόν τον κωδικό:
Βήμα 2: Προσθέστε κώδικα HTML στα αρχεία προτύπων σας
Αφού δημιουργήσετε τα αρχεία σας, θα πρέπει να προσθέσετε τον προσαρμοσμένο κώδικα HTML για το πρότυπό σας. Για παράδειγμα, για να παρακάμψετε το παραπάνω πρότυπο σύνδεσης, ίσως θέλετε να αντιγράψετε τα πάντα από το {% other %} μπλοκ, το οποίο περιέχει τη φόρμα και το κουμπί υποβολής και προσθέστε το στο προσαρμοσμένο σας πρότυπο. Εδώ είναι ένα παράδειγμα:
{% 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 %}
Ο παραπάνω κώδικας χρησιμοποιεί Η κληρονομιά του προτύπου του Django να κληρονομήσει χαρακτηριστικά από το βάση.html πρότυπο. Βεβαιωθείτε ότι έχετε αφαιρέσει περιττές ετικέτες όπως το {% blocktrans %} ετικέτα. Εάν το έχετε κάνει αυτό, η σελίδα σύνδεσής σας θα πρέπει να είναι παρόμοια με αυτήν:
Η κεφαλίδα και το υποσέλιδο στην παραπάνω εικόνα θα είναι διαφορετικά από τα δικά σας.
Βήμα 3: Προσθέστε προσαρμοσμένα στυλ στη φόρμα σας
Στο προηγούμενο βήμα, η φόρμα σύνδεσης αποδίδεται ως παράγραφος χρησιμοποιώντας το {{ form.as_p }} ετικέτα. Για να προσθέσετε στυλ στη φόρμα σας, πρέπει να γνωρίζετε την αξία του όνομα χαρακτηριστικό που σχετίζεται με κάθε πεδίο εισαγωγής.
Μπορείτε να επιθεωρήσετε τη σελίδα σας για να λάβετε τις τιμές που χρειάζεστε.
Η παραπάνω εικόνα δείχνει το χαρακτηριστικό name που σχετίζεται με το ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ πεδίο της φόρμας.
Τώρα, μπορείτε να προσθέσετε τα πεδία φόρμας μεμονωμένα στο έργο σας. Για παράδειγμα, μπορείτε να προσθέσετε το πεδίο email ως εξής:
{{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
{{ form.login.errors|safe }}
Μπορείς χρησιμοποιήστε το Bootstrap με το έργο σας στο Django για να διαμορφώσετε εύκολα τη φόρμα σας. Εδώ είναι ένα παράδειγμα:
<divclass="form-floating form-group">
{{ form.login }}
<labelfor="{{form.login.id_for_label}}">Emaillabel>
{{ form.login.errors|safe }}
div>
Ο παραπάνω κώδικας προσθέτει κλάσεις φόρμας Bootstrap στη φόρμα. Τώρα, μπορείτε να προσθέσετε τα άλλα πεδία που χρειάζεστε και να τα διαμορφώσετε σύμφωνα με τις προτιμήσεις σας. Εάν δεν σας αρέσει να χρησιμοποιείτε το Bootstrap για στυλ, Το django-crispy-forms είναι μια εναλλακτική λύση για το styling των φορμών σας. Το παρακάτω παράδειγμα χρησιμοποιεί το Bootstrap για στυλ.
<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>
Το μπλοκ κώδικα παραπάνω θα παράγει έξοδο παρόμοια με την παρακάτω εικόνα:
Μπορείτε να μάθετε περισσότερα για τις φόρμες στο django-allauth διαβάζοντας το επίσημη τεκμηρίωση.
Παράκαμψη οποιουδήποτε προτύπου στο django-allauth
Το django-allauth περιέχει πολλά προεπιλεγμένα πρότυπα που μπορείτε να παρακάμψετε. Με τα βήματα σε αυτόν τον οδηγό, μπορείτε να παρακάμψετε οποιοδήποτε πρότυπο στο django-allauth. Θα πρέπει να εξετάσετε το ενδεχόμενο να χρησιμοποιήσετε αυτό το πακέτο για να χειριστείτε το σύστημα ελέγχου ταυτότητας, ώστε να μπορείτε να εστιάσετε στη δημιουργία των άλλων σημαντικών δυνατοτήτων της εφαρμογής σας.