One place for hosting & domains

      authentification

      Comment configurer une authentification par clé SSH sur un serveur Linux


      Introduction

      SSH, ou secure shell, est un protocole crypté utilisé pour administrer et communiquer avec des serveurs. Si vous travaillez avec un serveur Linux, il est fort probable que vous passiez la majeure partie de votre temps dans une session terminal connectée à votre serveur par SSH.

      Bien qu’il existe plusieurs façons de se connecter à un serveur SSH, dans ce guide, nous allons essentiellement nous concentrer sur la configuration des clés SSH. Les clés SSH vous donnent un moyen facile et extrêmement sûr de vous connecter à votre serveur. Il s’agit donc de la méthode que nous recommandons à tous les utilisateurs.

      Un serveur SSH utilise diverses méthodes pour authentifier des clients. La plus simple est l’authentification par mot de passe, qui, malgré sa simplicité d’utilisation, est loin d’être la plus sécurisée.

      Bien que l’envoi des mots de passe au serveur se fasse de manière sécurisée, ces derniers ne sont généralement pas suffisamment complexes ou longs pour arrêter les attaquants assidus et insistants. La puissance de traitement moderne combinée aux scripts automatisés rendent tout à fait possible toute attaque par force brute d’un compte protégé par mot de passe. Bien qu’il existe d’autres méthodes d’ajouter davantage de sécurité (fail2ban, etc.), les clés SSH ont fait leur preuve en termes de fiabilité comme de sécurité.

      Les paires de clés SSH sont deux clés chiffrées qui peuvent être utilisées pour authentifier un client sur un serveur SSH. Chaque paire de clés est composée d’une clé publique et d’une clé privée.

      Le client doit conserver la clé privée qui doit rester absolument secrète. Si la clé privée venait à être compromise, tout attaquant pourrait alors se connecter aux serveurs configurés avec la clé publique associée sans authentification supplémentaire. Par mesure de précaution supplémentaire, la clé peut être cryptée sur le disque avec une phrase de passe.

      La clé publique associée pourra être librement partagée sans aucun impact négatif. La clé publique servira à crypter les messages que seule la clé privée pourra déchiffrer. Cette propriété est utilisée comme un moyen de s’authentifier avec la paire de clés.

      La clé publique est chargée sur un serveur distant auquel vous devez pouvoir vous connecter avec SSH. La clé est ajoutée à un fichier spécifique dans le compte utilisateur auquel vous allez vous connecter qui se nomme ~/.ssh/authorized_keys.

      Si un client tente de s’authentifier à l’aide de clés SSH, le serveur pourra demander au client s’il a bien la clé privée en sa possession. Une fois que le client pourra prouver qu’il possède bien la clé privée, une session shell est lancée ou la commande demandée est exécutée.

      Afin de configurer l’authentification avec des clés SSH sur votre serveur, la première étape consiste à générer une paire de clés SSH sur votre ordinateur local.

      Pour ce faire, nous pouvons utiliser un utilitaire spécial appelé ssh-keygen, inclus dans la suite standard d’outils OpenSSH. Par défaut, cela créera une paire de clés RSA de 2048 bits, parfaite pour la plupart des utilisations.

      Sur votre ordinateur local, générez une paire de clés SSH en saisissant ce qui suit : 

      ssh-keygen
      
      Generating public/private rsa key pair.
      Enter file in which to save the key (/home/username/.ssh/id_rsa):
      

      L’utilitaire vous demandera de sélectionner un emplacement pour les clés qui seront générées. Le système stockera les clés par défaut dans le répertoire ~/.ssh du répertoire d’accueil de votre utilisateur. La clé privée se nommera id_rsa et la clé publique associée, id_rsa.pub.

      En règle générale, à ce stade, il est préférable de conserver l’emplacement par défaut. Cela permettra à votre client SSH de trouver automatiquement vos clés SSH lorsqu’il voudra s’authentifier. Si vous souhaitez choisir un autre chemin, vous devez le saisir maintenant. Sinon, appuyez sur ENTER pour accepter l’emplacement par défaut.

      Si vous avez précédemment généré une paire de clés SSH, vous verrez apparaître une invite similaire à la suivante :

      /home/username/.ssh/id_rsa already exists.
      Overwrite (y/n)?
      

      Si vous choisissez d’écraser la clé sur le disque, vous ne pourrez plus vous authentifier à l’aide de la clé précédente. Soyez très prudent lorsque vous sélectionnez « yes », car il s’agit d’un processus de suppression irréversible.

      Created directory '/home/username/.ssh'.
      Enter passphrase (empty for no passphrase):
      Enter same passphrase again:
      

      Vous serez ensuite invité à saisir une phrase de passe pour la clé. Il s’agit d’une phrase de passe facultative qui peut servir à crypter le fichier de la clé privée sur le disque.

      Il serait légitime de vous demander quels avantages pourrait avoir une clé SSH si vous devez tout de même saisir une phrase de passe. Voici quelques-uns des avantages :

      • La clé SSH privée (la partie qui peut être protégée par une phrase de passe) n’est jamais exposée sur le réseau. La phrase de passe sert uniquement à décrypter la clé sur la machine locale. Cela signifie que toute attaque par force brute du réseau sera impossible avec une phrase de passe.
      • La clé privée est conservée dans un répertoire à accès restreint. Le client SSH ne pourra pas reconnaître des clés privées qui ne sont pas conservées dans des répertoires à accès restreint. La clé elle-même doit également être configurée avec des autorisations restreintes (lecture et écriture uniquement disponibles pour le propriétaire). Cela signifie que les autres utilisateurs du système ne peuvent pas vous espionner.
      • Tout attaquant souhaitant craquer la phrase de passe de la clé SSH privée devra préalablement avoir accès au système. Ce qui signifie qu’il aura déjà accès à votre compte utilisateur ou le compte root. Dans ce genre de situation, la phrase de passe peut empêcher l’attaquant de se connecter immédiatement à vos autres serveurs, en espérant que cela vous donne du temps pour créer et implémenter une nouvelle paire de clés SSH et supprimer l’accès de la clé compromise.

      Étant donné que la clé privée n’est jamais exposée au réseau et est protégée par des autorisations d’accès au fichier, ce fichier ne doit jamais être accessible à toute autre personne que vous (et le root user). La phrase de passe offre une couche de protection supplémentaire dans le cas où ces conditions seraient compromises.

      L’ajout d’une phrase de passe est facultatif. Si vous en entrez une, vous devrez la saisir à chaque fois que vous utiliserez cette clé (à moins que vous utilisiez un logiciel d’agent SSH qui stocke la clé décryptée). Nous vous recommandons d’utiliser une phrase de passe. Cependant, si vous ne souhaitez pas définir une phrase de passe, il vous suffit d’appuyer sur ENTER pour contourner cette invite.

      Your identification has been saved in /home/username/.ssh/id_rsa.
      Your public key has been saved in /home/username/.ssh/id_rsa.pub.
      The key fingerprint is:
      a9:49:2e:2a:5e:33:3e:a9:de:4e:77:11:58:b6:90:26 username@remote_host
      The key's randomart image is:
      +--[ RSA 2048]----+
      |     ..o         |
      |   E o= .        |
      |    o. o         |
      |        ..       |
      |      ..S        |
      |     o o.        |
      |   =o.+.         |
      |. =++..          |
      |o=++.            |
      +-----------------+
      

      Vous disposez désormais d’une clé publique et privée que vous pouvez utiliser pour vous authentifier. L’étape suivante consiste à placer la clé publique sur votre serveur afin que vous puissiez utiliser l’authentification par clé SSH pour vous connecter.

      Si vous démarrez un nouveau serveur DigitalOcean, vous pouvez automatiquement intégrer votre clé publique SSH dans le compte root de votre nouveau serveur.

      En bas de la page de création de Droplet, une option vous permet d’ajouter des clés SSH à votre serveur :

      SSH key embed

      Si vous avez déjà ajouté un fichier de clé publique à votre compte DigitalOcean, vous la verrez apparaître comme une option sélectionnable (il y a deux clés existantes dans l’exemple ci-dessus : « Work key » et « Home key »). Pour intégrer une clé existante, cliquez dessus pour la mettre en surbrillance. Vous pouvez intégrer plusieurs clés sur un seul serveur :

      SSH key selection

      Si vous n’avez pas encore chargé de clé SSH publique sur votre compte, ou si vous souhaitez ajouter une nouvelle clé à votre compte, cliquez sur le bouton « + Add SSH Key ». Cela créera une invite :

      SSH key prompt

      Dans la case « SSH Key content », collez le contenu de votre clé publique SSH. En supposant que vous ayez généré vos clés en utilisant la méthode ci-dessus, vous pouvez obtenir le contenu de votre clé publique sur votre ordinateur local en tapant :

      cat ~/.ssh/id_rsa.pub
      
      ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDNqqi1mHLnryb1FdbePrSZQdmXRZxGZbo0gTfglysq6KMNUNY2VhzmYN9JYW39yNtjhVxqfW6ewc+eHiL+IRRM1P5ecDAaL3V0ou6ecSurU+t9DR4114mzNJ5SqNxMgiJzbXdhR+j55GjfXdk0FyzxM3a5qpVcGZEXiAzGzhHytUV51+YGnuLGaZ37nebh3UlYC+KJev4MYIVww0tWmY+9GniRSQlgLLUQZ+FcBUjaqhwqVqsHe4F/woW1IHe7mfm63GXyBavVc+llrEzRbMO111MogZUcoWDI9w7UIm8ZOTnhJsk7jhJzG2GpSXZHmly/a/buFaaFnmfZ4MYPkgJD username@example.com
      

      Collez cette valeur, dans son intégralité, dans la boîte plus grande. Dans la case « Comment (optional) », vous pouvez choisir une étiquette pour la clé. Elle apparaîtra sous le nom de clé dans l’interface DigitalOcean :

      SSH new key

      Lorsque vous créez votre Droplet, les clés SSH publiques que vous avez sélectionnées seront placées dans le fichier ~/.ssh/authorized_keys du compte de l’utilisateur root. Cela vous permettra de vous connecter au serveur à partir de l’ordinateur qui intègre votre clé privée.

      Si vous disposez déjà d’un serveur et que vous n’avez pas intégré de clés lors de la création, vous pouvez toujours charger votre clé publique et l’utiliser pour vous authentifier sur votre serveur.

      La méthode que vous allez utiliser dépendra principalement des outils dont vous disposez et des détails de votre configuration actuelle. Vous obtiendrez le même résultat final avec toutes les méthodes suivantes. La première méthode est la plus simple et la plus automatisée. Celles qui suivent nécessitent chacune des manipulations supplémentaires si vous ne pouvez pas utiliser les méthodes précédentes.

      Copier votre clé publique à l’aide de SSH-Copy-ID

      La façon la plus simple de copier votre clé publique sur un serveur existant consiste à utiliser un utilitaire appelé ssh-copy-id. En raison de sa simplicité, nous vous recommandons d’utiliser cette méthode, si elle est disponible.

      L’outil ssh-copy-id est inclus dans les paquets OpenSSH de nombreuses distributions. Vous pouvez donc en disposer sur votre système local. Pour que cette méthode fonctionne, vous devez déjà disposer d’un accès SSH à votre serveur, basé sur un mot de passe.

      Pour utiliser l’utilitaire, il vous suffit de spécifier l’hôte distant auquel vous souhaitez vous connecter et le compte utilisateur auquel vous avez accès SSH par mot de passe. Il s’agit du compte sur lequel votre clé publique SSH sera copiée.

      La syntaxe est la suivante :

      ssh-copy-id username@remote_host
      

      Il se peut que vous voyez apparaître un message similaire à celui-ci :

      The authenticity of host '111.111.11.111 (111.111.11.111)' can't be established.
      ECDSA key fingerprint is fd:fd:d4:f9:77:fe:73:84:e1:55:00:ad:d6:6d:22:fe.
      Are you sure you want to continue connecting (yes/no)? yes
      

      Cela signifie simplement que votre ordinateur local ne reconnaît pas l’hôte distant. Cela se produira la première fois que vous vous connecterez à un nouvel hôte. Tapez « yes » et appuyez sur ENTER (ENTRÉE) pour continuer.

      Ensuite, l’utilitaire recherchera sur votre compte local la clé id_rsa.pub que nous avons créée précédemment. Lorsqu’il trouvera la clé, il vous demandera le mot de passe du compte de l’utilisateur distant :

      /usr/bin/ssh-copy-id: INFO: attempting to log in with the new key(s), to filter out any that are already installed
      /usr/bin/ssh-copy-id: INFO: 1 key(s) remain to be installed -- if you are prompted now it is to install the new keys
      username@111.111.11.111's password:
      

      Saisissez le mot de passe (votre saisie ne s’affichera pas pour des raisons de sécurité) et appuyez sur ENTER. L’utilitaire se connectera au compte sur l’hôte distant en utilisant le mot de passe que vous avez fourni. Il copiera ensuite le contenu de votre clé ~/.ssh/id_rsa.pub dans un fichier situé dans le répertoire de base ~/.ssh du compte distant appelé authorized_keys.

      Vous obtiendrez un résultat similaire à ce qui suit :

      Number of key(s) added: 1
      
      Now try logging into the machine, with:   "ssh 'username@111.111.11.111'"
      and check to make sure that only the key(s) you wanted were added.
      

      À ce stade, votre clé id_rsa.pub a été téléchargée sur le compte distant. Vous pouvez passer à la section suivante.

      Copier votre clé publique à l’aide de SSH

      Si vous ne disposez pas de ssh-copy-id, mais que vous avez un accès SSH par mot de passe à un compte sur votre serveur, vous pouvez télécharger vos clés en utilisant une méthode SSH classique.

      Nous pouvons le faire en extrayant le contenu de notre clé SSH publique sur notre ordinateur local et en l’acheminant par une connexion SSH vers le serveur distant. D’autre part, nous pouvons nous assurer que le répertoire ~/.ssh existe bien sous le compte que nous utilisons pour ensuite générer le contenu que nous avons transmis dans un fichier appelé authorized_keys dans ce répertoire.

      Nous allons utiliser le symbole de redirection >> pour ajouter le contenu au lieu d’écraser le contenu précédent. Cela nous permettra d’ajouter des clés sans détruire les clés précédemment ajoutées.

      La commande ressemblera à ceci :

      cat ~/.ssh/id_rsa.pub | ssh username@remote_host "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"
      

      Il se peut que vous voyez apparaître un message similaire à celui-ci :

      The authenticity of host '111.111.11.111 (111.111.11.111)' can't be established.
      ECDSA key fingerprint is fd:fd:d4:f9:77:fe:73:84:e1:55:00:ad:d6:6d:22:fe.
      Are you sure you want to continue connecting (yes/no)? yes
      

      Cela signifie simplement que votre ordinateur local ne reconnaît pas l’hôte distant. Cela se produira la première fois que vous vous connecterez à un nouvel hôte. Tapez « yes » et appuyez sur ENTER (ENTRÉE) pour continuer.

      Ensuite, vous serez invité à saisir le mot de passe du compte auquel vous tentez de vous connecter :

      username@111.111.11.111's password:
      

      Après avoir saisi votre mot de passe, le contenu de votre clé id_rsa.pub sera copié à la fin du fichier authorized_keys du compte de l’utilisateur distant. Si cela fonctionne, passez à la section suivante.

      Copier manuellement votre clé publique

      Si vous ne disposez pas d’un accès SSH à votre serveur protégé par un mot de passe, vous devrez suivre le processus décrit ci-dessus manuellement.

      Le contenu de votre fichier id_rsa.pub devra être ajouté à un fichier qui se trouvera dans ~/.ssh/authorized_keys sur votre machine distante.

      Pour afficher le contenu de votre clé id_rsa.pub, tapez ceci dans votre ordinateur local :

      cat ~/.ssh/id_rsa.pub
      

      Vous verrez le contenu de la clé de manière similaire à ceci :

      ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQCqql6MzstZYh1TmWWv11q5O3pISj2ZFl9HgH1JLknLLx44+tXfJ7mIrKNxOOwxIxvcBF8PXSYvobFYEZjGIVCEAjrUzLiIxbyCoxVyle7Q+bqgZ8SeeM8wzytsY+dVGcBxF6N4JS+zVk5eMcV385gG3Y6ON3EG112n6d+SMXY0OEBIcO6x+PnUSGHrSgpBgX7Ks1r7xqFa7heJLLt2wWwkARptX7udSq05paBhcpB0pHtA1Rfz3K2B+ZVIpSDfki9UVKzT8JUmwW6NNzSgxUfQHGwnW7kj4jp4AT0VZk3ADw497M2G/12N0PPB5CnhHf7ovgy6nL1ikrygTKRFmNZISvAcywB9GVqNAVE+ZHDSCuURNsAInVzgYo9xgJDW8wUw2o8U77+xiFxgI5QSZX3Iq7YLMgeksaO4rBJEa54k8m5wEiEE1nUhLuJ0X/vh2xPff6SQ1BL/zkOhvJCACK6Vb15mDOeCSq54Cr7kvS46itMosi/uS66+PujOO+xt/2FWYepz6ZlN70bRly57Q06J+ZJoc9FfBCbCyYH7U/ASsmY095ywPsBo1XQ9PqhnN1/YOorJ068foQDNVpm146mUpILVxmq41Cj55YKHEazXGsdBIbXWhcrRf4G2fJLRcGUr9q8/lERo9oxRm5JFX6TCmj6kmiFqv+Ow9gI0x8GvaQ== demo@test
      

      Accédez à votre hôte distant en utilisant la méthode dont vous disposez. Par exemple, si votre serveur est un Droplet DigitalOcean, vous pouvez vous connecter à l’aide de la console Web disponible dans le panneau de configuration :

      Accès à la console DigitalOcean

      Une fois que vous avez accès à votre compte sur le serveur distant, vous devez vous assurer que le répertoire ~/.ssh est créé. Cette commande va créer le répertoire si nécessaire, ou ne rien faire s’il existe déjà :

      mkdir -p ~/.ssh
      

      Maintenant, vous pouvez créer ou modifier le fichier authorized_keys dans ce répertoire. Vous pouvez ajouter le contenu de votre fichier id_rsa.pub à la fin du fichier authorized_keys, en le créant si nécessaire, à l’aide de la commande suivante :

      echo public_key_string >> ~/.ssh/authorized_keys
      

      Dans la commande ci-dessus, remplacez la chaîne public_key_string par la sortie de la commande cat ~/.ssh/id_rsa.pub que vous avez exécutée sur votre système local. Elle devrait commencer par ssh-rsa AAAA....

      Si cela fonctionne, vous pouvez passer à l’authentification sans mot de passe.

      Authentification sur votre serveur à l’aide des clés SSH

      Si vous avez effectué avec succès l’une des procédures ci-dessus, vous devriez pouvoir vous connecter à l’hôte distant sans le mot de passe du compte distant.

      Le processus de base est le même :

      ssh username@remote_host
      

      Si c’est la première fois que vous vous connectez à cet hôte (si vous avez utilisé la dernière méthode ci-dessus), vous verrez peut-être quelque chose comme ceci :

      The authenticity of host '111.111.11.111 (111.111.11.111)' can't be established.
      ECDSA key fingerprint is fd:fd:d4:f9:77:fe:73:84:e1:55:00:ad:d6:6d:22:fe.
      Are you sure you want to continue connecting (yes/no)? yes
      

      Cela signifie simplement que votre ordinateur local ne reconnaît pas l’hôte distant. Tapez « yes » et appuyez sur ENTER pour continuer.

      Si vous n’avez pas fourni de phrase de passe pour votre clé privée, vous serez immédiatement connecté. Si vous avez configuré une phrase de passe pour la clé privée au moment de la création de la clé, vous devrez la saisir maintenant. Ensuite, une nouvelle session shell devrait être générée pour vous avec le compte sur le système distant.

      Si cela fonctionne, continuer pour savoir comment verrouiller le serveur.

      Désactiver l’authentification par mot de passe sur votre serveur

      Si vous avez pu vous connecter à votre compte en utilisant SSH sans mot de passe, vous avez réussi à configurer une authentification basée sur des clés SSH pour votre compte. Cependant, votre mécanisme d’authentification par mot de passe est toujours actif, ce qui signifie que votre serveur est toujours exposé aux attaques par force brute.

      Avant de procéder aux étapes décrites dans cette section, vérifiez que vous avez bien configuré une authentification par clé SSH pour le compte root sur ce serveur, ou de préférence, que vous avez bien configuré une authentification par clé SSH pour un compte sur ce serveur avec un accès sudo. Cette étape permettra de verrouiller les connexions par mot de passe. Il est donc essentiel de s’assurer que vous pourrez toujours obtenir un accès administratif.

      Une fois les conditions ci-dessus satisfaites, connectez-vous à votre serveur distant avec les clés SSH, soit en tant que root, soit avec un compte avec des privilèges sudo. Ouvrez le fichier de configuration du démon SSH :

      sudo nano /etc/ssh/sshd_config
      

      Dans le fichier, recherchez une directive appelée PasswordAuthentication. Elle est peut-être commentée. Décommentez la ligne et réglez la valeur sur « no ». Cela désactivera votre capacité à vous connecter avec SSH en utilisant des mots de passe de compte :

      PasswordAuthentication no
      

      Enregistrez et fermez le fichier lorsque vous avez terminé. Pour implémenter effectivement les modifications que vous venez d’apporter, vous devez redémarrer le service.

      Sur les machines Ubuntu ou Debian, vous pouvez lancer la commande suivante :

      sudo service ssh restart
      

      Sur les machines CentOS/Fedora, le démon s’appelle sshd :

      sudo service sshd restart
      

      Une fois cette étape terminée, vous avez réussi à transiter votre démon SSH de manière à ce qu’il réponde uniquement aux clés SSH.

      Conclusion

      Vous devriez maintenant avoir une authentification basée sur une clé SSH configurée et active sur votre serveur, vous permettant de vous connecter sans fournir de mot de passe de compte. À partir de là, vos options sont multiples. Si vous souhaitez en savoir plus sur SSH, consultez notre Guide des fondamentaux SSH.



      Source link

      Comment ajouter une authentification à votre application avec Flask-Login


      Introduction

      Permettre aux utilisateurs de se connecter à votre application est l’une des fonctionnalités les plus courantes que vous ajouterez à votre application web. Cet article explique comment ajouter une authentification à votre application Flask avec le paquet Flask-Login.

      Gif animé de l'application Flask et boîte de connexion

      Nous allons créer des pages d’enregistrement et de connexion qui permettent aux utilisateurs de se connecter et d’accéder à des pages protégées que les utilisateurs qui ne sont pas connectés ne peuvent pas voir. Nous prendrons les informations du modèle utilisateur et les afficherons sur nos pages protégées lorsque l’utilisateur se connectera pour simuler à quoi ressemblerait un profil.

      Nous aborderons les points suivants dans cet article :

      • Utiliser la bibliothèque Flask-Login pour la gestion des sessions
      • Utiliser l’utilitaire Flask intégré pour le hachage des mots de passe
      • Ajouter des pages protégées à notre application pour les utilisateurs connectés uniquement
      • Utiliser Flask-SQLAlchemy pour créer un modèle d’utilisateur
      • Créer des formulaires d’enregistrement et de connexion pour que nos utilisateurs puissent créer des comptes et se connecter
      • Envoyer rapidement des messages d’erreur aux utilisateurs lorsque quelque chose ne va pas
      • Utiliser les informations du compte de l’utilisateur pour les afficher sur la page de profil

      Le code source de ce projet est disponible sur GitHub.

      Conditions préalables

      Pour terminer ce tutoriel, vous aurez besoin des éléments suivants :

      Notre application utilisera le modèle d’usine de l’application Flask avec des plans. Nous aurons un modèle qui gère tout ce qui est lié à la propriété auth, et nous en aurons un autre pour nos itinéraires réguliers, qui comprennent l’index et la page de profil protégé. Dans une véritable application, vous pouvez décomposer la fonctionnalité comme vous le souhaitez, mais la solution présentée ici fonctionnera bien pour ce tutoriel.

      Voici un diagramme qui vous donnera une idée de la structure des fichiers de votre projet une fois que vous aurez terminé le tutoriel :

      .
      └── flask_auth_app
          └── project
              ├── __init__.py       # setup our app
              ├── auth.py           # the auth routes for our app
              ├── db.sqlite         # our database
              ├── main.py           # the non-auth routes for our app
              ├── models.py         # our user model
              └── templates
                  ├── base.html     # contains common layout and links
                  ├── index.html    # show the home page
                  ├── login.html    # show the login form
                  ├── profile.html  # show the profile page
                  └── signup.html   # show the signup form
      

      Au fur et à mesure que nous avancerons dans le tutoriel, nous créerons ces répertoires et ces fichiers.

      Étape 1 — Installer des paquets

      Il y a trois paquets principaux dont nous avons besoin pour notre projet :

      • Flask
      • Flask-Login : pour gérer les sessions utilisateur après authentification
      • Flask-SQLAlchemy : pour représenter le modèle d’utilisateur et l’interface avec notre base de données

      Nous utiliserons SQLite pour éviter d’avoir à installer des dépendances supplémentaires pour la base de données.

      Tout d’abord, nous allons commencer par créer le répertoire des projets :

      Ensuite, nous devons naviguer vers le répertoire du projet :

      Vous voudrez créer un environnement Python si vous n’en avez pas. Selon la façon dont Python a été installé sur votre machine, vos commandes seront similaires :

      • python3 -m venv auth
      • source auth/bin/activate

      Note : vous pouvez consulter le tutoriel adapté à votre environnement local pour la mise en place de venv.

      Exécutez les commandes suivantes depuis votre environnement virtuel pour installer les paquets nécessaires :

      • pip install flask flask-sqlalchemy flask-login

      Maintenant que vous avez installé les paquets, vous êtes prêt à créer le fichier principal de l’application.

      Étape 2 — Création du dossier d’application principale

      Commençons par créer un répertoire project :

      Le premier dossier sur lequel nous travaillerons sera le fichier __init__.py pour notre projet :

      Ce fichier aura pour fonction de créer notre app, qui initialisera la base de données et enregistrera nos plans. Pour l’instant, cela ne fera pas grand-chose, mais ce sera nécessaire pour le reste de notre application. Nous devons initialiser SQLAlchemy, définir quelques valeurs de configuration et enregistrer nos plans ici.

      project/__init__.py

      from flask import Flask
      from flask_sqlalchemy import SQLAlchemy
      
      # init SQLAlchemy so we can use it later in our models
      db = SQLAlchemy()
      
      def create_app():
          app = Flask(__name__)
      
          app.config['SECRET_KEY'] = 'secret-key-goes-here'
          app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite'
      
          db.init_app(app)
      
          # blueprint for auth routes in our app
          from .auth import auth as auth_blueprint
          app.register_blueprint(auth_blueprint)
      
          # blueprint for non-auth parts of app
          from .main import main as main_blueprint
          app.register_blueprint(main_blueprint)
      
          return app
      

      Maintenant que nous avons le fichier principal de l’application, nous pouvons commencer à ajouter des itinéraires.

      Étape 3 — Ajouter des itinéraires

      Pour nos itinéraires, nous utiliserons deux plans. Pour notre plan principal, nous aurons une page d’accueil (/) et la page de profil (/profile) pour après s’être connecté. Si l’utilisateur tente d’accéder à la page de profil sans être connecté, il sera envoyé sur l’intinéraire de connexion.

      Pour notre plan d’authentification, nous aurons des itinéraires pour récupérer à la fois la page de connexion (/login) et la page d’inscription (/sign-up). Nous aurons également des itinéraires pour traiter les demandes POST provenant de ces deux itinéraires. Enfin, nous aurons un itinéraire de déconnexion (/logout) pour déconnecter un utilisateur actif.

      Pour l’instant, nous allons définir le login, signup, et logout avec des retours simples. Nous les réexaminerons à une étape ultérieure et les mettrons à jour avec la fonctionnalité souhaitée.

      Tout d’abord, créez main.py pour votre main_blueprint :

      project/main.py

      from flask import Blueprint
      from . import db
      
      main = Blueprint('main', __name__)
      
      @main.route('/')
      def index():
          return 'Index'
      
      @main.route('/profile')
      def profile():
          return 'Profile'
      

      Ensuite, créez auth.py pour votre auth_blueprint :

      project/auth.py

      from flask import Blueprint
      from . import db
      
      auth = Blueprint('auth', __name__)
      
      @auth.route('/login')
      def login():
          return 'Login'
      
      @auth.route('/signup')
      def signup():
          return 'Signup'
      
      @auth.route('/logout')
      def logout():
          return 'Logout'
      

      Dans un terminal, vous pouvez définir les valeurs FLASK_APP et FLASK_DEBUG :

      • export FLASK_APP=project
      • export FLASK_DEBUG=1

      La variable d’environnement FLASK_APP indique à Flask comment charger l’application. Elle doit indiquer où create_app est situé. Pour nos besoins, nous indiquerons le répertoire des projets.

      La variable d’environnement FLASK_DEBUG est activée en lui donnant la valeur 1, ce qui activera un débogueur qui affichera les erreurs de l’application dans le navigateur.

      Assurez-vous que vous êtes dans le répertoire flask_auth_app et puis exécutez le projet :

      Maintenant, dans un navigateur web, vous devriez être en mesure de naviguer vers les cinq URL possibles et voir le texte renvoyé qui a été défini dans auth.py et main.py.

      Par exemple, visiter localhost:5000/profile affiche : Profile :

      Capture d'écran du projet au port 5000 de localhost dans le navigateur

      Maintenant que nous avons vérifié que nos itinéraires se comportent comme prévu, nous pouvons passer à la création de modèles.

      Étape 4 — Créer des modèles

      Allons de l’avant et créons les modèles qui sont utilisés dans notre application. C’est la première étape avant que nous puissions mettre en œuvre la fonctionnalité de connexion proprement dite. Notre application utilisera quatre modèles :

      • index.html
      • profile.html
      • login.html
      • signup.html

      Nous aurons également un modèle de base qui aura un code commun à chacune des pages. Dans ce cas, le modèle de base sera doté de liens de navigation et de la disposition générale de la page. Créons-les maintenant.

      Tout d’abord, créez un répertoire de modèles sous le répertoire de project :

      • mkdir -p project/templates

      Ensuite, créez base.html :

      • nano project/templates/base.html

      Ensuite, ajoutez le code suivant au fichier base.html :

      project/templates/base.html

      <!DOCTYPE html>
      <html>
      
      <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Flask Auth Example</title>
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
      </head>
      
      <body>
          <section class="hero is-primary is-fullheight">
      
              <div class="hero-head">
                  <nav class="navbar">
                      <div class="container">
      
                          <div id="navbarMenuHeroA" class="navbar-menu">
                              <div class="navbar-end">
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.index') }}" class="navbar-item">
                                      Home
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.profile') }}" class="navbar-item">
                                      Profile
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.login') }}" class="navbar-item">
                                      Login
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.signup') }}" class="navbar-item">
                                      Sign Up
                                  </a>
                                  <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.logout') }}" class="navbar-item">
                                      Logout
                                  </a>
                              </div>
                          </div>
                      </div>
                  </nav>
              </div>
      
              <div class="hero-body">
                  <div class="container has-text-centered">
                     {% block content %}
                     {% endblock %}
                  </div>
              </div>
          </section>
      </body>
      
      </html>
      

      Ce code créera une série de liens de menu vers chaque page de l’application et une zone où le contenu apparaîtra .

      Remarque : En arrière-plan, nous utilisons Bulma pour s’occuper du style et de la mise en page. Pour une plongée plus approfondie dans Bulma, pensez à lire la documentation officielle de Bulma.

      Ensuite, créez templates/index.html:

      • nano project/templates/index.html

      Ajoutez le code suivant au fichier nouvellement créé pour ajouter du contenu à la page :

      project/templates/index.html

      {% extends "base.html" %}
      
      {% block content %}
      <h1 class="title">
        Flask Login Example
      </h1>
      <h2 class="subtitle">
        Easy authentication and authorization in Flask.
      </h2>
      {% endblock %}
      

      Ce code permettra de créer une page d’index de base avec un titre et un sous-titre.

      Ensuite, créez templates/login.html :

      • nano project/templates/login.html

      Ce code génère une page de connexion avec des champs pour Email et Password. Il y a également une case à cocher pour « se souvenir » d’une session connectée.

      project/templates/login.html

      {% extends "base.html" %}
      
      {% block content %}
      <div class="column is-4 is-offset-4">
          <h3 class="title">Login</h3>
          <div class="box">
              <form method="POST" action="/login">
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="email" name="email" placeholder="Your Email" autofocus="">
                      </div>
                  </div>
      
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="password" name="password" placeholder="Your Password">
                      </div>
                  </div>
                  <div class="field">
                      <label class="checkbox">
                          <input type="checkbox">
                          Remember me
                      </label>
                  </div>
                  <button class="button is-block is-info is-large is-fullwidth">Login</button>
              </form>
          </div>
      </div>
      {% endblock %}
      

      Ensuite, créez templates/signup.html :

      • nano project/templates/signup.html

      Ajoutez le code suivant pour créer une page d’inscription avec des champs pour email, name, et password :

      project/templates/signup.html

      {% extends "base.html" %}
      
      {% block content %}
      <div class="column is-4 is-offset-4">
          <h3 class="title">Sign Up</h3>
          <div class="box">
              <form method="POST" action="/signup">
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
                      </div>
                  </div>
      
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="text" name="name" placeholder="Name" autofocus="">
                      </div>
                  </div>
      
                  <div class="field">
                      <div class="control">
                          <input class="input is-large" type="password" name="password" placeholder="Password">
                      </div>
                  </div>
      
                  <button class="button is-block is-info is-large is-fullwidth">Sign Up</button>
              </form>
          </div>
      </div>
      {% endblock %}
      

      Ensuite, créez templates/profile.html :

      • nano project/templates/profile.html

      Ajoutez ce code pour créer une page simple avec un titre codé en dur pour accueillir Anthony:

      project/templates/profile.html

      {% extends "base.html" %}
      
      {% block content %}
      <h1 class="title">
        Welcome, Anthony!
      </h1>
      {% endblock %}
      

      Plus tard, nous ajouterons du code pour saluer dynamiquement tout utilisateur.

      Une fois que vous avez ajouté les modèles, nous pouvons mettre à jour les déclarations de retour dans chacun des itinéraires ; nous devons renvoyer les modèles au lieu du texte.

      Ensuite, mettez à jour main.py en modifiant la ligne d’importation et les itinéraires pour index et profile :

      project/main.py

      from flask import Blueprint, render_template
      ...
      @main.route('/')
      def index():
          return render_template('index.html')
      
      @main.route('/profile')
      def profile():
          return render_template('profile.html')
      

      Vous allez maintenant mettre à jour auth.py en modifiant la ligne d’importation et les itinéraires pour login et signup :

      project/auth.py

      from flask import Blueprint, render_template
      ...
      @auth.route('/login')
      def login():
          return render_template('login.html')
      
      @auth.route('/signup')
      def signup():
          return render_template('signup.html')
      

      Une fois que vous avez effectué ces changements, voici à quoi ressemble la page d’inscription si vous naviguez vers /signup :

      Page d'inscription à /signup

      Vous devriez pouvoir voir également les pages pour /, /login et /profile.

      Nous laisserons /logout seul pour l’instant car il n’affichera pas de modèle quand il sera terminé.

      Étape 5 — Créer des modèles d’utilisateurs

      Notre modèle d’utilisateur représente ce que cela signifie pour notre app d’avoir un utilisateur. Nous aurons des champs pour une adresse électronique, un mot de passe et un nom. Dans votre application, vous pouvez décider que vous souhaitez que beaucoup plus d’informations soient stockées par utilisateur. Vous pouvez ajouter des éléments tels que l’anniversaire, la photo de profil, la localisation ou toute autre préférence de l’utilisateur.

      Les modèles créés dans Flask-SQLAlchemy sont représentés par des classes qui sont ensuite traduites en tables dans une base de données. Les attributs de ces classes se transforment alors en colonnes pour ces tables.

      Allons de l’avant et créons ce modèle d’utilisateur :

      Ce code crée un modèle d’utilisateur avec des colonnes pour un id, email, password et un name :

      project/models.py

      from . import db
      
      class User(db.Model):
          id = db.Column(db.Integer, primary_key=True) # primary keys are required by SQLAlchemy
          email = db.Column(db.String(100), unique=True)
          password = db.Column(db.String(100))
          name = db.Column(db.String(1000))
      

      Maintenant que vous avez créé un modèle d’utilisateur, vous pouvez passer à la configuration de votre base de données.

      Étape 6 — Configurer la base de données

      Comme indiqué dans les conditions préalables, nous utiliserons une base de données SQLite. Nous pourrions créer nous-mêmes une base de données SQLite, mais laissons Flask-SQLAlchemy le faire pour nous. Nous avons déjà le chemin de la base de données spécifié dans le fichier__init__.py,il suffit donc de dire à Flask-SQLAlchemy de créer la base de données dans le REPL Python.

      Si vous arrêtez votre application et ouvrez un REPL en Python, nous pouvons créer la base de données en utilisant la méthode create_all sur l’objet db. Assurez-vous que vous êtes toujours dans l’environnement virtuel et dans le répertoire flask_auth_app.

      • from project import db, create_app
      • db.create_all(app=create_app()) # pass the create_app result so Flask-SQLAlchemy gets the configuration.

      Note : Si l’utilisation de l’interpréteur Python est nouvelle pour vous, vous pouvez consulter la documentation officielle.

      Vous allez maintenant voir un fichier db.sqlite dans le répertoire de votre projet. Cette base de données contiendra notre table d’utilisateurs.

      Étape 7 — Mettre en place la fonction d’autorisation

      Pour notre fonction d’inscription, nous allons prendre les données que l’utilisateur tape dans le formulaire et les ajouter à notre base de données. Avant de les ajouter, nous devons nous assurer que l’utilisateur n’existe pas déjà dans la base de données. Si ce n’est pas le cas, nous devons nous assurer que nous avons bien haché le mot de passe avant de le placer dans la base de données, car nous ne voulons pas que nos mots de passe soient stockés en clair.

      Commençons par ajouter une deuxième fonction pour traiter les données du formulaire POST. Dans cette fonction, nous allons d’abord recueillir les données transmises par l’utilisateur.

      Créez la fonction et ajoutez une redirection vers le bas. Cela permettra à l’utilisateur de faire l’expérience d’une inscription réussie et d’être dirigé vers la page de connexion.

      Mettez à jour auth.py en modifiant la ligne d’importation et en mettant en œuvre signup_post :

      project/auth.py

      from flask import Blueprint, render_template, redirect, url_for
      ...
      @auth.route('/signup', methods=['POST'])
      def signup_post():
          # code to validate and add user to database goes here
          return redirect(url_for('auth.login'))
      

      Maintenant, ajoutons le reste du code nécessaire à l’inscription d’un utilisateur.

      Pour commencer, nous devrons utiliser l’objet de demande pour obtenir les données du formulaire.

      Continuez à mettre à jour auth.py en ajoutant des importations et en mettant en œuvre signup_post:

      auth.py

      from flask import Blueprint, render_template, redirect, url_for, request
      from werkzeug.security import generate_password_hash, check_password_hash
      from .models import User
      from . import db
      ...
      @auth.route('/signup', methods=['POST'])
      def signup_post():
          email = request.form.get('email')
          name = request.form.get('name')
          password = request.form.get('password')
      
          user = User.query.filter_by(email=email).first() # if this returns a user, then the email already exists in database
      
          if user: # if a user is found, we want to redirect back to signup page so user can try again
              return redirect(url_for('auth.signup'))
      
          # create a new user with the form data. Hash the password so the plaintext version isn't saved.
          new_user = User(email=email, name=name, password=generate_password_hash(password, method='sha256'))
      
          # add the new user to the database
          db.session.add(new_user)
          db.session.commit()
      
          return redirect(url_for('auth.login'))
      

      Remarque : Le stockage des mots de passe en clair est considéré comme une mauvaise pratique de sécurité. Vous voudrez généralement utiliser un algorithme de hachage complexe et un sel de mot de passe pour assurer la sécurité des mots de passe.

      Étape 8 — Tester la méthode d’inscription

      Maintenant que la méthode d’inscription est terminée, nous devrions être en mesure de créer un nouvel utilisateur. Utilisez le formulaire pour créer un utilisateur.

      Il y a deux façons de vérifier si l’inscription a fonctionné : vous pouvez utiliser un visualiseur de base de données pour regarder la ligne qui a été ajoutée à votre table, ou vous pouvez essayer de vous inscrire à nouveau avec la même adresse électronique, et si vous obtenez une erreur, vous savez que le premier courriel a été enregistré correctement. Adoptons donc cette approche.

      Nous pouvons ajouter un code pour faire savoir à l’utilisateur que le courriel existe déjà et lui dire de se rendre à la page de connexion. En appelant la fonction flash, nous enverrons un message à la demande suivante, qui dans ce cas, est la redirection. La page sur laquelle nous arrivons aura alors accès à ce message dans le modèle.

      D’abord, nous ajoutons le flash avant de rediriger vers notre page d’enregistrement.

      project/auth.py

      from flask import Blueprint, render_template, redirect, url_for, request, flash
      ...
      @auth.route('/signup', methods=['POST'])
      def signup_post():
          ...
          if user: # if a user is found, we want to redirect back to signup page so user can try again
              flash('Email address already exists')
              return redirect(url_for('auth.signup'))
      

      Pour obtenir le message clignotant dans le modèle, nous pouvons ajouter ce code au-dessus du formulaire. Le message s’affichera alors directement au-dessus du formulaire.

      project/templates/signup.html

      ...
      {% with messages = get_flashed_messages() %}
      {% if messages %}
          <div class="notification is-danger">
              {{ messages[0] }}. Go to <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.login') }}">login page</a>.
          </div>
      {% endif %}
      {% endwith %}
      <form method="POST" action="/signup">
      

      Boîte d'inscription affichant un message qui indique que l'adresse électronique existe déjà. Allez à la page de login dans une boîte rose foncé

      Étape 9 — Ajouter la méthode de connexion

      La méthode de connexion est similaire à la fonction d’inscription en ce sens que nous prenons les informations de l’utilisateur et en faisons quelque chose. Dans ce cas, nous comparerons l’adresse électronique saisie pour voir si elle se trouve dans la base de données. Si c’est le cas, nous testerons le mot de passe fourni par l’utilisateur en hachant le mot de passe que l’utilisateur nous a communiqué et en le comparant au mot de passe haché dans la base de données. Nous savons que l’utilisateur a saisi le bon mot de passe lorsque les deux mots de passe hachés correspondent.

      Une fois que l’utilisateur a passé le contrôle du mot de passe, nous savons qu’il possède les bonnes références et nous pouvons le connecter en utilisant Flask-Login. En appelant login_user, Flask-Login créera une session pour cet utilisateur qui persistera tant que l’utilisateur restera connecté, ce qui lui permettra de voir les pages protégées.

      Nous pouvons commencer par un nouveau mode de traitement des données POSTed. Nous redirigerons vers la page de profil lorsque l’utilisateur se connectera avec succès :

      project/auth.py

      ...
      @auth.route('/login', methods=['POST'])
      def login_post():
          # login code goes here
          return redirect(url_for('main.profile'))
      

      Maintenant, nous devons vérifier si l’utilisateur possède les bons identifiants

      project/auth.py

      ...
      @auth.route('/login', methods=['POST'])
      def login_post():
          email = request.form.get('email')
          password = request.form.get('password')
          remember = True if request.form.get('remember') else False
      
          user = User.query.filter_by(email=email).first()
      
          # check if the user actually exists
          # take the user-supplied password, hash it, and compare it to the hashed password in the database
          if not user or not check_password_hash(user.password, password):
              flash('Please check your login details and try again.')
              return redirect(url_for('auth.login')) # if the user doesn't exist or password is wrong, reload the page
      
          # if the above check passes, then we know the user has the right credentials
          return redirect(url_for('main.profile'))
      

      Ajoutons le bloc dans le modèle pour que l’utilisateur puisse voir le message clignotant. Comme pour le formulaire d’inscription, ajoutons le message d’erreur potentiel directement au-dessus du formulaire :

      project/templates/login.html

      ...
      {% with messages = get_flashed_messages() %}
      {% if messages %}
          <div class="notification is-danger">
              {{ messages[0] }}
          </div>
      {% endif %}
      {% endwith %}
      <form method="POST" action="/login">
      

      Nous avons maintenant la possibilité de dire qu’un utilisateur a été connecté avec succès, mais il n’y a rien pour connecter l’utilisateur. C’est là que nous introduisons Flask-Login pour gérer les sessions des utilisateurs.

      Avant de commencer, nous avons besoin de quelques éléments pour que Flask-Login fonctionne. Commencez par ajouter le UserMixin à votre modèle User. Le UserMixin ajoutera les attributs de Flask-Login au modèle afin que Flask-Login puisse travailler avec lui.

      models.py

      from flask_login import UserMixin
      from . import db
      
      class User(UserMixin, db.Model):
          id = db.Column(db.Integer, primary_key=True) # primary keys are required by SQLAlchemy
          email = db.Column(db.String(100), unique=True)
          password = db.Column(db.String(100))
          name = db.Column(db.String(1000))
      

      Ensuite, nous devons spécifier notre chargeur d’utilisateurs. Un chargeur d’utilisateur indique à Flask-Login comment trouver un utilisateur spécifique à partir de son identifiant stocké dans son cookie de session. Nous pouvons l’ajouter dans notre create_app ainsi que le code init du Flask-Login :

      project/__init__.py

      ...
      from flask_login import LoginManager
      ...
      def create_app():
          ...
          db.init_app(app)
      
          login_manager = LoginManager()
          login_manager.login_view = 'auth.login'
          login_manager.init_app(app)
      
          from .models import User
      
          @login_manager.user_loader
          def load_user(user_id):
              # since the user_id is just the primary key of our user table, use it in the query for the user
              return User.query.get(int(user_id))
      

      Enfin, nous pouvons ajouter le login_user juste avant de rediriger vers la page de profil pour créer la session :

      project/auth.py

      from flask_login import login_user
      from .models import User
      ...
      @auth.route('/login', methods=['POST'])
      def login_post():
          ...
          # if the above check passes, then we know the user has the right credentials
          login_user(user, remember=remember)
          return redirect(url_for('main.profile'))
      

      Avec la configuration de Flask-Login, nous pouvons utiliser l’itinéraire /login. Lorsque tout est en place, vous verrez la page de profil.

      Page de profil avec « Welcome, Anthony! »

      Étape 10 — Protéger les pages

      Si votre nom n’est pas aussi Anthony, alors vous verrez que votre nom est faux. Ce que nous voulons, c’est que le profil affiche le nom dans la base de données. Nous devons donc d’abord protéger la page et ensuite accéder aux données de l’utilisateur pour obtenir le nom.

      Pour protéger une page lors de l’utilisation de Flask-Login, nous ajoutons le décorateur @login_required entre l’itinéraire et la fonction. Cela empêchera un utilisateur qui n’est pas connecté de voir l’itinéraire. Si l’utilisateur n’est pas connecté, il sera redirigé vers la page de connexion, selon la configuration du Flask-Login.

      Avec les itinéraires qui sont décorés avec le décorateur @login_required, nous avons alors la possibilité d’utiliser l’objet current_user à l’intérieur de la fonction. Ce current_user représente l’utilisateur de la base de données, et nous pouvons accéder à tous les attributs de cet utilisateur avec la notation par points. Par exemple, current_user.email, current_user.password, et current_user.name, et current_user.id renverront les valeurs réelles stockées dans la base de données pour l’utilisateur connecté.

      Utilisons le nom de l’utilisateur actuel et envoyons-le au modèle. Nous utiliserons alors ce nom et afficherons sa valeur.

      project/main.py

      from flask_login import login_required, current_user
      ...
      @main.route('/profile')
      @login_required
      def profile():
          return render_template('profile.html', name=current_user.name)
      

      Ensuite, dans le fichier profile.html, mettez à jour la page pour afficher la valeur name :

      project/templates/profile.html

      ...
      <h1 class="title">
        Welcome, {{ name }}!
      </h1>
      

      Une fois que nous nous rendons sur notre page de profil, nous voyons alors que le nom de l’utilisateur apparaît.

      Page d'accueil de l'utilisateur avec le nom de l'utilisateur actuellement connecté

      La dernière chose que nous pouvons faire est de mettre à jour la vue de déconnexion. Nous pouvons appeler le logout_user dans un itinéraire de déconnexion. Nous avons le décorateur @login_required parce qu’il n’est pas logique de déconnecter un utilisateur qui n’est pas connecté au départ.

      project/auth.py

      from flask_login import login_user, logout_user, login_required
      ...
      @auth.route('/logout')
      @login_required
      def logout():
          logout_user()
          return redirect(url_for('main.index'))
      

      Lorsque nous nous déconnectons et que nous essayons de consulter à nouveau la page de profil, nous voyons apparaître un message d’erreur. C’est parce que Flask-Login fait clignoter un message pour nous lorsque l’utilisateur n’est pas autorisé à accéder à une page.

      Page de connexion avec un message indiquant que l'utilisateur doit se connecter pour accéder à la page

      Une dernière chose que nous pouvons faire est de mettre des déclarations if dans les modèles pour afficher uniquement les liens pertinents pour l’utilisateur. Ainsi, avant que l’utilisateur ne se connecte, il aura la possibilité de se connecter ou de s’inscrire. Une fois que l’on se connecte, on peut aller sur son profil ou se déconnecter :

      templates/base.html

      ...
      <div class="navbar-end">
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.index') }}" class="navbar-item">
              Home
          </a>
          {% if current_user.is_authenticated %}
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("main.profile') }}" class="navbar-item">
              Profile
          </a>
          {% endif %}
          {% if not current_user.is_authenticated %}
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.login') }}" class="navbar-item">
              Login
          </a>
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.signup') }}" class="navbar-item">
              Sign Up
          </a>
          {% endif %}
          {% if current_user.is_authenticated %}
          <a href="https://www.digitalocean.com/community/tutorials/{{ url_for("auth.logout') }}" class="navbar-item">
              Logout
          </a>
          {% endif %}
      </div>
      

      Page d'accueil avec la navigation « Home, Login, and Sign Up» en haut de l'écran

      Grâce à cela, vous avez réussi à construire votre application avec authentification.

      Conclusion

      Nous avons utilisé Flask-Login et Flask-SQLAlchemy afin de créer un système de connexion pour notre app. Nous avons abordé la manière d’authentifier un utilisateur en créant d’abord un modèle d’utilisateur et en stockant les informations sur l’utilisateur. Ensuite, nous avons dû vérifier que le mot de passe de l’utilisateur était correct en hachant le mot de passe du formulaire et en le comparant à celui stocké dans la base de données. Enfin, nous avons ajouté l’autorisation à notre app en utilisant le décorateur @login_required sur une page de profil afin que seuls les utilisateurs connectés puissent voir cette page.

      Ce que nous avons créé dans ce tutoriel sera suffisant pour les petites applications, mais si vous souhaitez avoir plus de fonctionnalités dès le début, vous pouvez envisager d’utiliser les bibliothèques Flask-User ou Flask-Security qui sont toutes deux construites sur la bibliothèque Flask-Login.



      Source link