Comment implémenter un système d’inscription – Authentification Django 3° partie

[Source image : stories – fr.freepik.com ]

Cet article est la troisième et dernière partie de notre série tuto consacrée à “la construction d’un système d’authentification pour votre application Django”. Nous allons voir ici comment permettre l’inscription d’un utilisateur.

Comme nous l’avons dit dans le premier article de ce tutoriel, l’inscription d’un utilisateur ne fait pas partie du système d’authentification par défaut de Django. Nous pouvons cependant créer notre page d’inscription à l’aide du formulaire UserCreationForm. Ce formulaire, fourni par Django, facilite l’inscription d’un nouvel utilisateur.

UserCreationForm est un ModelForm, c’est à dire un formulaire basé sur un modèle, en l’occurrence le modèle User par défaut de Django. Ce formulaire permet de créer un nouvel utilisateur et comporte trois champs : username (du modèle User), password1 (première saisie du mot de passe) et password2 (confirmation du mot de passe saisi). Le formulaire vérifie que les deux saisies du mot de passe sont identiques pour le valider. Pour plus d’informations, consultez la documentation officielle Django.

Dans cet article, nous utiliserons le formulaire de création d’utilisateurs pour construire une page d’inscription avec Django. Nous allons définir la vue de notre page d’inscription, puis construire le template et ajouter l’url associées à la page.

Le code source de l’application qu’on nous construisons est sur GitHub.

Définir la vue de la page d’inscription Django

Dans le fichier views.py de l’application usersapp, nous ajoutons la vue register() comme suit :

from django.shortcuts import render, redirect
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth import login, authenticate
from django.contrib import messages

def register(request):
	if request.method == 'POST' :
		form = UserCreationForm(request.POST)
		if form.is_valid():
			form.save()		
			username = form.cleaned_data.get('username')
			password = form.cleaned_data.get('password1')
			user = authenticate(username=username, password=password)
			login(request,user)	
			messages.success(request, f'Coucou {username}, Votre compte a été créé avec succès !')					
			return redirect('home')
	else :
		form = UserCreationForm()
	return render(request,'registration/register.html',{'form' : form})

Il faut évidemment importer le formulaire UserCreationForm (ligne 2) pour permettre à l’utilisateur de saisir son nom d’utilisateur username et son mot de passe password1. Si le formulaire est valide (ligne 9), on enregistre les données saisies (ligne 10). On récupère ensuite ces données enregistrées (lignes 11 et 12) et on les utilise en argument de la fonction authenticate (importée en ligne 3) pour authentifier l’utilisateur (ligne 13). On utilise les données d’authentification pour se connecter (ligne 14) à l’aide de la méthode login (importée en ligne 3). Ensuite, on affiche un message confirmant la création de compte (ligne 15). Enfin, on redirige l’utilisateur “connecté” à la page d’accueil (ligne 16).

Construire le template de la page d’inscription

Définissons ensuite le template register.html :

{% extends "base.html" %}
{% block content %}
    <h2>S'inscrire</h2>    
    <form method="post">
        {% csrf_token %}
        <table>
        {% for field in form %}
          <tr>
            <td>{{ field.label_tag }}</td>
            <td>{{ field }}</td>
          </tr>
          {% for error in field.errors %}
            <tr><td></td><td class="alert alert-danger">{{ error }}</td></tr>
            {% endfor %}
          {% endfor %}
         </table>
        <button type="submit">s'inscrire</button>       
    </form>
    <div>
    <small>
        Déjà inscrit.e?
        <a href="{% url 'login' %}">Se connecter</a>
    </small>
  </div>
{% endblock %}

Ce template est un simple formulaire d’inscription dans lequel l’utilisateur fournit son nom d’utilisateur et son mot de passe.

Ajouter l’url de la page d’inscription

Enfin, nous ajoutons dans urls.py de l’application usersapp le chemin vers la page d’inscription :

...
from usersapp import views

urlpatterns =[
  	...
	path('register/', views.register, name='register'),
]

Modifier le template de base

On ajoute l’url register au lien d’inscription de la barre de navigation (ligne 3). On s’assure aussi que le message confirmant l’inscription s’affiche pour l’utilisateur nouvellement inscrit (lignes 12 à 16).

...          
<li class="nav-item active">
            <a class="nav-link" href="{% url 'register' %}">Inscription</a>
          </li>
          {% endif %}
        </ul>
      </div>
    </nav>
    <br>
    <main role="main" class="container">
      <div>
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">{{ message }}</div>
            {% endfor %}
        {% endif%}
        {% block content %}
        {% endblock %}
      </div>
...

Modifier le template de la page connexion

On ajoute l’url associée à la vue register au lien d’inscription en bas du formulaire de connexion :

...
<div>
    <small>
        Pas encore inscrit.e?
        <a href="{% url 'register' %}">
            S'inscrire
        </a>
   ...

Tester la page d’inscription

Lorsqu’on lance le serveur de développement et qu’on afficher la page d’accueil de l’application à l’adresse http://127.0.0.1:8000, on est redirigé vers la page de connexion pour s’authentifier et se connecter :

Si un utilisateur se connecte pour la première fois, il doit créer ses données de connexion. Pour ce faire, il clique sur Inscription dans la barre de navigation ou sur le lien S’inscrire, en bas du formulaire de connexion. Il sera alors dirigé vers la page de connexion à l’adresse http://127.0.0.1:8000/register pour saisir ses nom d’utilisateur et mot de passe :

Lorsque l’utilisateur soumet ses informations de connexion, il est redirigé vers la page d’accueil avec un message confirmant son inscription.

Personnaliser le formulaire de création d’un nouvel utilisateur

A ce stade du tutoriel, nous pouvons dire que nous avons un système d’authentification qui fonctionne correctement. Un utilisateur peut s’inscrire, se connecter, se déconnecter et a la possibilité de changer son mot de passe en cas d’oublie.

Cependant, le formulaire d’inscription par défaut UserCreationForm ne demandait que la saisie d’un nom d’utilisateur username et d’un mot de passe password1, à confirmer une seconde fois password2.

Mais nous pourrions avoir besoin d’autres informations comme une adresse e-mail par exemple. Celle-ci peut s’avérer utile pour envoyer un message de création de compte à l’utilisateur ou bien pour réinitialiser son mot de passe.

En effet, la réinitialisation de mot de passe impose l’enregistrement d’une adresse e-mail associée au compte utilisateur dans la base de données. En d’autres termes, si notre utilisateur “Bob” ne se rappelle pas de son mot de passe, il ne pourra pas le réinitialiser sans adresse e-mail. On aimerait alors inclure dans le formulaire d’inscription la possibilité d’ajouter d’autres informations, telle qu’une adresse e-mail.

Définir un formulaire personnalisé de création d’un nouvel utilisateur

Pour avoir un formulaire d’inscription personnalisé, il nous faut créer le fichier forms.py à la racine du répertoire usersapp pour y définir notre nouveau formulaire comme ceci :

from django import forms
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm

class UserRegistrationForm(UserCreationForm):
	first_name = forms.CharField(label='Prénom')
	last_name = forms.CharField(label='Nom')
	email = forms.EmailField(label='Adresse e-mail')
	
    class Meta(UserCreationForm.Meta):
		model = User
		fields = UserCreationForm.Meta.fields + ('first_name', 'last_name' , 'email')

On importe forms (ligne 1) pour créer les champs dont nous avons besoin (lignes 6 à 8), à savoir le prénom first_name, le nom last_name et l’adresse e-mail de l’utilisateur email. On importe aussi le modèle User (ligne 2) et le formulaire par défaut UserCreationForm (ligne 3) dont héritera notre nouveau formulaire UserRegistrationForm (ligne 5). On définit ensuite la classe Meta qui hérite de la classe Méta du formulaire de base UserCreationForm (ligne 10) et qui permet de configurer le formulaire. Ainsi, on définit le modèle User dont hérite le formulaire (ligne 11) et les champs de celui-ci (ligne 12). Les champs sont composés des champs du formulaire de base (à savoir username, password1 et password2) concaténés aux champs définis plus haut (ligne 6 à 8).

Mettre à jour la vue de création d’un nouvel utilisateur

On modifie la vue Register en remplaçant le formulaire par défaut UserCreationForm par notre formulaire personnalisé UserRegistrationForm.

from django.shortcuts import render, redirect
#from django.contrib.auth.forms import UserCreationForm
from usersapp.forms import UserRegistrationForm
from django.contrib.auth import login, authenticate
from django.contrib import messages

def register(request):
	if request.method == 'POST' :
		form = UserRegistrationForm(request.POST)
		if form.is_valid():
			form.save()		
			username = form.cleaned_data.get('username')
			password = form.cleaned_data.get('password1')
			user = authenticate(username=username, password=password)
			login(request,user)	
			messages.success(request, f'Coucou {username}, Votre compte a été créé avec succès !')					
			return redirect('home')
	else :
		form = UserRegistrationForm()
	return render(request,'registration/register.html',{'form' : form})

Tester la nouvelle page d’inscription

On rafraichit la page d’inscription et on peut voir les champs ajoutés du nouveau formulaire.

Vous pouvez saisir les données d’un nouvel utilisateur, cliquer sur le bouton “s’inscrire” pour enregistrer les données.

Vérification de la base de données

Vous pouvez ensuite vous connecter au portail d’administration à l’adresse http://127.0.0.1:8000/admin et cliquer sur la table utilisateurs pour observer l’enregistrement des données relatives aux champs ajoutés plus haut, à savoir le prénom, le nom et l’adresse e-mail du nouvel utilisateur.

Conclusion

Et voilà ! Nous sommes arrivés au bout de ce tutoriel consacré au système d’authentification pour votre application Django. Nous avons vu en première partie comment permettre à un utilisateur de se connecter et se déconnecter dans une application. En seconde partie, nous avons personnalisé le système de réinitialisation de mot de passe par défaut de Django. Enfin, en troisième partie, nous avons mis en place le système d’inscription d’un nouvel utilisateur. Si vous avez des questions ou des suggestions, n’hésitez pas à m’en faire part dans la section des commentaires. Je serais ravie d’y répondre !