In deze tutorial zullen we authenticatie instellen in een Django-project met behulp van het populaire pakket allauth en er enkele templates voor maken.
Bezoek een eerdere tutorial als je nog geen project hebt opgezet. Het eerste wat we doen is het pakket installeren in onze virtuele omgeving:
pip3 install django-allauthVoeg django-allauth toe aan requirements.txt. We moeten een aantal dingen wijzigen in ons instellingenbestand, in ons geval settings/base.py. Als je een eerdere tutorial hebt gevolgd en Wagtail hebt geïnstalleerd, zijn sommige van deze instellingen al toegevoegd. Controleer eerst of django.template.context_processors.request in context_processors staat of voeg het toe. Voeg vervolgens de vereiste authenticatie-backends toe:
AUTHENTICATION_BACKENDS = (
...
# Needed to login by username in Django admin, regardless of `allauth`
'django.contrib.auth.backends.ModelBackend',
# `allauth` specific authentication methods, such as login by e-mail
'allauth.account.auth_backends.AuthenticationBackend',
...
)Controleer of de volgende apps in je INSTALLED_APPS staan:
'django.contrib.auth',
'django.contrib.messages',
'django.contrib.sites',en voeg de volgende toe:
'allauth',
'allauth.account',
'allauth.socialaccount',Alle drie zijn vereist, zelfs als je niet van plan bent een sociaal account te gebruiken om je aan te melden. We zullen later specifieke instellingen voor individuele sociale accounts toevoegen. Voeg toe:
SITE_ID = 1als het er nog niet is. Ga nu naar het project urls.py-bestand (niet de urls.py van je app) en voeg het volgende toe aan de urlpatterns-variabele:
from django.urls import path
urlpatterns = [
...
path('accounts/', include('allauth.urls')),
...
]Migreer de database en start de server:
python3 manage.py makemigrations
python3 manage.py migrate
python3 manage.py runserverOmdat allauth veel vooraf geïnstalleerde templates, views en formulieren heeft, is een deel van de basisfunctionaliteit nu al beschikbaar. Met http://127.0.0.1:8000/accounts/login/ en http://127.0.0.1:8000/accounts/logout/ kunnen we bijvoorbeeld al inloggen en uitloggen. Als we ons echter met succes aanmelden, komen we terecht op de onbekende URL http://127.0.0.1:8000/accounts/profile/. Dat komt omdat allauth voortbouwt op Django's LoginView, die omleidt naar /accounts/profile/ na inloggen. Aangezien allauth daar geen template voor biedt, gaan we die hieronder zelf maken. Eerst wat voorbereidingen.
Alle account-templates voor allauth moeten in de directory account/ van je app staan, in ons geval userauth/templates/userauth/account/, dus maak deze directory aan.
Zorg ervoor dat je het pad userauth/templates/userauth/ aan TEMPLATES in je instellingenbestand hebt toegevoegd. Pas op: de directory met de templates heet account/, terwijl de url's een extra s hebben: /accounts/…/. Dus de url .../accounts/login/ gebruikt het template .../account/login.html.
Alle standaard allauth-templates bevinden zich hier. Kopieer de template account/logout.html en plaats deze in onze eigen account/ map. Wijzig de eerste alinea in
<p>{% trans 'Are you ABSOLUTELY sure you want to sign out?' %}</p>en bezoek http://127.0.0.1:8000/accounts/logout/ (log eerst in indien nodig) om te controleren of onze app nu ons eigen template gebruikt.
Een opmerking over vertaling: alle allauth-templates zijn standaard meertalig, d.w.z. ze gebruiken de templatetags trans die zijn geladen met {% load i18n%}. We zullen dit ook in onze eigen templates doen.
Nu is het tijd om onze templates wat mooier te maken; daarvoor gebruiken we Bootstrap. Ga naar het bestand base.html in de map met projecttemplates. Kopieer de link naar het CSS-bestand van Bootstrap en voeg deze toe op het aangegeven punt in je base.html-bestand. Voeg ook de JavaScript-links toe aan het einde van de base.html-template, zoals uitgelegd.
In deze tutorial (maar voel je vrij om je eigen creativiteit te gebruiken!) gebruiken we het Bootstrap-gridsysteem in combinatie met Bootstrap-kaarten met kop- en voetteksten. Hierdoor kunnen onze templates reageren op de breedte van onze viewport. Door kaarten te gebruiken, kunnen we verschillende delen van de templates in de koptekst, het hoofdgedeelte of de voettekst van de kaart plaatsen. Maak een template base_card.html die dit doet, met de volgende inhoud:
{% extends 'base.html' %}
{% block content %}
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 col-md-10 col-sm-12">
<div class="card">
<div class="card-header">
{% block card-header %}{% endblock %}
</div>
<div class="card-body">
{% block card-body %}{% endblock %}
</div>
<div class="card-footer text-muted text-center">
{% block card-footer %}{% endblock %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}Met een paar wijzigingen in het logout.html-bestand dat we hebben gekopieerd, gebruiken we de zelfgemaakte blokken card-header en card-body als volgt:
{% extends 'account/base_card.html' %}
{% load i18n %}
{% block title %}{% trans "Sign Out" %}{% endblock %}
{% block card-header %}
<h3>{% trans "Sign Out" %}</h3>
{% endblock %}
{% block card-body %}
<p>{% trans "Are you sure you want to sign out?" %}</p>
<form method="POST" action="{% url 'account_logout' %}">
{% csrf_token %}
<button type="submit" class="btn btn-outline-primary btn-sm">{% trans "Sign Out" %}</button>
</form>
<br><p>{% trans "No, stay logged in" %}</p>
<a href="/" class="btn btn-outline-primary">{% trans "Return to site" %}</a>
{% endblock %}Bekijk hoe onze uitlogpagina er nu uitziet, op /accounts/logout/.
Laten we nu terugkeren naar onze ontbrekende template op /accounts/profile/. Maak binnen je app (userauth) een urls.py-bestand met de volgende inhoud:
from django.urls import path
from .views import profile_view
urlpatterns = [
path('profile/', profile_view, name='account_profile'),
]En voeg het volgende toe aan de url patronen van ons project urls.py bestand:
path('accounts/', include('userauth.urls')),om ons profiel beschikbaar te maken via de url /accounts/profile/. Voeg toe aan het views.py bestand:
def profile_view(request):
return render(request, 'account/profile.html')Het enige dat we nu nog moeten doen is de template profile.html creëren in onze templates-folder userauth/templates/userauth/account/. Creëer het bestand en voeg de volgende inhoud toe:
{% extends 'account/base_card.html' %}
{% load i18n static %}
{% block title %}{% trans "Profile" %}{% endblock %}
{% block card-header %}
<h3>{% trans "Account profile" %}</h3>
{% endblock %}
{% block card-body %}
<div class="container">
<div class="row">
<div class="col border">
<small>{% trans "First name" %}:</small><br>
{{ request.user.first_name|default:'' }}
</div>
<div class="col border">
<small>{% trans "Last name" %}:</small><br>
{{ request.user.last_name|default:'' }}
</div>
</div>
</div>
{% endblock %}Let op de |default. Als velden niet gedefinieerd zijn, wordt de waarde None weergegeven in de template. Om dit te voorkomen, gebruiken we Django's filter default, die niets weergeeft (een lege string).
Als we ons nu hebben aangemeld, worden we doorgestuurd naar deze profielpagina die we zojuist hebben gemaakt. Het is duidelijk dat dit een heel eenvoudig template is, met alleen voor- en achternaam. We kunnen ook alle andere gebruikersvelden aan ons template toevoegen, bekijk de repository voor het volledige bestand profile.html.
We kunnen net zo goed profile.html instellen als onze standaard bestemmingspagina nadat een nieuwe gebruiker is aangemaakt. Voeg hiervoor de methode get_absolute_url toe aan het gebruikersmodel:
def get_absolute_url(self):
return reverse('account_profile')Dit is de basis voor het instellen van allauth en de bijbehorende templates. Lees verder als je de formulieren van allauth wilt verfraaien (zoals inloggen / aanmelden), e-mailverificatie wilt instellen bij het inloggen of sociale accounts wilt gebruiken om in te loggen.
Reageer op dit artikel (log eerst in of bevestig hieronder met naam en email)