Django allauth tutoriel

Voici le déroulé du guide :

Configuration de Django-allauth
Authentification standard
Authentification sociale (Google, GitHub)
Personnalisation des templates

Lien vers la documentation : https://docs.allauth.org/en/latest/

Configuration

Pour tester la bibliothèque, partons sur un nouveau projet Django. Nous allons commencer par installer django-allauth avec les fonctionnalités pour l'authentification sociale :

pip install "django-allauth[socialaccount]"

Ensuite, il faut modifier la liste INSTALLED_APPS :

INSTALLED_APPS = [
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    'allauth.socialaccount.providers.google',
    'allauth.socialaccount.providers.github',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

J'ai déjà inclus Google et GitHub, mais pour la première partie nous ne sommes pas obligés de les renseigner.

Vous pouvez accéder à la liste des réseaux disponibles via cette page.

Ajoutez un middleware :

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

    # Le middleware ci-dessous
    'allauth.account.middleware.AccountMiddleware',
]

Il faut ensuite renseigner le backend d'authentification pour autoriser django-allauth :

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
    'allauth.account.auth_backends.AuthenticationBackend',
]

Comme nous allons avoir besoin d'envoyer des mails, pour le faire simplement sans avoir à configurer un serveur mail, nous allons afficher les mails dans la console. Nous allons donc ajouter cette constante à notre fichier de settings :

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

Passons maintenant au fichier d'URLs (qui se trouve au même niveau que le fichier de settings), pour ajouter les URLs de allauth :

from django.contrib import admin
from django.urls import path, include

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

Il est temps de faire la migration et de créer un super utilisateur :

python manage.py migrate
python manage.py createsuperuser

Authentification normale

Tout d'abord, voici la liste des URLs disponibles pour votre projet :

accounts/ login/ [name='account_login']
accounts/ logout/ [name='account_logout']
accounts/ inactive/ [name='account_inactive']
accounts/ signup/ [name='account_signup']
accounts/ reauthenticate/ [name='account_reauthenticate']
accounts/ email/ [name='account_email']
accounts/ confirm-email/ [name='account_email_verification_sent']
accounts/ password/change/ [name='account_change_password']
accounts/ password/set/ [name='account_set_password']
accounts/ password/reset/ [name='account_reset_password']
accounts/ login/code/confirm/ [name='account_confirm_login_code']
accounts/ ^confirm-email/(?P<key>[-:\w]+)/$ [name='account_confirm_email']
accounts/ password/reset/key/done/ [name='account_reset_password_from_key_done']
accounts/ ^password/reset/key/(?P<uidb36>[0-9A-Za-z]+)-(?P<key>.+)/$ [name='account_reset_password_from_key']
accounts/ password/reset/done/ [name='account_reset_password_done']
accounts/ 3rdparty/
accounts/ social/login/cancelled/
accounts/ social/login/error/
accounts/ social/signup/
accounts/ social/connections/
accounts/ google/
accounts/ google/login/token/ [name='google_login_by_token']
accounts/ github/

Par défaut, si vous allez sur http://127.0.0.1:8000/accounts/, vous serez redirigé sur la vue de login.

À noter que vous pouvez modifier la langue de votre projet dans les settings, et elle sera pris en compte par allauth 😎.

Vous pouvez tester aussi d'aller sur la vue de signup, et sur la vue de mot de passe oublié. Si vous utilisez la fonctionnalité de mot de passe oublié, vous recevrez un mail directement dans la console.

Vous pouvez tester le lien qui s'affiche.

Maintenant, voyons ce qu'il est possible de paramétrer :

ACCOUNT_LOGIN_METHODS = ("email", "username")
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_EMAIL_VERIFICATION = 'mandatory'

ACCOUNT_LOGIN_METHODS = ("email", "username") permet de paramétrer la façon de se connecter. Dans ce cas, on autorise l'email et l'username (le placeholder de la page de login se met à jour tout seul).

ACCOUNT_EMAIL_REQUIRED permet d'obliger ou non la présence d'une adresse email.

ACCOUNT_USERNAME_REQUIRED ... pareil pour le username.

ACCOUNT_EMAIL_VERIFICATION = 'mandatory' permet d'obliger la validation de l'email pour que l'utilisateur puisse se connecter (d'autres options sont disponibles).

Une fois connecté, cliquez sur Change Email :

Vous pouvez ajouter un email. Maintenant, rendez-vous dans l'administration de Django. Vous pouvez voir dans Email addresses qu'il est possible de rattacher plusieurs adresses mail à un compte.

Amusez-vous à explorer les différentes vues, vous allez voir à quel point la bibliothèque est puissante.

Avant de continuer sur l'authentification sociale avec Google et GitHub, nous allons regarder comment personnaliser de manière rapide les templates.

Personnaliser les templates (de manière simple)

Commençons par ajouter à la constante TEMPLATES de settings.py un dossier :

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'], # Cette ligne
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Si vous voulez pousser la customisation des templates, je vous conseille de regarder cette page : https://docs.allauth.org/en/dev/common/templates.html

Car dans notre cas, nous allons le faire de manière assez rapide, mais c'est histoire de comprendre le principe.

On va se balader dans notre dossier d'environnement virtuel, cherchez la bibliothèque allauth, et dans templates/allauth/layouts, vous avez les 3 fichiers HTML principaux pour la customisation.

Pour cet exemple simple, regardez le contenu qu'il y a dans base.html. Vous avez juste à garder tous les éléments, et les enrober avec un peu de CSS, Tailwind ou Bootstrap par exemple. Si vous le souhaitez, copiez/collez le contenu de base.html, fermez le fichier, et créez cette arborescence dans votre projet :

templates/allauth/layouts avec un base.html que vous pouvez customiser comme vous voulez.

Si vous voulez copier/coller du code tout prêt, c'est par ici : https://github.com/gabigab117/django-allauth-sandbox/blob/main/templates/allauth/layouts/base.html

Sympa comme exemple, non ?

Il est temps de passer à l'authentification sociale !

Authentification sociale

On peut gérer les réseaux sociaux que l'on va utiliser via un dictionnaire dans les settings, mais dans cet exemple nous allons le faire dynamiquement depuis l'administration Django

Google

Tout est expliqué ici : https://docs.allauth.org/en/dev/socialaccount/providers/google.html

Allez sur https://console.cloud.google.com/
Ensuite créez un nouveau projet dans la console cloud de Google

Appelez-le comme vous voulez, puis cliquez sur créer
Ouvrez le menu depuis le burger en haut à gauche, et cliquer sur APIs et services - Identifiants

Cliquez sur Créer des identifiants - ID client OAuth

Il va falloir configurer l'écran de consentement, suivez la procédure et au moment de la Cible, sélectionnez Externe, ici c'est une application test, donc il n'y a pas d'incidence
Retournez dans API et services - Identifiants et cliquez de nouveau sur Créer des identifiants - ID client OAuth

Dans type d'application choisissez Application Web
Donnez-lui un nom
Dans URI de redirection autorisés, ajoutez cette URL => http://127.0.0.1:8000/accounts/google/login/callback/
Cliquez sur Créer
Et copiez l'ID client, et le code secret

Retournons dans l'administration Django pour ajouter une application sociale :

Renseignez les informations comme l'image ci-dessus en fonction des clés générées par Google.

Maintenant déconnectez-vous, rendez-vous sur cette adresse : http://127.0.0.1:8000/accounts/login/

Vous pouvez vous créer un compte via Google.

Après l'inscription, c'est normal que ça plante, car Django vous redirige vers une vue de profil que l'on n'a pas créée... Mais tout fonctionne !

Rendez-vous avec votre super utilisateur dans l'administration, et dans Social accounts vous verrez votre utilisateur.

Et si vous allez dans Email Addresses, vous verrez qu'elle est automatiquement vérifiée !

GitHub

Tout est expliqué ici : https://docs.allauth.org/en/dev/socialaccount/providers/github.html

Vous êtes prêt ? C'est super rapide !

Rendez-vous sur cette adresse : https://github.com/settings/applications/new
Voici la capture d'écran d'exemple

Ensuite cliquez sur Generate a new client secret.
Depuis l'administration ajoutez une nouvelle application sociale comme nous l'avons fait précédemment, en y ajoutant vos clés

Maintenant les utilisateurs peuvent se connecter avec leur compte GitHub.

Aussi, si je me reconnecte avec un utilisateur existant depuis cette URL, http://127.0.0.1:8000/accounts/3rdparty/, je peux gérer la connexion de mes réseaux sociaux sur le site.

Template tags allauth

Django-allauth fournit des tags pour vos templates. Voici un exemple :

{% load socialaccount %}

<a href="{% url 'account_logout' %}">Déconnexion</a>
<a href="{% url 'account_email' %}">Mes emails</a>

<a href="{% provider_login_url 'google' %}">Se connecter avec Google</a>

N'hésitez pas à aller faire un tour sur la documentation. Aussi j'ai enregistré une vidéo sur Django-allauth.

Django Allauth : Guide complet pour l'authentification standard et sociale