Comment authentifier les applications Django en utilisant django-allauth

Tutoriels
Django

L’auteur a sélectionné le Fonds pour le Logiciel Libre et Open Source pour recevoir un don dans le cadre du programme Écrire pour des Dons.

Introduction

L’authentification est le processus de vérification des utilisateurs authentiques ou enregistrés dans le système, ce qui aide à sécuriser vos applications logicielles contre les accès non autorisés. Il existe plusieurs techniques utilisées pour authentifier les utilisateurs, telles que la vérification par nom d’utilisateur/mot de passe, la biométrie humaine ou les mots de passe image. Dans le framework web Django, la gestion de l’authentification peut être codée en dur ou vous pouvez utiliser des modules prêts à l’emploi comme django-allauth, django-rest-social-auth, django-registration, et plus encore.

django-allauth est un ensemble intégré d’applications Django traitant de l’authentification des comptes, de l’inscription, de la gestion et de l’authentification de comptes tiers (sociaux). C’est l’un des modules d’authentification les plus populaires en raison de sa capacité à gérer à la fois les connexions locales et sociales. Vous pouvez ajouter le support pour des fournisseurs OAuth/OAuth2 supplémentaires avec la base de code commune de l’application. Non seulement il gère la logique d’authentification, mais il est également personnalisable pour répondre à vos besoins en matière de design.

Dans ce tutoriel, vous allez construire une application Django qui utilise django-allauth pour s’authentifier en utilisant un compte DigitalOcean.

Prérequis

Pour ce tutoriel, vous aurez besoin de :

Étape 1 — Configuration de l’Environnement de Développement

Dans cette étape, vous allez configurer votre environnement de développement pour l’application Django. Vous allez activer un environnement virtuel et installer les dépendances du projet.

Tout d’abord, créez un nouveau répertoire et changez-y. Ce tutoriel utilise Django-Allauth :

  1. mkdir Django-Allauth

  2. cd Django-Allauth

Assurez-vous d’utiliser ce dossier pour le reste de ce tutoriel.

Ensuite, créez un environnement virtuel en utilisant Pipenv, un outil de gestion de paquets pour Python. Tout d’abord, installez pipenv:

  1. pip3 install pipenv

Ensuite, activez l’environnement virtuel :

pipenv shell

Ensuite, installez les dépendances que vous utiliserez pour le développement (django et django-allauth) en utilisant pipenv :

  1. pipenv install django

  2. pipenv install django-allauth

Vous avez maintenant terminé de configurer votre environnement de développement. Ensuite, vous commencerez à développer votre application Django.

Étape 2 — Création de votre application Django

Dans cette étape, vous créerez une application Django simple à une seule page à utiliser avec l’authentification django-allauth.

La première étape pour créer votre application est de créer l’application du projet, appelée Authentication dans ce tutoriel :

  1. django-admin startproject Authentication

Ensuite, accédez au chemin du répertoire du projet et créez une application pour votre application ; ce tutoriel utilise main :

  1. cd Authentication

  2. python manage.py startapp main

Dans le répertoire du projet, utilisez nano ou votre éditeur de texte préféré pour ouvrir settings.py pour l’édition :

  1. nano Authentication/settings.py

Ajoutez l’application main à la liste des applications installées, comme indiqué :

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main', # nouvelle application
]

Comme nous rendons une seule page pour le site web, il n’est pas nécessaire de modifier le fichier models.py.

Ensuite, ouvrez le fichier urls.py du projet pour l’éditer et apportez les modifications suivantes :

Django-Allauth/Authentication/Authentication/urls.py
from  django.contrib  import  admin
from  django.urls  import  path, include

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

Le fichier urls.py est utilisé pour le routage des applications Django.

Ensuite, dans l’application main, créez un autre fichier urls.py et ajoutez les lignes suivantes :

Django-Allauth/Authentication/main/urls.py
from  django.urls  import  path
from . import views 

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

Ce nouveau fichier urls.py est utilisé pour router les fichiers de l’application main.

Ensuite, ouvrez le fichier views.py et ajoutez les lignes suivantes :

Django-Allauth/Authentication/main/views.py
from  django.shortcuts  import  render

def  homepage(request):
    return  render(request=request,
    template_name= 'home.html',)

Le fichier views.py est utilisé pour rendre la page home.html dans le répertoire des templates.

Ensuite, dans le dossier racine du projet (Authentication), créez un nouveau répertoire appelé templates. Dans le répertoire templates, créez une page HTML appelée home.html et ajoutez les lignes suivantes :

Authentication/templates/home.html
  1. 

  2. <html>

  3.     <head>

  4.         <style>

  5.         h3 {text-align: center;}

  6.         p {text-align: center;}

  7.         </style>

  8.     </head>

  9.     <body>        

  10.     <!-- CSS compilé et minifié -->

  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  12. 

  13.     <!-- JavaScript compilé et minifié -->

  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  15.             

  16.         <nav>

  17.             <div class="nav-wrapper"style="background-color: teal">

  18.               <a href="#" class="brand-logo">Django-Allauth</a>

  19.             </div>

  20.           </nav>

  21.         <h3 style=center>Welcome Home</h3>

  22.         <div class="row">

  23.             <div class="col s12 m6">

  24.               <div class="card whitedarken-1">

  25.                 <div class="card-content blue-text">

  26.                   <span class="card-title">Lorem Ipsum</span>

  27.                   <p>{% lorem 1 p %}</p>

  28.                 </div>

  29.               </div>

  30.             </div>  

  31.             <div class="col s12 m6">

  32.               <div class="card white darken-1">

  33.                 <div class="card-content blue'-text">

  34.                   <span class="card-title">Lorem Ipsum</span>

  35.                   <p>{% lorem 1 p %}</p>

  36.                 </div>

  37.               </div>

  38.             </div>          

  39.           </div>

  40.           <div class="container text-dark mt-5">

  41.             <div class="row justify-content-md-center">

  42.               <div class="col md-5 p-3">

  43.                 {% if user.is_authenticated%}

  44.                 <p>Welcome, {{user.username}}</p>

  45.                 <a href="http://127.0.0.1:8000/accounts/logout/">Logout</a>

  46.                 {%else%}

  47.                 <p>Please <a href="http://127.0.0.1:8000/accounts/login/">Login</a></p>

  48.                 {%endif%}

  49.               </div>

  50.             </div>

  51.           </div>

  52.     </body>

  53. </html>

Cette page web de démonstration inclut du texte d’exemple rendu dans des cartes et une zone de connexion à utiliser avec l’authentification à l’étape suivante.

La page web est stylisée en utilisant Materialize CDN, un framework frontend de distribution de contenu gratuit et open-source basé sur Material Design. Il aide à charger les bibliothèques Materialize CSS, JavaScript et jQuery pour réaliser des projets beaux et réactifs. Assurez-vous d’avoir une connexion internet pour que le CDN charge les fichiers de style.

Depuis le chemin du répertoire, Django-Allauth/Authentication, lancez l’application web en utilisant la commande suivante :

  1. python manage.py runserver

Vous verrez une sortie similaire à ce qui suit : 

Output
Performing system checks...

System check identified no issues (0 silenced).
June 10, 2022 - 13:35:20
Django version 4.0.4, using settings 'Authentication.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Accédez à l’URL http://127.0.0.1:8000/. Vous devriez voir un site web qui ressemble à ceci :

Le site web d’exemple affiche du texte de remplissage et inclut une zone de connexion en bas. Une fois que vous avez configuré l’authentification, vous utiliserez le lien Connexion sur la page web à une étape ultérieure.

Dans cette étape, vous avez construit une application monopage. Ensuite, vous allez maintenant gérer l’authentification en utilisant django-allauth.

Étape 3 — Configuration de django-allauth

Pour vous authentifier en utilisant django-allauth, vous devez d’abord le configurer. Cela se fait en apportant quelques modifications aux fichiers du projet.

Ouvrez Authentication/settings.py pour l’édition. Sous INSTALLED_APPS, ajoutez les lignes surlignées pour enregistrer les applications django-allauth et DigitalOcean en tant que fournisseur de connexion sociale :

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
    
    # Assurez-vous d'ajouter ces applications requises
    'django.contrib.sites',
	  # Applications Django-allauth
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # Fournisseur de connexion sociale/tiers pour Digital Ocean
    'allauth.socialaccount.providers.digitalocean',
]

Ensuite, mettez à jour la section TEMPLATES comme indiqué : 

[label Django-Allauth/Authentication/Authentication/settings.py]  
# Spécifications des processeurs de contexte :
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
        'context_processors': [         
	 'django.template.context_processors.request',
            ],
        },
    },
]

La nouvelle ligne gère les demandes HTTP de Django-Allauth.

Ensuite, créez une section pour AUTHENTICATION_BACKENDS et ajoutez les lignes suivantes :

Django-Allauth/Authentication/Authentication/settings.py

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

La première ligne est utilisée pour connecter un utilisateur par nom d’utilisateur via le tableau de bord administrateur de Django, ce que vous ferez à l’étape suivante. La deuxième ligne est utilisée pour des méthodes d’authentification spécifiques à django-allauth, telles que la connexion par un fournisseur OAuth.

Ensuite, ajoutez deux redirections d’authentification comme indiqué :

Django-Allauth/Authentication/Authentication/settings.py

LOGIN_REDIRECT_URL = 'homepage'
LOGOUT_REDIRECT_URL = 'homepage'

Ces lignes redirigent l’utilisateur vers la page d’accueil après l’authentification et après la déconnexion du site.

La dernière modification à settings.py consiste à définir l’ID de l’URL de votre site. À la fin de votre fichier, ajoutez la ligne suivante :

Django-Allauth/Authentication/Authentication/settings.py
# Définit l'ID de l'URL de votre site.
SITE_ID =1

Cette ligne spécifie l’ID de la base de données de l’objet Site associé au fichier settings.py.

Enregistrez et fermez votre fichier.

Ensuite, ouvrez le fichier urls.py racine pour l’édition. Ajoutez le chemin vers les applications Allauth comme suit :

Django-Allauth/Authentication/Authentication/urls.py

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

Cette nouvelle ligne est utilisée pour router le fichier URL de l’application allauth. L’application django-allauth est livrée avec un ensemble d’URL pour ses pages HTML. Certaines URL fournies par allauth incluent : account_login, account_logout, account_set_password, entre autres. Consultez la documentation du produit django-allauth pour plus d’informations.

Enregistrez et fermez votre fichier.

À cette étape, vous configurez django-allauth sur votre application et êtes prêt à l’utiliser pour l’authentification.

Étape 4 — Ajout d’un fournisseur d’authentification tiers

À cette étape, vous ajouterez une authentification tierce à votre application Django en utilisant django-allauth. Il existe de nombreux fournisseurs d’authentification tiers que vous pouvez utiliser avec django-allauth, y compris les connexions sociales de Google, Facebook, Twitter, et d’autres répertoriés dans la liste des fournisseurs de django-allauth.

Pour ce tutoriel, vous utiliserez DigitalOcean comme votre connexion sociale. Pour ajouter un fournisseur d’authentification comme DigitalOcean, vous devez d’abord les enregistrer.

Connectez-vous à votre compte DigitalOcean et accédez à la plateforme cloud DigitalOcean, où vous aurez accès à un tableau de bord qui ressemble à ceci :

Cliquez sur le bouton API à gauche du tableau de bord pour créer votre application OAuth. Sur le tableau de bord Applications & API, cliquez sur le bouton Application OAuth pour accéder à l’enregistrement OAuth pour votre site. Vous verrez un tableau de bord qui ressemble à ceci :

Ensuite, cliquez sur le bouton Enregistrer l’application OAuth pour démarrer l’enregistrement de l’application OAuth de votre application. Un formulaire contextuel apparaîtra :

Entrez le nom du projet (Django-Allauth) et toute description que vous souhaitez. Pour la section Entrez l’URL de la page d’accueil, saisissez l’une des URL suivantes :

  • http://127.0.0.1:8000
  • http://localhost:8000

Dans la section Entrez l’URL de retour d’appel, saisissez l’une des URL de redirection suivantes :

  • http://127.0.0.1:8000/accounts/digitalocean/login/callback/
  • http://localhost:8000/accounts/digitalocean/login/callback/

Note : À des fins de démonstration, ce tutoriel utilise localhost:8000 ou 127.0.0.1:8000. Lors du déploiement d’une application en production, les URL doivent être modifiées pour inclure le nom de domaine.

Après avoir saisi les informations du projet, cliquez sur Enregistrer l’application OAuth pour enregistrer les modifications. Vous serez ensuite redirigé vers le tableau de bord de l’application avec votre application créée comme indiqué ci-dessous :

Cliquez sur le nom de l’application pour accéder à l’identifiant du client et au secret du client :

Copiez et enregistrez ces détails pour une utilisation ultérieure.

Après avoir configuré l’API sur DigitalOcean, vous pouvez maintenant l’ajouter au panneau d’administration de votre application Django. Pour accéder au panneau d’administration Django, vous devez d’abord avoir un superutilisateur, que vous pouvez créer en utilisant la commande suivante :

  1. python manage.py createsuperuser

Entrez les détails demandés et lancez à nouveau le serveur.

Accédez au panneau d’administration en utilisant l’URL http://127.0.0.1:8000/admin/. Connectez-vous avec vos identifiants superutilisateur et vous accéderez au tableau de bord d’administration qui ressemble à ce qui suit :

Dans le panneau de gauche, cliquez sur Sites, puis sur Ajouter un site + pour modifier un site existant (example.com) ou en ajouter un nouveau en utilisant http://127.0.0.1:8000 comme indiqué ci-dessous :

Cette configuration définit l’URL de votre site où l’authentification de DigitalOcean sera implémentée. Dans ce cas, c’est http://127.0.0.1:8000.

Cliquez sur Enregistrer.

Ensuite, retournez au tableau de bord principal en cliquant sur Accueil. Dans la section Comptes sociaux, cliquez sur Applications sociales, puis cliquez sur Ajouter une application sociale +. Utilisez les détails que vous avez copiés depuis la console DigitalOcean, entrez les détails requis pour le fournisseur de services, le nom de l’application, l’ID client et la clé secrète du client. Sous Sites, sélectionnez le site que vous venez de créer sous Sites disponibles et cliquez sur la flèche (—>) pour le déplacer dans le panneau Sites choisis. Cliquez sur le bouton Enregistrer pour enregistrer les détails.

Cette configuration est utilisée pour connecter le fournisseur de connexion sociale en utilisant l’identifiant client (Client id) et la clé secrète (Secret Key), qui sont utilisés comme identifiant public de votre application et comme identifiant confidentiel, respectivement. Ils sont utilisés pour authentifier votre application et effectuer des requêtes auprès des API de DigitalOcean.

Dans cette étape, vous avez configuré DigitalOcean comme fournisseur d’authentification tiers pour votre application Django. Dans la dernière étape, vous vous connecterez à votre site en utilisant votre compte DigitalOcean.

Étape 5 — Test d’authentification

Dans cette étape, vous vous connecterez à votre site Django en utilisant votre compte DigitalOcean. Tout d’abord, déconnectez-vous en tant qu’administrateur et accédez à la page de connexion (http://127.0.0.1:8000/accounts/login/):

Cliquez sur le lien DigitalOcean pour vous connecter à l’aide de DigitalOcean. (Comme indiqué dans la capture d’écran, un autre moyen d’authentification est de s’inscrire en utilisant un nom d’utilisateur et un mot de passe.)

Sur l’écran suivant, cliquez sur Continuer. Une nouvelle page apparaîtra où vous devrez sélectionner votre compte d’équipe DigitalOcean et cliquer sur le bouton Autoriser l’application.

L’autorisation est le processus qui consiste à accorder à une personne la possibilité d’accéder à une ressource. Dans ce cas, vous accordez à votre site Web l’accès à vos informations d’identification de connexion provenant de DigitalOcean pour vous authentifier.

Après vous être connecté, vous devriez voir votre page d’accueil comme indiqué ci-dessous:

Après une connexion réussie, votre nom d’utilisateur et le lien Déconnexion seront affichés sur le site.

REMARQUE: Au cours de ce processus, vous pouvez recevoir le message d’erreur suivant: La requête de correspondance SocialApp n’existe pas:

Ce problème survient généralement lorsque vous référencez incorrectement le numéro d’identification de votre site, par exemple si vous avez example.com comme premier site sur votre site. Pour le résoudre, trouvez SITE_ID dans settings.py et augmentez sa valeur de 1 jusqu’à ce que l’erreur disparaisse.

Dans cette étape, vous avez testé votre configuration d’authentification en vous connectant à votre site en utilisant les informations de connexion de DigitalOcean.

Conclusion

Dans ce tutoriel, vous avez construit une application Django qui gère l’authentification sociale en utilisant django-allauth. Vous avez incorporé une connexion sociale DigitalOcean et l’avez testée en vous connectant à votre site. Vous pouvez accéder au code du projet sur GitHub.

Comme prochaine étape, vous pourriez utiliser django-allauth pour authentifier n’importe lequel de vos autres projets d’application Django avec n’importe quel fournisseur de django-allauth. Pour en savoir plus sur l’authentification Django avec django-allauth, consultez la documentation officielle de Django-Allauth et la documentation officielle de Django sur l’authentification.

Vous pouvez également ajouter du style aux pages allauth, qui ont un style de base par défaut. Pour ajouter du style aux pages allauth, vous pouvez cloner le projet django-allauth depuis GitHub et utiliser le répertoire django-allauth/allauth/templates du dépôt cloné pour styliser vos pages.

Source:
https://www.digitalocean.com/community/tutorials/how-to-authenticate-django-apps-using-django-allauth