Comment FastAPI parle REST ?

L'architecture d'une application FastAPI repose sur la définition de points de terminaison, ou "endpoints", qui sont essentiels à la construction de toute API REST. En observant un exemple minimal d'application FastAPI, tel que l'exemple classique "Hello World", il devient possible d'examiner comment FastAPI structure ces points de terminaison. Dans ce contexte, un point de terminaison spécifie les éléments suivants : une combinaison unique d'URL, un chemin, et une méthode HTTP.

Prenons un exemple pratique. Dans un nouveau dossier nommé "Chapter4", vous pouvez créer un fichier Python appelé chapter4_01.py dans Visual Studio Code, avec le code suivant :

python
Copy code
from fastapi import FastAPI

app = FastAPI()
@app.get("/")
async def root():
    return {"message": "Hello FastAPI"}

Avec ce code, plusieurs éléments sont mis en place. D'abord, dans la première ligne, vous importez la classe FastAPI du package fastapi. Ensuite, vous instanciez un objet d'application. Cet objet est une classe Python qui expose les fonctionnalités de l'API et crée une application compatible avec ASGI, qu'il faudra transmettre à Uvicorn pour la mettre en route. À ce moment-là, l'application est prête, mais sans points de terminaison, elle ne peut rien faire. Dans cet exemple, un seul point de terminaison existe, le point "racine", que vous pouvez consulter via l'URL http://127.0.0.1:8000/.

FastAPI utilise des décorateurs pour les méthodes HTTP afin d'indiquer à l'application comment et si elle doit répondre. Dans ce cas, le décorateur @app.get("/") correspond à la méthode HTTP GET et définit le chemin /. La fonction root, décorée de ce décorateur, est responsable de répondre aux requêtes. Elle accepte tous les arguments (bien que dans cet exemple, il n'y en ait pas) et la valeur retournée, typiquement un dictionnaire Python, sera automatiquement convertie en réponse JSON par le serveur ASGI avant d'être renvoyée sous forme de réponse HTTP.

Une fois ce code écrit, vous devez lancer le serveur Uvicorn via la ligne de commande pour tester votre application :

lua
Copy code
uvicorn chapter4_01:app --reload

Lorsque vous testez votre premier point de terminaison avec un client comme HTTPie, vous obtenez une réponse de statut 200 OK, accompagnée d'un objet JSON contenant le message "Hello FastAPI" :

makefile
Copy code
HTTP/1.1 200 OK
content-length: 27
content-type: application/json
date: Fri, 01 Apr 2022 17:35:48 GMT
server: uvicorn
{ "message": "Hello FastAPI" }

Ce type d'exemple "Hello World" est commun dans tous les guides d'API REST. Cependant, avec FastAPI, cela a un intérêt particulier : en quelques lignes de code, vous pouvez explorer la structure de base d'un point de terminaison. Ce premier exemple se concentre uniquement sur la méthode GET à l'URL racine (/). Si vous essayez de tester l'application avec une méthode POST, vous obtiendrez une erreur 405 "Method Not Allowed".

Pour créer un point de terminaison répondant aux requêtes POST, il suffit de modifier le décorateur, comme suit :

python
Copy code
@app.post("/")

async def post_root():
    return {"message": "Post request success!"}

Si vous testez désormais ce point de terminaison avec HTTPie via une requête POST, la réponse sera différente :

makefile
Copy code
HTTP/1.1 200 OK
content-length: 35
content-type: application/json
date: Sat, 26 Mar 2022 12:49:25 GMT
server: uvicorn
{ "message": "Post request success!" }

De plus, FastAPI est capable de gérer des flux d'authentification simples, comme le flux de jetons Bearer, que vous aborderez dans les chapitres suivants sur l'authentification et l'autorisation.

En résumé, ce code minimal vous permet d'explorer la syntaxe et la structure de base d'une API FastAPI avec un seul point de terminaison. Mais il y a bien plus à découvrir. À mesure que vous ajoutez des fonctionnalités supplémentaires à votre API, comme la gestion des paramètres de chemin et des requêtes, vous pouvez commencer à développer des API plus complexes tout en profitant des outils puissants que FastAPI met à votre disposition.

Lors de la création d'API REST, il est essentiel de comprendre non seulement la définition des points de terminaison, mais aussi la manière dont les méthodes HTTP, les paramètres de chemin et les en-têtes HTTP interagissent entre eux. La gestion des erreurs et la validation des données, par exemple, jouent un rôle crucial dans le développement d'APIs robustes. De plus, comprendre l'architecture de FastAPI permet d'exploiter pleinement sa capacité à fournir une documentation vivante et à simplifier l'interaction avec les utilisateurs de l'API. Une bonne maîtrise de ces concepts garantit une meilleure gestion des flux d'information et des erreurs, facilitant ainsi le développement d'APIs performantes et maintenables.

Comment mettre en place un système d'authentification avec JWT dans une application React ?

L'authentification et l'autorisation des utilisateurs dans les applications web modernes sont des aspects cruciaux de la sécurité. La mise en œuvre d'un système efficace nécessite souvent une bonne compréhension des mécanismes sous-jacents, notamment des tokens JWT (JSON Web Tokens), ainsi que des choix technologiques appropriés pour le frontend et le backend. Dans ce chapitre, nous explorerons comment intégrer un système d'authentification basé sur JWT dans une application React, tout en examinant les différentes options pour stocker et gérer ces tokens.

Le système d'authentification que nous allons mettre en place est basé sur FastAPI, un framework Python moderne et performant. Ce backend gère la création de JWTs, leur vérification, et protège certaines routes, telles que celles qui permettent de s'enregistrer ou de se connecter. Le frontend, en l'occurrence une application React, interagira avec ce backend pour authentifier les utilisateurs, stocker les tokens, et contrôler l'accès aux ressources.

La solution la plus simple consiste à stocker le token dans la mémoire du navigateur, mais cela présente des risques importants en termes de sécurité, car le token peut être facilement accessible via JavaScript. C'est pourquoi il est plus courant d'utiliser des cookies HTTP-only, qui ne peuvent pas être lus par JavaScript. Cette approche offre une sécurité renforcée, mais elle nécessite que le frontend et le backend partagent le même domaine, ce qui peut rendre la mise en place de solutions plus complexes.

Une autre méthode consiste à utiliser le stockage local (localStorage), une fonctionnalité HTML5 permettant de stocker des paires clé-valeur dans le navigateur sans date d'expiration. Cette méthode est simple et offre une bonne expérience utilisateur, car les données sont conservées même après la fermeture du navigateur. Cependant, elle n'est pas idéale en termes de sécurité, car les tokens peuvent être facilement accédés par un script malveillant. Bien que cette méthode soit populaire, de nombreux experts recommandent d'éviter de stocker des informations sensibles dans le stockage local.

Les solutions basées sur les refresh tokens peuvent aussi être envisagées. Ce mécanisme permet de générer un token initial à l'authentification, puis de renouveler automatiquement ce token grâce à un autre, offrant ainsi un équilibre entre expérience utilisateur et sécurité. Ce modèle réduit les risques liés à l'expiration des tokens et améliore la gestion de la session utilisateur.

Dans le contexte de React, l'implémentation de l'authentification repose souvent sur l'utilisation du Context API. Ce mécanisme permet de partager un état entre les composants sans avoir à passer les données de manière explicite à travers les props. C'est une approche plus propre et plus flexible que le "prop drilling", où les données doivent être transmises manuellement à chaque composant intermédiaire, rendant le code moins maintenable et plus complexe à refactoriser.

Le Context API permet donc de centraliser la gestion de l'état d'authentification, ce qui simplifie grandement la gestion des tokens JWT et des informations relatives à l'utilisateur. Par exemple, en créant un AuthContext, vous pouvez rendre accessibles le token JWT, les informations de l'utilisateur, ainsi que des fonctions pour se connecter et se déconnecter, à l'ensemble des composants de votre application React. Le code suivant illustre cette approche :

jsx
Copy code
import { createContext, useState } from 'react';

const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [jwt, setJwt] = useState(null);
  const [message, setMessage] = useState(null);
  return (

    <AuthContext.Provider value={{ user, setUser, jwt, setJwt, message, setMessage }}>

      {children}
    </AuthContext.Provider>
  );
};

Dans cet exemple, nous avons créé un contexte d'authentification (AuthContext) et fourni des variables d'état pour l'utilisateur, le token JWT, et des messages d'erreur éventuels. Le AuthProvider enveloppe l'ensemble de l'application, permettant à chaque composant d'accéder facilement aux informations liées à l'authentification.

L'une des premières étapes dans la création d'une SPA (Single Page Application) utilisant cette méthode consiste à installer un projet React avec un outil comme Vite et à configurer Tailwind CSS pour faciliter le design. Une fois le projet configuré, vous pourrez créer les composants nécessaires à l'enregistrement et à la connexion des utilisateurs, tout en utilisant les routes du backend FastAPI pour gérer les requêtes API.

Il est aussi essentiel de prendre en compte l'importance de bien gérer la durée de vie du token. Le token JWT peut expirer après un certain temps, et il est donc nécessaire de mettre en place une stratégie de renouvellement de ce token. Cela peut être accompli en utilisant des refresh tokens, qui permettent de générer un nouveau token à chaque fois que le précédent expire, sans nécessiter une nouvelle authentification.

Enfin, un aspect souvent négligé est la gestion des erreurs liées à l'authentification. Lorsque l'utilisateur envoie un token invalide ou expiré, le serveur renverra une réponse d'erreur, par exemple avec un code HTTP 401 (Non autorisé). Il est important d'implémenter une gestion adéquate des erreurs côté frontend, afin d'informer l'utilisateur de manière claire et de lui offrir la possibilité de se reconnecter ou de résoudre le problème d'une manière simple et intuitive.

Comment créer un formulaire réutilisable avec React pour l'ajout de voitures

Dans le développement d'applications web modernes, l'optimisation du code et la réutilisation des composants sont des principes fondamentaux pour assurer la maintenabilité et l'efficacité. L'un des aspects les plus importants dans ce processus est la gestion des formulaires. Bien que cela semble simple, la création d'un formulaire complexe, comme celui permettant d'ajouter des voitures à une base de données, peut devenir rapidement répétitive et sujette aux erreurs. Cet article explore comment créer un formulaire dynamique et réutilisable en React, facilitant l'ajout et la gestion des informations relatives à une voiture.

Pour commencer, il faut d'abord définir les champs de données nécessaires pour le formulaire. Les informations que l'on doit collecter incluent :

• Marque (type chaîne de caractères),

• Modèle (type chaîne de caractères),

• Année (type nombre entier),

• Prix (type nombre entier),

• Kilométrage (type nombre entier),

• Cylindrée (type nombre entier),

• Image (type fichier).

Évidemment, ces champs peuvent varier en fonction des besoins spécifiques, mais ce sont les champs de base dans ce cas précis.

Une bonne pratique consiste à éviter la duplication de code en créant des composants réutilisables pour les champs de formulaire. Par exemple, plutôt que de répéter la même structure HTML et la logique de validation pour chaque champ, il est possible de créer un composant générique, comme InputField, qui sera utilisé pour chaque champ de formulaire. Ce composant recevra des propriétés comme le nom, le type de donnée (texte, nombre, fichier) et l'erreur associée, le tout en étant géré par la bibliothèque React Hook Form (RHF).

Dans le fichier InputField.jsx, le composant peut être défini ainsi :

javascript
Copy code
const InputField = ({ props }) => {

   const { name, type, error } = props;
   return (
      <div>
         <label htmlFor={name}>{name}</label>
         <input id={name} type={type} {...register(name)} />
         {error && <p>{error.message}</p>}
      </div>
   );
};
export default InputField;

Ce composant est simple mais puissant, car il permet de gérer les erreurs et l'affichage de chaque champ de manière centralisée, tout en étant facilement réutilisable.

Ensuite, dans le composant principal du formulaire, CarForm, l'objectif est de faciliter la gestion des données et de leur validation. Pour ce faire, on peut utiliser Zod, une bibliothèque de validation de données. Zod permet de définir un schéma de validation qui sera ensuite appliqué à chaque champ du formulaire. Cela garantit que les données envoyées à l'API respectent un format bien défini.

Le schéma Zod pour ce formulaire pourrait ressembler à ceci :

javascript
Copy code
const schema = z.object({

   brand: z.string().min(2, "La marque doit comporter au moins 2 caractères").max(20, "La marque ne peut dépasser 20 caractères"),
   make: z.string().min(1, "Le modèle doit comporter au moins 1 caractère").max(20, "Le modèle ne peut dépasser 20 caractères"),
   year: z.coerce.number().gte(1950).lte(2025),
   price: z.coerce.number().gte(100).lte(1000000),
   km: z.coerce.number().gte(0).lte(500000),
   cm3: z.coerce.number().gt(0).lte(5000),
   picture: z.any()
      .refine(file => file[0] && file[0].type.startsWith('image/'), { message: "Le fichier doit être une image" })

      .refine(file => file[0] && file[0].size <= 1024 * 1024, { message: "La taille du fichier doit être inférieure à 1 Mo" })

});

Une fois ce schéma de validation défini, il est important d'utiliser React Hook Form pour gérer le formulaire et la soumission des données. La fonction useForm permet d'initialiser et de valider le formulaire, tandis que la fonction handleSubmit gère la soumission des données.

Voici un exemple de la structure du formulaire dans le composant CarForm :

javascript
Copy code
const CarForm = () => {

   const navigate = useNavigate();
   const { jwt } = useAuth();
   const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm({
      resolver: zodResolver(schema),
   });
   const formArray = [
      { name: "brand", type: "text", error: errors.brand },

      { name: "make", type: "text", error: errors.make },

      { name: "year", type: "number", error: errors.year },

      { name: "price", type: "number", error: errors.price },

      { name: "km", type: "number", error: errors.km },

      { name: "cm3", type: "number", error: errors.cm3 },

      { name: "picture", type: "file", error: errors.picture }
   ];

   const onSubmit = async (data) => {

      const formData = new FormData();
      formArray.forEach((field) => {
         if (field.name === "picture") {
            formData.append(field.name, data[field.name][0]);
         } else {
            formData.append(field.name, data[field.name]);
         }
      });

      const result = await fetch(`${import.meta.env.VITE_API_URL}/cars/`, {

         method: "POST",
         body: formData,
         headers: { Authorization: `Bearer ${jwt}` },
      });
      const json = await result.json();
      if (result.ok) {
         navigate("/cars");
      } else if (json.detail) {
         setMessage(JSON.stringify(json));
         navigate("/");
      }
   };
   return (
      <form onSubmit={handleSubmit(onSubmit)}>
         <h2>Ajouter une voiture</h2>
         {formArray.map((item, index) => (

            <InputField key={index} props={item} />

         ))}
         <button type="submit" disabled={isSubmitting}>
            {isSubmitting ? "Enregistrement..." : "Enregistrer la nouvelle voiture"}
         </button>
      </form>
   );
};
export default CarForm;

Il est également essentiel de comprendre l'importance de la gestion des erreurs. Chaque champ est validé individuellement et les messages d'erreur sont affichés au besoin. Cette approche permet de guider l'utilisateur tout au long du processus et de prévenir les erreurs de soumission.

Comment créer une application sécurisée avec Next.js et gérer l'authentification avec les Server Actions

Dans le développement d’applications modernes, Next.js s’impose comme un cadre privilégié grâce à ses capacités avancées et sa flexibilité, particulièrement pour la gestion des pages dynamiques et statiques. Un aspect essentiel de toute application web moderne est la gestion de l'authentification des utilisateurs, qui doit être à la fois sûre et fluide. Cet article vous guidera à travers l'utilisation des Server Actions dans Next.js pour gérer l'authentification et la sécurisation des données.

Création d'un composant dynamique avec Next.js

L'un des principes fondamentaux de Next.js est la génération de pages statiques lors de la phase de construction. Pour créer une page dynamique, telle qu'une page de détails pour un véhicule, il faut commencer par configurer correctement la récupération des données. Prenons par exemple un composant qui affiche les informations d'une voiture :

jsx
Copy code
return (

  <div>
    <h1>{data.brand} {data.make} ({data.year})</h1>
    <p>{data.description}</p>
    {data.pros && 
      <div>
        <h3>Pros</h3>
        {data.pros.map((pro, index) => (
          <p key={index}>{pro}</p>
        ))}
      </div>
    }
    {data.cons && 
      <div>
        <h3>Cons</h3>
        {data.cons.map((con, index) => (

          <p key={index}>{con}</p>

        ))}
      </div>
    }
  </div>
);

Ce composant retourne un simple JSX qui affiche les informations essentielles d'une voiture, y compris ses avantages et inconvénients. Ce type de rendu est crucial pour maintenir une expérience utilisateur fluide et dynamique. Cependant, pour que cette page fonctionne de manière optimale, Next.js utilise des techniques de génération statique pour améliorer la performance.

Gestion des erreurs 404 avec une page personnalisée

Lorsqu’un utilisateur essaie d’accéder à une page inexistante, il est primordial de lui offrir une page d'erreur personnalisée plutôt qu'une erreur générique. Pour ce faire, on crée une page not-found.js dans le répertoire approprié :

jsx
Copy code
import Link from "next/link";

const NotFoundPage = () => {
  return (
    <div>
      <h1>Page Not Found</h1>
      <p>Retournez à notre catalogue de voitures</p>
      <Link href="/">Retour à l'accueil</Link>
    </div>
  );
};
export default NotFoundPage;

Cette page personnalisée permet d'offrir une expérience utilisateur plus agréable et moins frustrante lorsqu'un lien incorrect est utilisé.

Introduction aux Server Actions et leur importance

L'un des avantages majeurs de cette approche est la réduction de l'utilisation de JavaScript côté client, ce qui améliore les performances de l'application et la rend plus sécurisée. Le fait que ces actions s'exécutent exclusivement sur le serveur permet également de simplifier la gestion des sessions et d’offrir une sécurité accrue, notamment grâce à l’utilisation de cookies sécurisés pour gérer l’état de l'utilisateur.

Mise en place de l'authentification avec Iron Session

Pour implémenter l'authentification, Next.js utilise un outil appelé Iron Session, une bibliothèque simple mais puissante qui facilite la gestion des sessions basées sur des cookies sécurisés. Voici les étapes pour configurer l'authentification dans votre application Next.js :

1. Installation de Iron Session :

   Pour commencer, il faut installer la bibliothèque Iron Session avec la commande suivante :

   bash
   Copy code
   npm i iron-session
   
   

2. Configuration des options de session :

   Créez un fichier lib.js dans lequel vous définissez les options de session :

   javascript
   Copy code
   export const sessionOptions = {
     password: "complex_password_at_least_32_characters_long",
     cookieName: "farmcars_session",
     cookieOptions: {
       httpOnly: true,
       secure: false, // À mettre à true en production
       maxAge: 60 * 60, // 1 heure
     }
   };
   

   Ces options sont utilisées pour la gestion de la session, en particulier pour la sécurisation des cookies.

3. Gestion de la connexion de l'utilisateur :

   Ensuite, vous créez des actions côté serveur pour gérer la connexion de l'utilisateur. Voici un exemple de code pour l’action de connexion :

   javascript
   Copy code
   export const login = async (status, formData) => {
   
     const username = formData.get("username");
     const password = formData.get("password");
     const result = await fetch(`${process.env.API_URL}/users/login`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({ username, password })
     });
     const data = await result.json();
     const session = await getSession();
     if (result.ok) {
       session.username = data.username;
       session.jwt = data.token;
       await session.save();
       redirect("/private");
     } else {
       session.destroy();
       return { error: data.detail };
     }
   };
   

   Ce code gère la soumission du formulaire de connexion, l’appel à l’API pour vérifier les informations d'identification, et la gestion de la session de l'utilisateur si la connexion est réussie.

Sécurisation de l'application

Conclusion

Next.js offre une puissante combinaison de fonctionnalités qui simplifient la gestion des pages dynamiques et la sécurité des applications. Les Server Actions et la gestion des sessions via Iron Session permettent de créer des applications web performantes, sécurisées et évolutives. En comprenant les principes sous-jacents de ces outils et en appliquant les bonnes pratiques, les développeurs peuvent créer des expériences utilisateurs fluides tout en garantissant la sécurité et la performance des applications.