One place for hosting & domains

      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

      Comment utiliser EJS pour modéliser votre application de noeuds


      Introduction

      Lors de la création rapide d’applications de nœuds en temps réel, il est parfois nécessaire de disposer d’un moyen simple et rapide de modéliser notre application.

      Jade est le moteur de visualisation d’Express par défaut, mais la syntaxe de Jade peut être trop complexe pour de nombreux cas d’utilisation. EJS est une alternative qui fait bien ce travail et qui est très facile à mettre en place. Voyons comment nous pouvons créer une application simple et utiliser EJS pour inclure des parties répétables de notre site (partiels) et transmettre des données à nos vues.

      Mettre en place l’application de démonstration

      Nous allons faire deux pages pour notre application : une page avec une page pleine et l’autre avec une barre latérale.

      Obtenez le code : Vous pouvez trouver un git repo du code complet de la démo sur GitHub ici

      Structure de fichier

      Voici les dossiers dont nous aurons besoin pour notre application. Nous allons faire notre modèle dans le dossier « views » et le reste est assez standard dans les pratiques de nœuds.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json contiendra nos informations sur les applications de nœuds et les dépendances dont nous avons besoin (express et EJS). server.js contiendra la configuration de notre serveur Express.  Nous allons définir nos itinéraires vers nos pages ici.

      Configuration des nœuds

      Allons dans notre package.json et nous y installerons notre projet.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Tout ce dont nous aurons besoin, c’est d’Express et EJS. Il nous faut maintenant installer les dépendances que nous venons de définir. Allez-y et exécutez :

      Une fois toutes nos dépendances installées, configurons notre application pour utiliser EJS et définissons nos itinéraires pour les deux pages dont nous avons besoin : la page index (pleine largeur) et la page about (barre latérale).  Nous ferons tout cela à l'intérieur de notre fichier server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Ici, nous définissons notre application et nous la définissons pour qu'elle s'affiche sur le port 8080. Nous devons également définir EJS comme le moteur de visualisation de notre application Express en utilisant app.set('view engineer', 'ejs') ;. Remarquez comment nous envoyons une vue à l'utilisateur en utilisant res.render(). Il est important de noter que res.render() va chercher dans un dossier de vues pour le visualiser. Il nous suffit donc de définir pages/index puisque le chemin complet est views/pages/index.

      Démarrez notre serveur

      Allez-y et démarrez le serveur en utilisant :

      Nous pouvons maintenant voir notre application dans le navigateur à l'adresse http://localhost:8080 et http://localhost:8080/about. Notre application est mise en place et nous devons définir nos fichiers de consultation et voir comment EJS fonctionne avec ceux-là.

      Créez les fichiers partiels EJS

      Comme beaucoup d'applications que nous construisons, il y aura beaucoup de code qui sera réutilisé. Nous appellerons ces partiels et définirons trois fichiers que nous utiliserons sur l'ensemble de notre site : head.ejs, header.ejs, et footer.ejs. Faisons maintenant ces fichiers.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Ajoutez les partiels EJS à Views

      Nous avons maintenant défini nos partiels.  Tout ce que nous avons à faire, c'est de les inclure dans nos vues. Allons dans index.ejs et about.ejs et utilisons la syntaxe include pour ajouter les partiels.

      Syntaxe pour l'inclusion d'un partiel EJS

      Utilisez <%- include('RELATIVE/PATH/TO/FILE') %> pour intégrer une partie de EJS dans un autre fichier.

      • Le trait d'union <%- au lieu de <% pour dire à EJS de rendre le HTML brut.
      • Le chemin vers le partiel est relatif au fichier actuel.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Nous pouvons maintenant voir notre vue définie dans le navigateur à l'adresse http://localhost:8080. node-ejs-templating-index

      Pour la page about, nous ajoutons également une barre latérale bootstrap pour montrer comment les partiels peuvent être structurés pour être réutilisés dans différents modèles et pages.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Si nous visitons http://localhost:8080/about nous pouvons consulter notre page about avec une barre latérale ! node-ejs-templating-about

      Nous pouvons maintenant commencer à utiliser EJS pour transmettre les données de notre application de noeuds à nos vues.

      Transmettre les données aux vues et aux partiels

      Définissons quelques variables de base et une liste à transmettre à notre page d'accueil. Retournez dans votre fichier server.js et ajoutez ce qui suit dans votre itinéraireapp.get("https://www.digitalocean.com/").

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Nous avons créé une liste appelée mascots et une chaîne simple appelée tagline. Allons dans notre fichier index.ejs et utilisons-les.

      Rendre une variable unique dans EJS

      Pour faire écho à une seule variable, nous utilisons simplement <%= tagline %>. Ajoutons ceci à notre fichier index.ejs :

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Boucler les données dans EJS

      Pour boucler nos données, nous utiliserons .forEach. Ajoutons ceci à notre nouveau fichier :

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Nous pouvons maintenant voir dans notre navigateur les nouvelles informations que nous avons ajoutées !

      node-ejs-templating-rendered

      Transmettre les données à un partiel dans EJS

      Le partiel EJS a accès à toutes les données identiques à celles de la vue parentale. Mais attention : Si vous faites référence à une variable dans un partiel, elle doit être définie dans chaque vue qui utilise le partiel ou elle lancera une erreur.

      Vous pouvez également définir et transmettre des variables à un partiel EJS dans la syntaxe include, comme ceci :

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Mais vous devez encore une fois faire attention à ne pas supposer qu'une variable a été définie.

      Si vous souhaitez référencer une variable dans un partiel qui n'est pas toujours défini, et lui donner une valeur par défaut, vous pouvez le faire de cette manière :

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      Dans la ligne ci-dessus, le code EJS rend la valeur de variant si elle est définie, et par default si ce n'est pas le cas.

      Conclusion

      EJS nous permet de créer des applications rapides lorsque nous n'avons pas besoin de quelque chose de trop complexe. En utilisant des partiels et en ayant la possibilité de passer facilement des variables à nos vues, nous pouvons construire rapidement d'excellentes applications.

      Pour plus de références sur lEJS, voir le les documents officiels ici.



      Source link

      Comment développer un site web Drupal 9 sur votre machine locale en utilisant Docker et DDEV


      L’auteur a choisi le Diversity in Tech Fund​​​​​ pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      DDEV est un outil open-source qui utilise Docker dans le but de construire des environnements de développement locaux pour de nombreux cadres PHP différents. Grâce à la puissance de la conteneurisation, DDEV peut grandement simplifier la façon dont vous travaillez sur des projets multiples qui utilisent plusieurs piles technologiques et plusieurs serveurs cloud. DDEV comprend des modèles pour WordPress, Laravel, Magento, TYPO3, Drupal, et plus encore.

      Drupal 9 a été publié le 3 juin 2020 pour le CMS Drupal. Connu pour sa facilité d’utilisation et sa vaste bibliothèque de modules et de thèmes, Drupal est un cadre PHP populaire pour la création et la maintenance de divers sites web et applications de toutes tailles.

      Dans ce tutoriel, vous allez commencer à développer un site web Drupal 9 sur votre machine locale en utilisant DDEV. Cela vous permettra de construire votre site web dans un premier temps, puis, lorsque vous serez prêt, de déployer votre projet sur un serveur de production.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin de :

      Note : Il est possible de développer Drupal 9 en utilisant DDEV sur un serveur à distance, mais vous aurez besoin d’une solution pour accéder à localhost dans un navigateur web. La commande de DDEV ddev share fonctionne avec ngrok , qui crée un tunnel sécurisé vers votre serveur pour que vous et d’autres parties prenantes puissiez voir votre site de développement. Pour un usage personnel, vous pouvez également installer une interface graphique sur votre serveur à distance et accéder à votre site de développement via un navigateur web à l’intérieur de cette interface. Pour ce faire, vous pouvez suivre notre guide Comment installer et configurer VNC sur Ubuntu 20.04. Pour une solution GUI encore plus rapide, vous pouvez suivre notre guide sur la façon de configurer un bureau à distance avec X2Go sur Ubuntu 20.04.

      Étape 1 — Installer DDEV

      Au cours de cette étape, vous installerez DDEV sur votre machine locale. L’option 1 comprend des instructions pour macOS, tandis que l’option 2 fournit des instructions pour Linux. Ce tutoriel a été testé sur la version 1.15.0 de DDEV.

      Option 1 — Installation de DDEV sur macOS

      DDEV conseille aux utilisateurs de macOS d’installer leur outil en utilisant le gestionnaire de paquets Homebrew . Utilisez la commande brew suivante pour installer la dernière version stable :

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Si vous préférez la version la plus récente, vous pouvez utiliser brew pour installer ddev-edge :

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Si vous avez déjà une version de DDEV installée, ou si vous souhaitez mettre à jour votre version, arrêtez DDEV et utilisez brew pour mettre à jour votre installation :

      • ddev poweroff
      • brew upgrade ddev

      Une fois que vous avez installé ou mis à jour DDEV, exécutez  ddev version pour vérifier votre logiciel :

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

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV comprend un puissant CLI, ou interface de ligne de commande. Lancez ddev pour en savoir plus sur certaines commandes courantes :

      Vous verrez le résultat suivant :

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Pour plus d’informations sur l’utilisation de la CLI de DDEV, consultez la documentation officielle de DDEV.

      DDEV étant installée sur votre machine locale, vous êtes maintenant prêt(e) a installer Drupal 9 et à commencer à développer un site web.

      Option 2 — Installer DDEV sur Linux

      Sur un système d’exploitation Linux, vous pouvez installer DDEV en utilisant Homebrew pour Linux ou en utilisant le script d’installation officiel. Sur Ubuntu, commencez par mettre à jour votre liste de paquets dans le gestionnaire de paquets apt (vous pouvez utiliser apt dans Debian, sinon utilisez le gestionnaire de paquets équivalent associé à votre distribution Linux) :

      Installez maintenant quelques paquets pré-requis du dépôt officiel d’Ubuntu :

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Ces paquets vous permettront de télécharger le script d’installation de DDEV à partir de leur dépôt officiel GitHub.

      Maintenant, téléchargez le script :

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Avant d’exécuter le script, ouvrez-le dans nano ou votre éditeur de texte préféré et inspectez son contenu :

      nano install_ddev.sh
      

      Une fois que vous avez examiné le contenu du script et que vous êtes satisfait(e), enregistrez et fermez le fichier. Vous êtes maintenant prêt à exécuter le script d’installation.

      Utilisez la commande chmod pour rendre le script exécutable :

      Maintenant, lancez le script :

      Le processus d’installation peut vous demander de confirmer certains paramètres ou d’entrer votre mot de passe sudo. Une fois l’installation terminée, DDEV sera disponible sur votre système d’exploitation Linux.

      Exécutez la version ddev pour vérifier votre logiciel :

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

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV est un puissant CLI, ou interface de ligne de commande. Exécutez ddev sans rien d’autre pour apprendre quelques commandes courantes :

      Vous verrez le résultat suivant :

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Pour plus d’informations sur l’utilisation du CLI de DDEV, vous pouvez consulter la documentation officielle de DDEV.

      DDEV étant installé sur votre machine locale, vous êtes maintenant prêt à déployer Drupal 9 et à commencer à développer un site web.

      Étape 2 — Déployer un nouveau site Drupal 9 en utilisant DDEV

      Avec l’exécution de DDEV, vous allez maintenant l’utiliser pour créer un système de fichiers spécifique à Drupal, installer Drupal 9, et ensuite lancer un projet de site web standard.

      Tout d’abord, vous allez créer un répertoire root du projet et ensuite vous déplacer à l’intérieur de celui-ci. Vous exécuterez toutes les commandes restantes à partir de cet emplacement. Ce tutoriel utilisera d9test , mais vous êtes libre de donner un autre nom à votre répertoire. Notez cependant que DDEV ne gère pas bien les noms avec trait d’union. Il est considéré comme une bonne pratique d’éviter les noms de répertoire comme my-project ou drupal-site-1.

      Créez le répertoire root de votre projet et naviguez à l’intérieur :

      DDEV excelle dans la création d’arborescences de répertoires qui correspondent à des plateformes CMS spécifiques. Utilisez la commande ddev config pour créer une structure de répertoire spécifique à Drupal 9 :

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

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

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Parce que vous avez passé --project-type=drupal9 à votre commande ddev config, DDEV a créé plusieurs sous-répertoires et fichiers qui représentent l’organisation par défaut pour un site Drupal. L’arborescence de votre répertoire de projets ressemblera désormais à ceci :

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      ddev/ sera le dossier principal pour la configuration de ddev. web/ sera le root documentaire de votre nouveau projet ; il contiendra plusieurs fichiers settings. spécifiques. Vous disposez maintenant de la structure initiale pour votre nouveau projet Drupal.

      Votrte prochaine étape consiste à initialiser votre plate-forme, qui permettra de construire les conteneurs et les configurations de réseau nécessaires.  DDEV se lie aux ports 80 et 443, donc si vous utilisez un serveur web comme Apache sur votre machine, ou tout autre chose qui utilise ces ports, arrêtez ces services avant de continuer.

      Utilisez la commande ddev start pour initialiser votre plate-forme :

      Cela permettra de construire tous les conteneurs basés sur Docker pour votre projet, qui comprennent un conteneur web, un conteneur de base de données et phpmyadmin. Une fois l’initialisation terminée, vous verrez un résultat comme celui-ci (votre numéro de port peut être différent) :

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Note : N’oubliez pas que DDEV démarre les conteneurs Docker en arrière-plan ici. Si vous voulez voir ces conteneurs ou vérifier qu’ils fonctionnent, vous pouvez toujours utiliser la commande docker ps :

      En plus des autres conteneurs que vous utilisez actuellement, vous trouverez quatre nouveaux conteneurs, chacun avec une image différente : php-myadmin, ddev-webserver, ddev-router, et ddev-dbserver-mariadb.

      ddev start a réussi à construire vos conteneurs et vous a donné une sortie avec deux URL. Bien que cette sortie indique que votre projet « can be reached at http://d9test.ddev.site and http://127.0.0.1:32773 », le fait de visiter ces URL maintenant entraînera une erreur. À partir de Drupal 8, le noyau de Drupal et les modules contrib fonctionnent comme des dépendances. Par conséquent, vous devez d’abord terminer l’installation de Drupal à l’aide de Composer, le gestionnaire de paquets pour les projets PHP, avant que tout ne se charge dans votre navigateur web.

      L’une des caractéristiques les plus utiles et les plus élégantes de DDEV est que vous pouvez passer les commandes de Composer par le CLI de DDEV et dans votre environnement conteneurisé. Cela signifie que vous pouvez séparer la configuration spécifique de votre machine de votre environnement de développement. Vous n’avez plus à gérer les différents problèmes de chemin de fichier, de dépendance et de version qui accompagnent généralement le développement local de PHP. De plus, vous pouvez rapidement changer de contexte entre plusieurs projets utilisant différents cadres et piles techniques avec un minimum d’effort.

      Utilisez la commande ddev composer pour télécharger drupal/recommended-project. Cela permettra de télécharger le noyau de Drupal, ses bibliothèques et d’autres ressources connexes, puis de créer un projet par défaut :

      • ddev composer create "drupal/recommended-project"

      Téléchargez maintenant un dernier composant appelé Drush, ou Drupal Shell. Ce tutoriel n’utilisera qu’une seule commande drush, et ce tutoriel fournit une alternative, mais drush est un CLI puissant pour le développement de Drupal qui peut améliorer votre efficacité.

      Utilisez ddev composer pour installer drush :

      • ddev composer require "drush/drush"

      Vous avez maintenant construit un projet Drupal 9 par défaut et installé drush. Vous allez maintenant visualiser votre projet dans un navigateur et configurer les paramètres de votre site web.

      Étape 3 — Configuration de votre projet Drupal 9

      Maintenant que vous avez installé Drupal 9, vous pouvez visiter votre nouveau projet dans votre navigateur. Pour ce faire, vous pouvez relancer ddev start et copier l’une des deux URL qu’il produit, ou vous pouvez utiliser la commande suivante, qui lancera automatiquement votre site dans une nouvelle fenêtre de navigateur :

      Vous y trouverez l’assistant d’installation standard de Drupal.

      Installateur Drupal 9 à partir du navigateur

      Vous avez ici deux possibilités. Vous pouvez utiliser cette interface utilisateur et suivre l’assistant tout au long de l’installation, ou vous pouvez retourner à votre terminal et passer une commande drush via ddev. Cette dernière option automatisera le processus d’installation et définira admin comme votre nom d’utilisateur et votre mot de passe.

      Option 1 — Utiliser l’assistant

      Retournez à l’assistant dans votre navigateur. Sous Choose language, sélectionnez une langue dans le menu déroulant et cliquez sur Save and continue. Sélectionnez maintenant un profil d’installation. Vous pouvez choisir entre Standard , Minimal , et Demo. Faites votre choix, puis cliquez sur Save and continue.  Drupal vérifiera automatiquement vos besoins, mettra en place une base de données et installera votre site. La dernière étape consiste à personnaliser quelques configurations. Ajoutez un nom de site et une adresse électronique de site qui se termine par votre domaine. Choisissez ensuite un nom d’utilisateur et un mot de passe. Choisissez un mot de passe fort et conservez vos informations d’identification dans un endroit sûr. Enfin, ajoutez une adresse électronique privée que vous vérifiez régulièrement, remplissez les paramètres régionaux, puis appuyez sur Save and continue.

      Message de bienvenue de Drupal 9 avec un avertissement sur les autorisations

      Votre nouveau site sera chargé avec un message de bienvenue.

      Option 2 — Utilisation de la ligne de commande

      Depuis le répertoire root de votre projet, lancez la commande ddev exec pour installer un site Drupal par défaut en utilisant drush :

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Votre site sera créé de la même manière que l’assistant, mais avec quelques configurations standard. Votre nom d’utilisateur et votre mot de passe seront admin.

      Lancez maintenant le site pour le visualiser dans votre navigateur :

      Vous êtes maintenant prêt à commencer à construire votre site web, mais il est considéré comme une bonne pratique de vérifier que vos autorisations sont correctes pour le répertoire /sites/web/default. Lorsque vous travaillez localement, ce n’est pas une préoccupation importante, mais si vous transférez ces autorisations à un serveur de production, elles poseront un risque de sécurité.

      Étape 4 — Vérifier vos autorisations

      Pendant l’installation de l’assistant, ou lors du premier chargement de votre page d’accueil, vous pouvez voir un avertissement concernant les paramètres des permissions dans votre répertoire /sites/web/default et un fichier à l’intérieur de ce répertoire : settings.php.

      Après l’exécution du script d’installation, Drupal essaiera de définir les permissions read et execute pour le répertoire web/sites/default, pour tous les groupes : il s’agit d’un paramètre de permissions 555. read only, ou 444. Si vous rencontrez cet avertissement, exécutez ces deux commandes `chmod` du répertoire root de votre projet. Tout manquement à cette obligation constitue un risque pour la sécurité :

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Pour vérifier que vous avez les bonnes autorisations, exécutez la commande ls avec les boutons a , l , h et d :

      • ls -alhd web/sites/default web/sites/default/settings.php

      Vérifiez que vos autorisations correspondent à la sortie suivante :

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Vous êtes maintenant prêt(e) à développer un site web Drupal 9 sur votre machine locale.

      Étape 5 — Créer votre premier article dans Drupal

      Pour tester certaines des fonctionnalités de Drupal, vous allez maintenant créer un message en utilisant l’interface utilisateur du web.

      Depuis la page initiale de votre site, cliquez sur le bouton Content dans le menu supérieur à gauche. Cliquez maintenant sur le bouton bleu add content. Une nouvelle page apparaîtra. Cliquez sur Article, et une autre page apparaîtra.

      Drupal 9 Créer une invite d'article  

      Ajoutez le titre et le contenu que vous souhaitez. Vous pouvez également ajouter une image, comme l’un des fonds d’écran de DigitalOcean . Lorsque vous êtes prêt, cliquez sur le bouton bleu save.

      Votre premier article apparaîtra sur votre site web.

      Création d'article par Drupal 9  

      Vous développez maintenant un site web Drupal 9 sur votre machine locale sans jamais interagir avec un serveur grâce à Docker et DDEV. Dans l’étape suivante, vous gérerez le conteneur DDEV afin d’adapter votre flux de travail.

      Étape 6 — Gérer le conteneur DDEV

      Lorsque vous avez terminé le développement de votre projet, ou lorsque vous souhaitez faire une pause, vous pouvez arrêter votre conteneur DDEV sans vous soucier de la perte de données. DDEV peut gérer un changement rapide de contexte parmi de nombreux projets ; c’est l’une de ses caractéristiques les plus utiles. Votre code et vos données sont toujours conservés dans le répertoire de votre projet, même après que vous ayez arrêté ou supprimé le conteneur DDEV.

      Pour libérer des ressources, vous pouvez arrêter DDEV à tout moment. Depuis le répertoire root de votre projet, exécutez la commande suivante :

      DDEV est disponible dans le monde entier, vous pouvez donc exécuter des commandes ddev depuis n’importe quel endroit, à condition de spécifier le projet DDEV :

      Vous pouvez également consulter tous vos projets en même temps en utilisant ddev list :

      DDEV comprend de nombreuses autres commandes utiles.

      Vous pouvez à tout moment relancer DDEV et continuer à vous développer localement.

      Conclusion

      Dans ce tutoriel, vous avez utilisé Docker et la puissance de la conteneurisation pour développer un site Drupal localement, avec l’aide de DDEV. DDEV s’intègre également bien avec de nombreux EDI et fournit un débogage PHP intégré pour Atom, PHPStorm et Visual Studio Code (vscode). Vous pouvez également en apprendre davantage sur la création d’environnements de développement pour Drupal avec DDEV ou sur le développement d’autres cadres PHP comme WordPress .



      Source link