Configurer l'authentification pour un site Python Django

Consultez un didacticiel précédent si vous n'avez pas encore configuré de projet. La première chose qu'on fera est d'installer le package dans notre environnement virtuel:

pip3 install django-allauth

Ajoutez django-allauth à requirements.txt. On doit changer quelques éléments dans notre fichier de paramètres, en notre cas settings/base.py. Si vous avez suivi un didacticiel antérieur et installé Wagtail, certains de ces paramètres ont déjà été ajoutés. Tout d'abord, vérifiez que django.template.context_processors.request se trouve dans context_processors ou ajoutez-le. Ajoutez ensuite les backends d'authentification requis:

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',
    ...
)

Vérifiez que les applications suivantes figurent dans vos INSTALLED_APPS:

'django.contrib.auth',
'django.contrib.messages',
'django.contrib.sites',

et ajoutez les suivants:

'allauth',
'allauth.account',
'allauth.socialaccount',

Les trois sont requis, même si vous ne prévoyez pas d'utiliser un compte social pour vous connecter. On ajoutera des paramètres spécifiques pour les comptes sociaux plus tard. Ajoutez:

SITE_ID = 1

s'il n'est pas déjà là. Accédez maintenant au fichier urls.py de votre projet (et non à l'urls.py de votre application) et ajoutez ce qui suit à votre variable urlpatterns:

from django.urls import path

urlpatterns = [
    ...
    path('accounts/', include('allauth.urls')),
    ...
]

Migrez la base de données et exécutez le serveur:

python3 manage.py makemigrations
python3 manage.py migrate
python3 manage.py runserver

Comme allauth a beaucoup de modèles, de vues et de formulaires préinstallés, certaines des fonctionnalités de base sont déjà disponibles maintenant. Par exemple, http://127.0.0.1:8000/accounts/login/ et http://127.0.0.1:8000/accounts/logout/ nous permettent déjà de nous connecter et de nous déconnecter. Cependant, si on se connecte avec succès, on se retrouve à l'adresse URL inconnue http://127.0.0.1:8000/accounts/profile/. En effet, allauth s'appuie sur LoginView de Django, qui redirige vers /accounts/profile/ après la connexion. Puisque allauth ne fournit pas de modèle pour cela, on va le créer soi-même ci-dessous. D'abord quelques préparatifs.

Tous les modèles de compte pour allauth doivent aller dans le répertoire account/ de votre application, dans notre cas userauth/templates/userauth/account/, alors créez ce répertoire.

Assurez-vous d'avoir ajouté le chemin userauth/templates/userauth/ à TEMPLATES dans votre fichier de paramètres. Attention: le répertoire contenant les modèles est appelé account/, tandis que les URL ont un s supplémentaire: /accounts/…/. L'url …/accounts/login/ utilise donc le modèle …/account/login.html.

Tous les modèles par défaut allauth sont ici. Copiez le modèle account/logout.html et placez-le dans notre propre account/ dossier. Modifiez le premier paragraphe en

<p>{% trans 'Are you ABSOLUTELY sure you want to sign out?' %}</p>

et visitez http://127.0.0.1:8000/accounts/logout/ (connectez-vous d'abord si nécessaire) pour vérifier que notre application utilise désormais notre propre modèle.

Juste une note sur la traduction: tous les modèles allauth sont multilingues par défaut, c'est-à-dire qu'ils utilisent les balises de modèle trans chargées avec {% load i18n%}. On le fera également dans nos propres modèles.

Il est maintenant temps de rendre nos modèles plus agréables; on utilisera Bootstrap pour cela. Accédez au fichier base.html dans votre dossier de modèles de projet. Copiez le lien vers le fichier CSS de Bootstrap et ajoutez-le au point désigné dans votre fichier base.html. Ajoutez également les liens Javascript vers la fin de votre modèle base.html comme expliqué.

Dans ce tutoriel (mais n'hésitez pas à utiliser votre propre créativité!), on utilisera le système de grille Bootstrap combiné avec des cartes Bootstrap avec en-têtes et pieds de page. Cela permet à nos modèles de répondre à la largeur de notre fenêtre d'affichage. L'utilisation de cartes nous permettra de mettre différentes parties des modèles dans l'en-tête, le corps ou le pied de page de la carte. Créez un modèle base_card.html qui fait cela, avec le contenu suivant:

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

Avec quelques modifications dans le fichier logout.html que on a copié, on utilise les blocs auto-créés card-header et card-body, comme suit:

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

Découvrez à quoi ressemble notre page de déconnexion à l'adresse /accounts/logout/.

Revenons maintenant à notre modèle manquant dans /accounts/profile/. Dans votre application (userauth), créez un fichier urls.py avec le contenu suivant:

from django.urls import path
from .views import profile_view

urlpatterns = [
    path('profile/', profile_view, name='account_profile'),
]

Et ajoutez ce qui suit aux modèles d'url de notre fichier urls.py de projet:

path('accounts/', include('userauth.urls')),

pour rendre notre profil disponible sur l'url /accounts/profile/. Ajoutez au fichier views.py:

def profile_view(request):
    return render(request, 'account/profile.html')

La seule chose qu'on doit faire maintenant est de créer le modèle profile.html dans notre dossier de modèles userauth/templates/userauth/account/. Créez le fichier et ajoutez le contenu suivant:

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

Notez le |default. Lorsque les champs ne sont pas définis, la valeur None s'affiche dans le modèle. Pour éviter cela, on utilise le filtre default de Django, qui n'affiche rien (une phrase vide).

Maintenant, si on se connecte avec succès, on est redirigé vers cette page de profil qu'on vient de créer. Évidemment, c'est un modèle très simple, avec seulement le prénom et le nom. On peut également ajouter tous les autres champs utilisateur à notre modèle, consultez le référentiel pour le profile.html complet.

On pourra aussi bien définir profile.html comme notre page de destination par défaut après la création d'un nouvel utilisateur. Pour ce faire, ajoutez la méthode get_absolute_url dans votre modèle utilisateur:

def get_absolute_url(self):
    return reverse('account_profile')

C'est l'essentiel pour configurer allauth et ses modèles. Lisez la suite si vous souhaitez embellir les formulaires d'allauth (comme se connecter / s'inscrire), configurer la vérification des e-mails lors de la connexion ou utiliser des comptes sociaux pour vous connecter.

Configurer allauth dans un projet Django