Configurer une connexion validée avec allauth dans Django

Supposons qu'on a un projet Django en cours d'exécution, avec une application installée (appelée userauth dans notre cas) et un modèle logout.html déjà copié de allauth dans notre répertoire de modèles. Si nécessaire, vous pouvez lire ici comment procéder.

Commençons donc par copier login.html depuis allauth et le placer là où allauth l'attend, dans le répertoire account/ de notre répertoire de modèles userauth/templates/userauth/. On peut accéder au formulaire en allant sur http://127.0.0.1:8000/accounts/login/.

En utilisant Bootstrap, on a créé un nouveau modèle de base avec trois blocs card-header, card-body et card-footer, pour rendre nos modèles plus beaux. On va diviser notre modèle login.html en ces trois parties, résultant en le code html suivant:

{% 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 %}

Ce qu'on a ici est un en-tête de carte avec un titre, un corps de carte avec un formulaire de connexion et un pied de page de carte avec des liens pour vous inscrire ou réinitialiser notre mot de passe; les noms de ceux-ci sont définis dans allauth. Le bouton de soumission a une belle classe de bouton Bootstrap. Dans la forme originale on avait

{{ form.as_p }}

qui est un moyen rapide d'afficher tous les champs du formulaire. On a séparé le champ de connexion et de mot de passe et inclus un extrait de formulaire séparé form_field.html pour les afficher. Cela nous permet de contrôler où placer tous les champs d'entrée tout en conservant une apparence et une logique pour tous nos champs. Les balises with et include sont des balises de modèle Django standard.

On va composer l'extrait form_field.html à l'aide de widget-tweaks, qui peut magnifiquement rendre les champs avec seulement quelques balises et filtres. On installe d'abord le package:

pip3 install django-widget-tweaks

et on le met dans notre requirements.txt, ainsi qu'on ajoute widget_tweaks à nos applications installées. Il existe de très bons exemples sur son utilisation sur le Web, et après avoir expérimenté un peu, on utilisera le code suivant:

{% 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 %}

Si le formulaire est lié, c'est-à-dire s'il a déjà été soumis (peut-être avec des erreurs), alors toutes les erreurs sont affichées ou le champ est 'vert' et validé. Si c'est la première fois que le formulaire est affiché, le champ est rendu avec le nom du champ ajouté comme dernière partie de la classe, de sorte qu'il peut être stylé différemment si nécessaire.

Essayons si cela fonctionne. Si nécessaire, déconnectez-vous d'abord, puis accédez à http://127.0.0.1:8000/accounts/login/, remplissez les informations d'identification incorrectes pour un utilisateur et voyez ce qui se passe. Avec les bons identifiants, on est connecté.

L'inscription peut se faire de la même manière. Mais vous préférez peut-être vous inscrire avec la vérification de l'e-mail ou avec des comptes sociaux.

Configuration validée de la connexion avec allauth dans Django