Tutoriel : Authentifier les utilisateurs avec Django dans Visual Studio

Article
02/03/2025

Cet article présente l’étape 5 de la série de tutoriels Utiliser l’infrastructure web Django dans Visual Studio.

L’authentification est une exigence courante pour les applications web. Le modèle de projet web Django dans Visual Studio fournit tous les modules nécessaires pour l'authentification dans le fichier settings.py du projet Django. L’étape 4 de cette série de tutoriels crée une application web Django à l’aide de ce modèle. À l’étape 5, vous explorez les fonctionnalités d’authentification du modèle et utilisez les fonctionnalités de l’application en cours d’exécution.

À l’étape 5 du didacticiel, vous allez apprendre à :

Explorer le flux d’authentification dans le modèle de projet web Django dans Visual Studio
Examiner le code qui prend en charge le processus d’authentification
Modifier le code pour activer l’accès aux interfaces d’administrateur Django
Exécuter l’application web Django et utiliser les fonctionnalités d’authentification

Conditions préalables

Une solution Visual Studio et une application web Django basée sur le modèle projet web Django (DjangoWeb). Étape 4 : Utilisez le modèle de projet web Django complet explique comment créer cette application.
L’application web Django doit avoir un compte super utilisateur (administrateur). Étape 4 (Créer un super utilisateur Django) explique comment créer les informations d’identification des super utilisateurs.
Consultez la section Prérequis de l’étape 1 de cette série de tutoriels pour plus d’informations sur les versions de modèles Django, les projets Visual Studio et les projets Django et le développement Python sur Mac.

Explorer le flux d’authentification

Cette section explique le flux d’authentification par défaut fourni par le modèle projet web Django pour une application web Django.

Dans Visual Studio, sélectionnez Déboguer>Démarrer le débogage (F5) pour démarrer l’application web Django (DjangoWeb).
Lorsque l’application s’ouvre dans le navigateur, remarquez l’option se connecter sur la droite du menu de navigation :

L’application Django en cours d’exécution dispose d’une barre de navigation avec trois options de page : la page d’accueil, la page À propos, et la page de contact, ainsi qu’une option Se connecter. La configuration de l’authentification permet à tout utilisateur de voir le contenu des pages « Accueil », « À propos » et « Contact ».
Pour l’accès authentifié à l’application web Django, un super utilisateur désigné peut utiliser l’option Se connecter, qui ouvre la page « Se connecter » :
Une fois que le super utilisateur se connecte, il peut accéder aux vues de page restreintes pour le site et effectuer les tâches d’administration :
Le super utilisateur peut utiliser l’option Se déconnecter pour se déconnecter de l’application web Django et revenir à la page « Accueil » de l’application web Django en tant qu’utilisateur non authentifié.

Dans les sections suivantes, vous modifiez la configuration d’authentification pour prendre en charge l’accès au site d’administration Django pour le super utilisateur.

Examiner le code d’authentification

Maintenant que vous comprenez les fonctionnalités d’authentification générales d’une application web Django, vous êtes prêt à examiner le code sous-jacent fourni par le modèle projet web Django :

Dans Explorateur de solutions, développez le dossier app/modèles/app du projet. Les étapes suivantes passent en revue plusieurs fichiers dans ce dossier.
Ouvrez le fichier de modèle de base, layout.html. Faites défiler jusqu’à l’élément <div class="navbar ...> et recherchez la balise {% include app/loginpartial.html %}.

La balise {% include %} indique au système de modèle de Django d’extraire le contenu du fichier inclus à ce stade dans le modèle conteneur.

Ouvrez le fichier loginpartial.html. Observez comment ce modèle utilise la balise conditionnelle {% if user.is_authenticated %} avec une balise de {% else %} pour afficher différents éléments d’interface utilisateur selon que l’utilisateur est authentifié :

{% if user.is_authenticated %}
<form id="logoutForm" action="/logout" method="post" class="navbar-right">
    {% csrf_token %}
    <ul class="nav navbar-nav navbar-right">
        <li><span class="navbar-brand">Hello {{ user.username }}!</span></li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
</form>

{% else %}

<ul class="nav navbar-nav navbar-right">
    <li><a href="{% url 'login' %}">Log in</a></li>
</ul>

{% endif %}

Lorsque vous démarrez l’application, aucun super utilisateur n’est authentifié et le code du modèle restitue uniquement le lien Se connecter. Le lien cible le chemin d’accès « login » relatif au site spécifié dans le fichier URL du projet Django (DjangoWeb/DjangoWeb/urls.py), comme décrit à l’étape 4 (Examiner les modèles d’itinéraire d’URL). L’itinéraire « connexion » est mappé à la vue django.contrib.auth.views.login et la vue reçoit les données suivantes :
```
{
    'template_name': 'app/login.html',
    'authentication_form': app.forms.BootstrapAuthenticationForm,
    'extra_context':
    {
        'title': 'Log in',
        'year': datetime.now().year,
    }
}
```
Ce code définit trois propriétés :
- template_name identifie le modèle pour la page « Se connecter » définie dans le fichier app/login.html. N’oubliez pas que ce lien est relatif au site. Le chemin complet du dossier est app/templates/app/login.html.
- extra_context ajoute des informations aux données de contexte par défaut données au modèle. Dans ce cas, les informations incluent un titre « Se connecter », ainsi que la date, l’heure et l’année.
- authentication_form spécifie une classe de formulaire à utiliser avec la procédure de connexion. Dans le modèle, cette valeur de propriété apparaît sous la forme de l’objet form. La valeur par défaut est AuthenticationForm (à partir de django.contrib.auth.views), mais le modèle de projet Visual Studio utilise plutôt le formulaire défini dans le fichier application/forms.py du projet :
```
from django import forms
from django.contrib.auth.forms import AuthenticationForm
from django.utils.translation import ugettext_lazy as _

class BootstrapAuthenticationForm(AuthenticationForm):
    """Authentication form which uses bootstrap CSS."""
    username = forms.CharField(max_length=254,
                            widget=forms.TextInput({
                                'class': 'form-control',
                                'placeholder': 'User name'}))
    password = forms.CharField(label=_("Password"),
                            widget=forms.PasswordInput({
                                'class': 'form-control',
                                'placeholder':'Password'}))
```
  La classe de formulaire dérive de AuthenticationForm et remplace spécifiquement les champs nom d’utilisateur et mot de passe pour ajouter du texte d’espace réservé. Le modèle Visual Studio inclut ce code explicite en supposant que vous souhaitez probablement personnaliser le formulaire, comme l’ajout de la validation de la force du mot de passe.

Lorsque l’interaction utilisateur avec l’application ouvre la page « Se connecter », l’application affiche le modèle login.html. Les variables {{ form.username }} et {{ form.password }} affichent les formulaires CharField à partir de la classe BootstrapAuthenticationForm. Il existe également une section intégrée pour afficher les erreurs de validation et un élément prêt pour les connexions sociales si vous choisissez d’ajouter ces services :

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}</h2>
<div class="row">
    <div class="col-md-8">
        <section id="loginForm">
            <form action="." method="post" class="form-horizontal">
                {% csrf_token %}
                <h4>Use a local account to log in.</h4>
                <hr />
                <div class="form-group">
                    <label for="id_username" class="col-md-2 control-label">User name</label>
                    <div class="col-md-10">
                        {{ form.username }}
                    </div>
                </div>
                <div class="form-group">
                    <label for="id_password" class="col-md-2 control-label">Password</label>
                    <div class="col-md-10">
                        {{ form.password }}
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="hidden" name="next" value="/" />
                        <input type="submit" value="Log in" class="btn btn-default" />
                    </div>
                </div>
                {% if form.errors %}
                <p class="validation-summary-errors">Please enter a correct user name and password.</p>
                {% endif %}
            </form>
        </section>
    </div>
    <div class="col-md-4">
        <section id="socialLoginForm"></section>
    </div>
</div>

{% endblock %}

Lorsque l’utilisateur sélectionne se connecter dans le formulaire de page, Django tente d’authentifier les informations d’identification, telles que les informations d’identification du super utilisateur :
- Si l’authentification échoue, l’utilisateur reste sur la page « Se connecter » et la balise form.errors a la valeur true :
- Si l’authentification réussit, Django ouvre l’URL relative dans le champ next, <input type="hidden" name="next" value="/" />, qui dans ce cas est la page « Accueil » (/).
Lorsque l’application affiche la page « Accueil » après l’authentification de l’utilisateur, la propriété user.is_authenticated a la valeur true lorsque le modèle loginpartial.html est rendu. Dans ce cas, la barre de navigation affiche un message Hello (nom d’utilisateur) et l’option Se déconnecter remplace l’option Se connecter :

Vous pouvez utiliser la propriété user.is_authenticated dans d’autres parties du code de l’application pour vérifier l’authentification.

Accéder aux interfaces d’administrateur Django

Pour vérifier si l’utilisateur authentifié est autorisé à accéder à des ressources spécifiques, vous devez récupérer des autorisations spécifiques à l’utilisateur à partir de votre base de données.

Le super utilisateur ou l’administrateur, en particulier, est autorisé à accéder aux interfaces d’administrateur Django intégrées à l’aide des URL relatives du site /admin/ et /admin/doc/. Pour plus d’informations, consultez Utilisation du système d’authentification Django (documentation Django).

Pour activer l’accès aux interfaces d’administrateur Django, procédez comme suit :

Installez le package docutils Python dans votre environnement. Pour obtenir des instructions, consultez Installer des packages pour l’environnement Python.
Dans Explorateur de solutions, développez le dossier du projet Django, DjangoWeb/DjangoWeb/. Les étapes suivantes mettent à jour plusieurs fichiers dans ce dossier.
Ouvrez le fichier urls.py du projet Django et modifiez le contenu comme suit :
1. En haut du fichier, ajoutez l’importation de package suivante pour les URL à la fin de la liste actuelle :
```
from django.conf.urls import include
```
2. Après la liste d’importation, ajoutez l’instruction suivante :
```
admin.autodiscover()
```
3. Recherchez la définition urlpatterns et ajoutez l’entrée de chemin suivante avant l’entrée 'admin/' :
```
path('admin/doc/', include('django.contrib.admindocs.urls')),
```
Ouvrez le fichier settings.py du projet Django et recherchez la collection INSTALLED_APPS. Ajoutez immédiatement l’entrée suivante après l’entrée app :
```
'django.contrib.admindocs',
```
Arrêtez et redémarrez l’application web Django.
Dans le champ d’adresse URL du navigateur, remplacez l’affichage de page de l’application par l’itinéraire /admin/ ou /admin/doc/. Ces pages fournissent au super utilisateur l’accès aux tâches d’administration Django, telles que la création de comptes d’utilisateur ou de groupe, la modification du mot de passe et l’affichage de la documentation Django :

Explorer le comportement de déconnexion

Il existe deux façons pour le super utilisateur de se déconnecter et de mettre fin à la session authentifiée. L’application web Django inclut l’option Se déconnecter dans la barre de navigation et le site d’administration Django fournit l’option Déconnexion.

Déconnectez-vous du site d’administration Django

Si le super utilisateur affiche des pages sur le site d’administration Django, il peut sélectionner Se déconnecter dans la barre de navigation du site. Le navigateur s’actualise pour afficher la page « Déconnexion » du site :

Sur cette page, l'utilisateur a deux options : Accueil et Se reconnecter. Les deux options renvoient l’utilisateur à la page « Accueil » du site d’administration Django (/admin), où l’utilisateur est invité à entrer à nouveau ses informations d’identification.

Se déconnecter de l’application web Django

Si le super utilisateur consulte des pages de l'application web Django, par exemple « À propos » ou « Contact », il peut sélectionner se déconnecter dans la barre de navigation de l'application. Le comportement de déconnexion est minimal. Il met simplement fin à la session authentifiée et retourne l’utilisateur à la page « Accueil » de l’application.

Vous pouvez retravailler le comportement de déconnexion afin qu’il soit plus informatif pour l’utilisateur :

Dans Explorateur de solutions, développez le dossier application/modèles/application/application du projet, puis ouvrez le fichier loginpartial.html.
Dans le fichier de modèle, notez que le lien Se déconnecter effectue simplement une opération HTTP POST (action="/logout" method="post") vers le chemin d’URL relatif du site « /login » (href="{% url 'login' %}").
```
{% if user.is_authenticated %}
<form id="logoutForm" action="/logout" method="post" class="navbar-right">
   {% csrf_token %}
   <ul class="nav navbar-nav navbar-right">
      <li><span class="navbar-brand">Hello {{ user.username }}!</span></li>
      <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
   </ul>
</form>

{% else %}

<ul class="nav navbar-nav navbar-right">
   <li><a href="{% url 'login' %}">Log in</a></li>
</ul>

{% endif %}
```
La fonction de vue intégrée django.contrib.auth.views.logout gère ce processus de déconnexion.

Le comportement actuel n’affiche aucune interface utilisateur qui permet à l’utilisateur de savoir qu’il est déconnecté. Le processus renvoie simplement l’utilisateur à la page « Accueil » de l’application web Django en fonction du modèle de chemin d’accès 'logout/' défini dans le fichier URL du projet Django (DjangoWeb/DjangoWeb/urls.py) :
```
 path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
```
Pour afficher une confirmation de déconnexion plus informative, vous pouvez créer une page « Se déconnecter » pour l’application.
Dans le dossier application/modèles/application, créez un fichier de modèle HTML nommé loggedoff.html.

Ajoutez le contenu suivant au nouveau fichier de modèle :

{% extends "app/layout.html" %}
{% block content %}
<h3>You have been logged off</h3>
{% endblock %}

Dans le fichier URL du projet Django, DjangoWeb/DjangoWeb/urls.py, modifiez le modèle d’URL du chemin d’accès 'logout/' comme suit :
```
path('logout/', LogoutView.as_view(template_name='app/loggedoff.html'), name='logout'),
```
Le code mis à jour ajoute une propriété template_name pour fonctionner avec le nouveau modèle HTML pour la page « Déconnecté ».
Arrêtez et redémarrez l’application web Django. Reconnectez-vous, puis sélectionnez Se déconnecter. Cette fois, l’application affiche un message plus informatif à l’utilisateur pour confirmer qu’il est déconnecté :
Arrêtez le serveur et fermez les fenêtres du navigateur d’application.

Enregistrer le projet dans la gestion du code source

Si vous validez votre solution Visual Studio lors du contrôle de code source pendant cette série de tutoriels, c’est le bon moment pour effectuer une autre validation. Suivez les instructions de Étape 2 (valider les modifications apportées au contrôle de code source) de cette série de tutoriels.

Votre solution doit correspondre au code source du tutoriel sur GitHub : Microsoft/python-sample-vs-learning-django.

Utiliser {% csrf_token %} balise dans les éléments de formulaire

La balise {% csrf_token %} inclut la protection (csrf) contre la falsification de requête intersites intégrée dans Django (documents Django). Vous ajoutez généralement cette balise à n’importe quel élément qui implique des méthodes de requête POST, PUT ou DELETE, telles qu’un formulaire. La fonction de rendu du modèle (render) insère ensuite la protection nécessaire.

Révision du tutoriel

Félicitations pour avoir terminé ce tutoriel sur Django dans Visual Studio.

Dans ce tutoriel, vous avez appris à :

Créer différents types de projets Django à l’aide de différents modèles dans Visual Studio
Créer une application web Django avec plusieurs pages
Utiliser des modèles pour créer différents itinéraires et vues de page
Servir des fichiers statiques, ajouter des pages et utiliser l’héritage du modèle
Fournir un accès authentifié aux pages et fonctionnalités d’application restreintes et aux interfaces d’administration Django

Authentification utilisateur dans Django (docs.djangoproject.com)
Code source du didacticiel sur GitHub (Microsoft/python-sample-vs-learning-django)

Partage via

Tutoriel : Authentifier les utilisateurs avec Django dans Visual Studio

Conditions préalables

Explorer le flux d’authentification

Examiner le code d’authentification

Accéder aux interfaces d’administrateur Django

Explorer le comportement de déconnexion

Déconnectez-vous du site d’administration Django

Se déconnecter de l’application web Django

Enregistrer le projet dans la gestion du code source

Utiliser {% csrf_token %} balise dans les éléments de formulaire

Révision du tutoriel

Commentaires

Ressources supplémentaires

Partage via

Tutoriel : Authentifier les utilisateurs avec Django dans Visual Studio

Conditions préalables

Explorer le flux d’authentification

Examiner le code d’authentification

Accéder aux interfaces d’administrateur Django

Explorer le comportement de déconnexion

Déconnectez-vous du site d’administration Django

Se déconnecter de l’application web Django

Enregistrer le projet dans la gestion du code source

Utiliser {% csrf_token %} balise dans les éléments de formulaire

Révision du tutoriel

Contenu connexe

Commentaires

Ressources supplémentaires