Gevalideerde login implementeren met allauth in Django

We gaan ervan uit dat we een Django-project in gebruik hebben, met een geïnstalleerde app (in dit geval userauth genoemd) en één template logout.html die al is gekopieerd van allauth in onze templatedirectory. Zo nodig leest u hier hoe u dat moet doen.

Dus laten we beginnen met het kopiëren van login.html van allauth en het plaatsen waar allauth het verwacht, in de directory account/ van onze templatedirectory userauth/templates/userauth/. We hebben toegang tot het formulier door naar http://127.0.0.1:8000/accounts/login/ te gaan.

Met Bootstrap hebben we een nieuw basistemplate gemaakt met drie blokken card-header, card-body en card-footer, om onze templates er mooier uit te laten zien. We gaan ons login.html-template verdelen in deze drie delen, wat resulteert in de volgende html-code:

{% extends 'account/base_card.html' %}

{% load i18n %}

{% block title %}{% trans "Sign In" %}{% endblock %}

{% block card-header %}
    <h3>{% trans "Sign In" %}</h3>
{% endblock %}

{% block card-body %}

    <form method="POST" action="{% url 'account_login' %}">
        {% csrf_token %}
        <div class="form-group">
            {% with field=form.login %}{% include "account/form_field.html" %}{% endwith %}
        </div>
        <div class="form-group">
            {% with field=form.password %}{% include "account/form_field.html" %}{% endwith %}
        </div>
        <button type="submit" class="btn btn-outline-primary">{% trans "Sign In" %}</button>
    </form>

{% endblock %}

{% block card-footer %}
    <p>{% trans "Don't have an account?" %} <a href="{{ signup_url }}">{% trans "Sign Up" %}</a></p>
    <small>
        <a class="text-muted" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
    </small>
{% endblock %}

Wat we hier hebben is een kaart-header met een titel, een kaart-body met een inlogformulier en een kaart-footer met links om je aan te melden of om ons wachtwoord opnieuw in te stellen; de namen hiervoor zijn gedefinieerd in allauth. De verzendknop heeft een mooie Bootstrap-button-klasse. In de oorspronkelijke vorm hadden we

{{ form.as_p }}

wat een snelle manier is om alle velden van het formulier weer te geven. We hebben het login- en wachtwoordveld gescheiden en een apart fragment form_field.html toegevoegd om deze weer te geven. Dat stelt ons in staat om controle te hebben over waar alle invoervelden moeten worden geplaatst met behoud van één look en feel en logica voor al onze velden. De tags with en include zijn standaard Django-templatetags.

We zullen het fragment form_field.html invullen met behulp van widget-tweaks, dat velden prachtig kan weergeven met slechts een paar tags en filters. Eerst installeren we het pakket:

pip3 install django-widget-tweaks

en zetten het in onze requirements.txt, en voegen widget_tweaks toe aan onze geïnstalleerde apps. Er zijn zeer goede voorbeelden van het gebruik ervan op internet en na een beetje experimenteren gebruiken we de volgende code:

{% load widget_tweaks %}

<small>{{ field.label_tag }}</small>

{% if form.is_bound %}
    {% if field.errors or form.non_field_errors %}
        {% render_field field class="form-control is-invalid" %}
        <div class="invalid-feedback">
            {{ form.non_field_errors }}
            {{ field.errors }}
        </div>
    {% else %}
        {% render_field field class="form-control is-valid" %}
    {% endif %}
{% else %}
    {% with "form-control input-field-"|add:field.name as field_class %}{% render_field field class=field_class %}{% endwith %}
{% endif %}

Als het formulier is gebonden, d.w.z. als het al is ingediend (misschien met fouten), worden eventuele fouten weergegeven of is het veld 'groen' en gevalideerd. Als het formulier voor het eerst wordt weergegeven, wordt het veld weergegeven met de veldnaam als laatste deel van de klasse toegevoegd, zodat het indien nodig anders kan worden opgemaakt.

Laten we proberen of het werkt. Log indien nodig eerst uit en ga dan naar http://127.0.0.1:8000/accounts/login/, vul de verkeerde gegevens in voor een gebruiker en kijk wat er gebeurt. Met de juiste inloggegevens zijn we ingelogd.

Aanmelden kan op dezelfde manier. Maar misschien geef je er de voorkeur aan je aan te melden met e-mailverificatie of met sociale accounts.

Gevalideerd inloggen met allauth implementeren in Django