Inscription et réinitialisation du mot de passe avec vérification des e-mails avec allauth à Django

Dans ce didacticiel, on autorisera les utilisateurs à s'inscrire sur notre site Web et à utiliser la vérification par courrier électronique pour s'assurer que l'adresse électronique donnée est valide.

7 Juillet 2020 06:30
Thèmes: Authentification

On utilisera l'e-mail comme identifiant et n'utilisera pas de nom d'utilisateur. allauth s'en occupe lorsqu'on ajoute ce qui suit à nos paramètres:

ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_EMAIL_VERIFICATION = 'mandatory'
ACCOUNT_USERNAME_REQUIRED = False

Cela indique à tous qu'on veut s'authentifier par e-mail, qu'un champ e-mail est requis, qu'on veut également vérifier notre adresse e-mail en envoyant un lien de vérification et qu'on n'utilisera pas le nom d'utilisateur. Dans les coulisses, Django utilisera toujours un nom d'utilisateur unique, qui est généré par allauth. Vous pouvez vérifier cela dans l'admin Django; la connexion en tant que superutilisateur nécessite toujours un nom d'utilisateur. La vérification que l'adresse e-mail est présente et unique est effectuée par allauth, pas par Django. Il est possible de dire à Django d'utiliser l'e-mail comme identifiant utilisateur unique, ce qui nécessiterait e.a. redéfinir le champ e-mail. Le champ de nom d'utilisateur peut également être complètement supprimé du modèle utilisateur, en sous-classant un modèle utilisateur de AbstractBaseUser. Les paramètres allauth seraient alors différents. Cela dépasse la portée de ce didacticiel.

Pour simuler la vérification des e-mails, il est possible d'utiliser la console, mais le flux d'e-mails est plus réaliste lors de l'envoi de vrais e-mails. En production, cela se ferait par un service de courrier transactionnel tel que Mailgun, Sendgrid, Mandrill; en cours de développement, vous pouvez utiliser un compte gmail. Le nombre d'e-mails pouvant être envoyés est évidemment limité, et il nécessite un paramétrage dans gmail pour autoriser des 'applications moins sécurisées'. Gmail utilise par défaut OAuth 2.0, ce qui signifie que l'accès à un compte gmail est donné via un token. Autoriser les 'applications moins sécurisées' désactive cela, permettant à une application d'accéder via un nom d'utilisateur / mot de passe, ce qui est bien moins sécurisé. Il est donc logique d'utiliser un compte Gmail différent de votre travail ou de votre messagerie privée.

Django a des paramètres pour la messagerie. Pour Gmail, mettez ce qui suit dans votre fichier de paramètres (de préférence dans local.py qui n'est pas suivi sur Github):

EMAIL_HOST = 'smtp.gmail.com'
EMAIL_USE_TLS = True
EMAIL_PORT = 587
EMAIL_HOST_USER = 'yourusername@gmail.com'
EMAIL_HOST_PASSWORD = 'yourpassword'
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER

Si vos paramètres (dev.py dans Wagtail) spécifient un EMAIL_BACKEND, placez un signe de commentaire devant:

# EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'

Cela oblige Django à utiliser le backend smtp par défaut. Bien sûr, vous pouvez également le définir explicitement.

Il est temps de créer un modèle d'inscription. par défaut, allauth ne demande que l'e-mail (lorsqu'il s'agit de la méthode d'authentification) et le mot de passe. Si on veut demander à l'utilisateur de remplir plus de champs, on doit utiliser le paramètre ACCOUNT_SIGNUP_FORM_CLASS et spécifier un formulaire d'inscription personnalisé. Il doit s'agir d'un formulaire simple dérivé de forms.Form, et non d'un ModelForm. Pour demander à l'utilisateur le prénom, le nom et le nom d'affichage, mettez ce qui suit dans forms.py:

from django import forms
from django.utils.translation import gettext_lazy as _

class SignupForm(forms.Form):
    first_name = forms.CharField(max_length=30, label=_("First name"))
    last_name = forms.CharField(max_length=30, label=_("Last name"))
    display_name = forms.CharField(max_length=30, label=_("Display name"), help_text=_("Will be shown e.g. when commenting."))

    def signup(self, request, user):
        user.first_name = self.cleaned_data['first_name']
        user.last_name = self.cleaned_data['last_name']
        user.display_name = self.cleaned_data['display_name']
        user.save()

Informez allauth de ce formulaire en mettant ce qui suit dans vos paramètres:

ACCOUNT_SIGNUP_FORM_CLASS = 'userauth.forms.SignupForm'

On va maintenant créer un modèle d'inscription. Copiez le modèle d'allauth et placez-le dans un account/ sous-répertoire du répertoire de modèles de votre application (dans notre cas, userauth/templates/userauth/). Adaptez le format à votre convenance; ici, on utilisera un format de carte Bootstrap et de widget-tweaks pour les champs de saisie. Le modèle complet signup.html est alors:

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

{% load i18n %}

{% block head_title %}{% trans "Sign Up" %}{% endblock %}

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

{% block card-body %}

<form method="POST" action="{% url 'account_signup' %}" class="needs-validation" novalidate>
    {% csrf_token %}
    <div class="form-row">
        <div class="form-group col-md-6">
            {% with field=form.email %}{% include "account/form_field.html" %}{% endwith %}
        </div>
        <div class="form-group col-md-6">
            {% with field=form.display_name %}{% include "account/form_field.html" %}{% endwith %}
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            {% with field=form.password1 %}{% include "account/form_field.html" %}{% endwith %}
        </div>
        <div class="form-group col-md-6">
            {% with field=form.password2 %}{% include "account/form_field.html" %}{% endwith %}
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            {% with field=form.first_name %}{% include "account/form_field.html" %}{% endwith %}
        </div>
        <div class="form-group col-md-6">
            {% with field=form.last_name %}{% include "account/form_field.html" %}{% endwith %}
        </div>
    </div>
    <button type="submit" class="btn btn-outline-primary">{% trans "Sign Up" %}</button>
</form>

{% endblock %}

{% block card-footer %}
<p>{% trans "Already have an account?" %} <a href="{% url 'account_login' %}">{% trans "Sign In" %}</a></p>
{% endblock %}

Les modèles base_card.html et form_field.html ont déjà été utilisés lors de la connexion. Les noms d'URL account_signup et account_login sont fournis par allauth.

Il est temps de le tester! Démarrez le serveur et accédez à http://127.0.0.1:8000/accounts/signup/. Si tout se passe bien, voici notre nouveau modèle. Enregistrez un nouvel utilisateur. Un nouveau modèle apparaît nous indiquant qu'un lien de vérification a été envoyé. Accédez à votre courrier et cliquez sur ce lien. Un message apparaît vous demandant de confirmer l'adresse e-mail, après quoi vous pouvez vous connecter.

Juste quelques choses à ranger. Les modèles de vérification et de confirmation étaient encore d'allauth par défaut. Modifiez-les dans le même style que signup.html. Le courrier de vérification mentionne example.com dans son objet. Rendez-vous sur l'admin Django, sur Sites, et modifiez le paramètre du domaine et son nom d'affichage; c'est le nom qui sera utilisé. Lorsque vous utilisez Wagtail, il y a également une BASE_URL dans le fichier de paramètres avec le même nom example.com. Ceci est utilisé à des fins d'administration de Wagtail, mais modifions cela également dans notre domaine. Et dans admin.py, dans list_display, il y a toujours le nom d'utilisateur; retirez-le et remplacez-le par display_name.

Maintenant qu'on a configuré la messagerie, on peut également implémenter la réinitialisation du mot de passe. Ceci est également entièrement pris en charge par allauth. L'url nommée account_reset_password est le point de départ, un endroit logique pour le mettre est dans notre modèle de connexion. À partir de là, l'utilisateur est dirigé à travers quatre modèles:

  • password_reset.html: demande à l'utilisateur son adresse e-mail
  • password_reset_done.html: confirmation qu'un e-mail a été envoyé pour réinitialiser le mot de passe
  • password_reset_from_key.html: saisie du nouveau mot de passe
  • password_reset_from_key_done.html: confirmation que le mot de passe a été modifié

Copiez les modèles. Modifiez le style en utilisant le format ci-dessus ou à votre convenance et on a terminé. N'oubliez pas de pousser vos modifications dans votre dépôt git!

Lisez plus si vous souhaitez permettre à l'utilisateur de mettre à jour et supprimer son profil.

Retour aux articles

Commentez cet article (connectez-vous d'abord ou confirmez par nom et email ci-dessous)