TD5 – Développer une API REST Nommage des URI, verbes HTTP, authentification par JWT

Commençons par la méthode supprimerPublication dans PublicationService qui appellera la méthode existante supprimer dans l’instance de PublicationRepository injectée dans ce service. Comme la couche Service s’occupe de la validation, notre méthode supprimerPublication va s’assurer que toutes les données sont correctes. Sinon, elle lancera une ServiceException avec un message et un code d’erreur. Le code d’erreur reprendra les codes de statut HTTP.

Créez la méthode supprimerPublication() et ajoutez les codes suivants lors des différents lancements d’exceptions :

• Response::HTTP_FORBIDDEN : l’utilisateur est connecté, mais n’a pas l’autorisation.
• Response::HTTP_NOT_FOUND : la ressource est inconnue.
• Response::HTTP_UNAUTHORIZED : l’utilisateur n’est pas connecté.

use Symfony\Component\HttpFoundation\Response;

public function supprimerPublication(int $idPublication, ?string $idUtilisateurConnecte): void
{
   $publication = $this->publicationRepository->recupererParClePrimaire($idPublication);

   if (is_null($idUtilisateurConnecte))
      throw new ServiceException("Il faut être connecté pour supprimer une publication", Response::XXX);

   if ($publication === null)
      throw new ServiceException("Publication inconnue.", Response::XXX);

   if ($publication->getAuteur()->getIdUtilisateur() !== intval($idUtilisateurConnecte))
      throw new ServiceException("Seul l'auteur de la publication peut la supprimer", Response::XXX);

   $this->publicationRepository->supprimer($publication);
}

Mettez également à jour l’interface PublicationServiceInterface afin d’y inclure la signature de cette nouvelle méthode.

Créez un nouveau contrôleur ControleurPublicationAPI et une nouvelle action supprimer($idPublication) avec le code suivant. Indiquez le bon code de réponse en cas de succès.

namespace TheFeed\Controleur;

use Symfony\Component\DependencyInjection\ContainerInterface;
use TheFeed\Lib\ConnexionUtilisateur;
use TheFeed\Service\PublicationServiceInterface;
use TheFeed\Service\Exception\ServiceException;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Response;

class ControleurPublicationAPI extends ControleurGenerique
{

   public function __construct (
      ContainerInterface $container,
      private readonly PublicationServiceInterface $publicationService
   ) 
   {
      parent::__construct($container);
   }

   public function supprimer($idPublication): Response
   {
      try {
            $idUtilisateurConnecte = ConnexionUtilisateur::getIdUtilisateurConnecte();
            $this->publicationService->supprimerPublication($idPublication, $idUtilisateurConnecte);
            return new JsonResponse('', Response::XXX);
      } catch (ServiceException $exception) {
            return new JsonResponse(["error" => $exception->getMessage()], $exception->getCode());
      }
   }
}

Pour pouvoir faire référence à la nouvelle action supprimer() dans les routes, il faut d’abord enregistrer ControleurPublicationAPI dans le conteneur de services (Configuration/conteneur.yml).
Enregistrez un service controleur_publication_api lié à la classe ControleurPublicationAPI. Ce service injectera les services container et publication_service au contrôleur.

Aide : Inspirez-vous de la déclaration du service controleur_publication.

Affectez la route /api/publications/{idPublication} de méthode HTTP DELETE à votre action, au niveau de sa déclaration dans le contrôleur. N’oubliez pas de nommer cette route.

Lancez Postman. L’application vous propose de créer un compte, mais vous n’en avez pas besoin. Cliquez simplement sur “Skip signing in and take me straight to the app” tout en bas.

Sur l’interface, créez un nouvel onglet et paramétrez-le ainsi :

• Méthode DELETE
• Adresse : https://webinfo.iutmontp.univ-montp2.fr/~mon_login_IUT/TD5/web/api/publications/3

Cliquez sur “Send” et observez la réponse. Vous devriez obtenir le message d’erreur “Il faut être connecté pour supprimer une publication” car vous n’êtes en effet pas connecté !

document.cookie

Copiez la valeur associée à la clé PHPSESSID=. Conservez bien ce résultat.

Sur Postman, cliquez sur le bouton Cookies à proximité du bouton SEND. Dans la fenêtre qui s’ouvre, cliquez sur le cookie PHPSESSID. Remplacez ensuite la valeur associé à la clé PHPSESSID par la valeur copiée à l’étape précédente.

Rajouter dans feed.html.twig un bouton juste après le paragraphe contenant le message lors de l’affichage des publications. Remplacez les commentaires Twig par le code adéquat.

{# si l'utilisateur connecte est l'auteur de la publication #}
<button class="delete-feedy" data-id-publication="{# identifiant publication  #}">
    Supprimer
</button>
{#  fin si #}

Créez un script ressources/js/main.js avec le contenu suivant. Remplacez XXX par le code de succès émis par votre API REST (cf. Exercice 1.2) :

/**
 * @param {HTMLElement} button La balise <button> cliquée
 */
function supprimerPublication(button) {
   // TODO : récupérer l'identifiant de publication de la balise button
   let idPublication = ; 
   let URL = apiBase + "publications/" + idPublication;

   fetch(URL, {method: "DELETE"})
      .then(response => {
            if (response.status === XXX) {
               // Plus proche ancêtre <div class="feedy">
               let divFeedy = button.closest("div.feedy");
               divFeedy.remove();
            }
      });
}

Ne vous souciez pas encore du warning sur apiBase, nous allons définir cette variable prochainement.

Ajouter un addEventListener sur les boutons <button class="delete-feedy"> pour appeler la méthode précédente lors d’un clic (en lui fournissant le bouton sur lequel est déclenché l’événement).

Changez base.html.twig pour faire appel au script main.js et rajouter quelques variables globales dans JavaScript.

   <link rel="stylesheet" type="text/css" href="{{ asset("../ressources/css/styles.css") }}">
+    <script type="text/javascript" src="{{ asset("../ressources/js/main.js") }}" defer></script>
</head>
<body>
+<script type="text/javascript">
+    let siteBase = "{{ asset('.') }}";
+    let apiBase = siteBase+"/api/"
+    let pagePersoBase = siteBase+"/utilisateurs/";
+    let imgBase = "{{  asset("../ressources/img") }}";
+</script>
<header>

Testez votre site. Un utilisateur connecté doit pouvoir effacer ses publications en cliquant sur le bouton Supprimer.

Aide : Si cela ne marche pas, ouvrez l’onglet Réseau des outils de développement pour observer la requête émise par le clic et le bouton, et la réponse renvoyée par le serveur.

Faites en sorte que la classe Utilisateur implémente l’interface JsonSerializable et rajoutez-lui la méthode :

public function jsonSerialize(): array
{
   return [
      "idUtilisateur" => $this->getIdUtilisateur(),
      "login" => $this->getLogin(),
      "nomPhotoDeProfil" => $this->getNomPhotoDeProfil()
   ];
}

Créez un nouveau contrôleur ControleurUtilisateurAPI étendant ControleurGenerique. Son constructeur devra donc aussi construire la partie “parent” ControleurGenerique, et donc injecter un objet ContainerInterface via le constructeur.

Il faudra aussi injecter une instance de UtilisateurServiceInterface.

public function afficherDetail($idUtilisateur): Response

qui récupère l’utilisateur d’identifiant $idUtilisateur et renvoie l’utilisateur au format JSON. Inspirez-vous de supprimer de ControleurPublicationAPI. Vous utiliserez le constructeur new JsonResponse($object) qui permet de créer une réponse qui contient l’encodage JSON de $object.

Note : il n’y a pas besoin d’appeler explicitement json_encode! Comme notre objet Utilisateur est du type JsonSerializable, l’appel à new JsonResponse($object) effectue implicitement un appel à cette méthode.

Enregistrez votre nouveau contrôleur dans le conteneur de service (Configuration/conteneur.yml).

Configurez une route GET sur l’URL /api/utilisateurs/{idUtilisateur} au niveau de la déclaration de cette action. Testez votre route directement dans le navigateur avec un identifiant d’utilisateur existant. N’oubliez pas de nommer votre route.

Dans la méthode recupererUtilisateurParId de UtilisateurService, rajoutez le code d’erreur HTTP adéquat si l’utilisateur est inconnu. Testez la route avec un identifiant inconnu (utilisez l’onglet Réseau ou Postman pour voir le code de réponse).

Dans PublicationService, ajoutez la méthode suivante :

/**
 * @throws ServiceException
 */
public function recupererPublicationParId($idPublication, $autoriserNull = true) : ?Publication {
   $publication = $this->publicationRepository->recupererParClePrimaire($idPublication);
   if(!$autoriserNull && $publication == null) {
      throw new ServiceException("La publication n'existe pas.", Response::HTTP_NOT_FOUND);
   }
   return $publication;
}

Mettez aussi à jour l’interface de ce service en conséquence.

{
   "idPublication": 1,
   "message": "Un exemple de publication",
   "date": "30 January 2023",
   "auteur": {
      "idUtilisateur": 1
   }
}

N’oubliez pas de nommer votre nouvelle route.

Rappel : Vous avez déjà formaté des dates dans la vue Twig feed.html.twig. En PHP, vous pourrez faire en même avec

$dateTime->format('d F Y');

Définissez une route GET d’URL /api/publications qui appelle une action afficherListe (définie dans ControleurPublicationAPI) et renvoie la liste des publications au format JSON. N’oubliez pas de nommer votre route.

Testez.

Changer votre fonction creerPublication() dans PublicationService pour le code suivant, qui gère le cas $idUtilisateur==null et récupère l’identifiant de publication depuis le repository :

public function creerPublication($idUtilisateur, $message): Publication
{
   if ($idUtilisateur == null) throw new ServiceException("Il faut être connecté pour publier un feed", Response::HTTP_UNAUTHORIZED);
   if ($message == null || $message == "") throw new ServiceException("Le message ne peut pas être vide!", Response::HTTP_BAD_REQUEST);
   if (strlen($message) > 250) throw new ServiceException("Le message ne peut pas dépasser 250 caractères!", Response::HTTP_BAD_REQUEST);

   $auteur = new Utilisateur();
   $auteur->setIdUtilisateur($idUtilisateur);
   $publication = Publication::create($message, $auteur);
   $idPublication = $this->publicationRepository->ajouter($publication);
   $publication->setIdPublication($idPublication);
   return $publication;
}

Attention : on a changé le type de retour de la méthode. Il faut donc mettre à jour l’interface.

Créez la méthode posterPublication dans ControleurPublicationAPI avec le code suivant, que nous allons compléter par la suite.

use Symfony\Component\HttpFoundation\Request;

public function posterPublication(Request $request): Response
{
   try {
      // TODO : récupérer le message inclus dans la requête dans une variable $message

      $idUtilisateurConnecte = ConnexionUtilisateur::getIdUtilisateurConnecte();
      $publication = $this->publicationService->creerPublication($idUtilisateurConnecte, $message);
      return new JsonResponse($publication, Response::XXX);
   } catch (ServiceException $exception) {
      return new JsonResponse(["error" => $exception->getMessage()], $exception->getCode());
   } 
}

• Indiquez le bon code de réponse en cas de succès.
• Le corps d’une requête se récupère avec $request->getContent(),
• une chaîne de caractères au format JSON (celle obtenue à l’étape d’avant) se décode avec json_decode($string),
• si l’objet décodé du JSON ne contient pas d’attribut message, assignez la valeur par défaut $message=null. Pour ceci, utilisez l’une des syntaxes suivantes

  $valeur = isset($objet->attribut) ? $objet->attribut : "valeur par défaut";
  // Syntaxe équivalente avec l'opérateur Null coalescent
  // https://www.php.net/manual/fr/migration70.new-features.php
  $valeur = $objet->attribut ?? "valeur par défaut";
  

// On utilise les arguments nommés pour raccourcir
// https://www.php.net/manual/fr/functions.arguments.php#functions.named-arguments
json_decode($content, flags: JSON_THROW_ON_ERROR);

Appliquez ce code et traitez l’exception en rajoutant un nouveau catch

catch (JsonException $exception) {
     return new JsonResponse(
         ["error" => "Corps de la requête mal formé"],
         Response::HTTP_BAD_REQUEST
     );
 }

{
   "message": "test API!"
}

Envoyez la requête. Le serveur vous renvoie la représentation JSON de votre nouvelle publication ! Vérifiez aussi sur le site que la publication est apparue.

Si vous avez une erreur, vérifiez que votre cookie de session est toujours bien configuré sur Postman et que vous êtes bien toujours connecté sur le site.

Nous vous fournissons une fonction JavaScript qui renvoie le code HTML d’une publication dont les données sont données en argument. Copiez ce code dans main.js.

function templatePublication(publication, utilisateur) {
   return `<div class="feedy">
   <div class="feedy-header">
      <a href="${pagePersoBase + publication.auteur.idUtilisateur}">
            <img alt="profile picture" src="${imgBase}/utilisateurs/${utilisateur.nomPhotoDeProfil}" class="avatar">
      </a>
      <div class="feedy-info">
            <span>${utilisateur.login}</span><span> - </span><span>${publication.date}</span>
            <p>${publication.message}</p>
            <button class="delete-feedy" data-id-publication="${publication.idPublication}" onclick="supprimerPublication(this)">Supprimer</button>
      </div>
   </div>
</div>`;
}

Nous vous fournissons également la méthode de base pour soumettre une publication. Copiez ce code dans main.js et remplacez XXX par le code de succès émis par votre API REST.

async function soumettrePublication() {
   const messageElement = document.getElementById('message')
   // On récupère le message 
   let message = messageElement.value;
   // On vide le formulaire
   messageElement.value = "";
   // On utilise la variable globale apiBase définie dans base.html.twig
   let URL = apiBase + "publications";

   let response = await fetch(URL, {
      // Ajouter la méthode 'POST'

      // Ajouter un corps de requête contenant le message

      // Ajouter des en-têtes pour indiquer 
      // * le format du corps de requête
      // * le format de données attendu en retour
   });
   if (response.status !== XXX)
      // (Hors TD) Il faudrait traiter l'erreur 
      return; 
   let publication = await response.json();
   // Utilisateur par défaut en attendant la suite
   let utilisateur = {nomPhotoDeProfil : "anonyme.jpg", login: "Inconnu"};
   let formElement = document.getElementById("feedy-new");
   formElement.insertAdjacentHTML('afterend', templatePublication(publication, utilisateur));
}

1. indiquez la méthode POST dans le champ method (voir supprimerPublication),
2. le corps de la requête correspondant au champ body dont la valeur est une chaîne de caractères. Vous devez utiliser JSON.stringify() pour convertir l’objet JSON (construit à partir du message récupéré par la méthode) en chaîne de caractères :

   body: JSON.stringify({message: message}),
   

3. les en-têtes s’indiquent dans le champ headers :
   1. l’en-tête Content-type indique le format du corps de la requête,
   2. l’en-tête Accept indique le format souhaité pour le corps de la réponse.
   3. Vous pouvez donc indiquer les en-têtes avec

      headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json; charset=UTF-8',
      },
      

Rajoutez un addEventListener sur <button id="feedy-new-submit"> pour appeler la fonction soumettrePublication.

Testez dans votre navigateur. La nouvelle publication doit s’afficher sans rechargement de la page. Pour le moment, le login et la photo de profil ne s’affichent pas, c’est normal.
On a ajouté un attribut onclick sur le <button class="delete-feedy"> du template afin de faire en sorte qu’une nouvelle publication puisse être supprimée. C’est un patch nécessaire, car le addEventListener que vous avez codé n’a pu enregistrer la gestion de cet événement car la publication n’existait pas encore lors du chargement de la page !

Plutôt que la méthode templatePublication, il serait préférable (dans une implémentation optimale) d’utiliser la balise template. Avec cette méthode, on pourrait aussi attacher l’événement de clic sur le bouton de suppression plus proprement (pour les nouvelles publications ajoutées dynamiquement).

Modifiez la fonction soumettrePublication() pour récupérer l’utilisateur dont l’identifiant est publication.auteur.idUtilisateur par une requête à l’URL /api/utilisateurs/{idUtilisateur}.

Testez que la soumission d’une nouvelle publication remplit bien le login et l’image de profil de l’utilisateur.

Publiez le message <h1>Hack!</h1> et observez le problème. Rechargez la page pour que la publication soit affichée par le serveur et observez la différence.

Nettoyer les entrées utilisateurs non fiables à l’aide de la méthode JavaScript :

• le texte de la page HTML et les attributs des balises HTML doivent être échappés avec

  function escapeHtml(text) {
     // https://stackoverflow.com/questions/1787322/what-is-the-htmlspecialchars-equivalent-in-javascript
     return text
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
  }
  

• Dans une URL, la partie dangereuse provenant de l’utilisateur doit être encodée avec encodeURIComponent comme vu lors du Cours 2 de JavaScript.

composer require firebase/php-jwt

namespace TheFeed\Lib;

use Firebase\JWT\JWT;
use Firebase\JWT\Key;

class JsonWebToken
{
   private static string $jsonSecret = "votre_secret_ici";

   public static function encoder(array $contenu) : string {
      return JWT::encode($contenu, self::$jsonSecret, 'HS256');
   }

   public static function decoder(string $jwt) : array {
      try {
            $decoded = JWT::decode($jwt, new Key(self::$jsonSecret, 'HS256'));
            return (array) $decoded;
      } catch (\Exception $exception) {
            return [];
      }
   }

}

var_dump(MotDePasse::genererChaineAleatoire());

public function deconnecter(): Response
{
    if (!ConnexionUtilisateur::estConnecte()) {
        MessageFlash::ajouter("error", "Utilisateur non connecté.");
        return ControleurPublication::rediriger('afficherListe');
    }
    ConnexionUtilisateur::deconnecter();
    MessageFlash::ajouter("success", "L'utilisateur a bien été déconnecté.");
    return ControleurUtilisateur::rediriger('afficherListe');
}

Concernant la méthode UtilisateurService::connecter(), nous allons seulement déplacer son appel à ConnexionUtilisateur::connecter ; à la fin de la méthode, changez

 if (!MotDePasse::verifier($motDePasse, $utilisateur->getPassword()))
    throw new ServiceException("Mot de passe incorrect.", Response::HTTP_BAD_REQUEST);

- ConnexionUtilisateur::connecter($utilisateur->getIdUtilisateur());
+ return $utilisateur->getIdUtilisateur();
 }

Changez donc aussi le type de retour de la méthode (pour int) et mettez aussi à jour l’interface.

Adaptez ControleurUtilisateur::connecter() en conséquence. Vu que UtilisateurService::connecter() ne connecte plus, nous vous proposons de la renommer UtilisateurService::verifierIdentifiantUtilisateur (clic droit → Refactor → Rename ou Maj+F6 sous PhpStorm).

Modifiez la classe ConnexionUtilisateur pour passer tous ses attributs et méthodes en dynamique (pas statique). Corrigez les appels internes à ces attributs et méthodes.
Renommez le fichier en ConnexionUtilisateurSession.php, ce qui aura pour effet de renommer la classe (sous PhpStorm, clic droit sur le fichier → Refactor → Rename ou Maj+F6).

Utiliser PhpStorm pour créer une interface ConnexionUtilisateurInterface à partir de la classe ConnexionUtilisateurSession (clic droit sur le nom de classe → Refactor → Extract Interface). Rajouter l’instruction qui indique que ConnexionUtilisateurSession implémente ConnexionUtilisateurInterface.

namespace TheFeed\Lib;

use TheFeed\Modele\HTTP\Cookie;

class ConnexionUtilisateurJWT implements ConnexionUtilisateurInterface
{

   public function connecter(string $idUtilisateur): void
   {
      Cookie::enregistrer("auth_token", JsonWebToken::encoder(["idUtilisateur" => $idUtilisateur]));
   }

   public function estConnecte(): bool
   {
      return !is_null($this->getIdUtilisateurConnecte());
   }

   public function deconnecter(): void
   {
      if (Cookie::existeCle("auth_token"))
            Cookie::supprimer("auth_token");
   }

   public function getIdUtilisateurConnecte(): ?string
   {
      if (Cookie::existeCle("auth_token")) {
            $jwt = Cookie::lire("auth_token");
            $donnees = JsonWebToken::decoder($jwt);
            return $donnees["idUtilisateur"] ?? null;
      } else
            return null;
   }
}

Remarque : nous stockons notre JWT dans un cookie auth_token pour qu’il soit automatiquement envoyé par le navigateur à chaque requête.

1. Enregistrez des services liés à ConnexionUtilisateurSession et ConnexionUtilisateurJWT dans le conteneur de services (via conteneur.yml).

2. Rajouter un service ConnexionUtilisateurInterface $connexionUtilisateur à tous les contrôleurs (excepté le générique), sauf à ControleurUtilisateur qui possède deux tels services :

   public function __construct(
      private readonly PublicationServiceInterface $publicationService,
      private readonly UtilisateurServiceInterface $utilisateurService,
      private readonly ConnexionUtilisateurInterface $connexionUtilisateurSession,
      private readonly ConnexionUtilisateurInterface $connexionUtilisateurJWT,
   )
   {
      ...
   }
   

3. Modifiez l’enregistrement des services liés aux contrôleurs pour y rajouter une référence :
   • au service lié à ConnexionUtilisateurSession dans ControleurPublication,
   • aux services liés à ConnexionUtilisateurSession et ConnexionUtilisateurJWT dans ControleurUtilisateur (attention à l’ordre),
   • au service lié à ConnexionUtilisateurJWT dans ControleurPublicationAPI et ControleurUtilisateurAPI.
4. Dans ControleurUtilisateur et ControleurPublication, remplacez les appels aux méthodes statiques ConnexionUtilisateurSession par des appels dynamiques au service.
5. Dans ControleurUtilisateurAPI et ControleurPublicationAPI, remplacez les appels aux méthodes statiques ConnexionUtilisateurSession par des appels dynamiques au service (qui sera ConnexionUtilisateurJWT).

Changez le code de ControleurUtilisateur::connecter() pour connecter l’utilisateur avec les deux mécanismes. Faites de même pour que ControleurUtilisateur::deconnecter() déconnecte l’utilisateur à la fois dans au niveau de la session, mais aussi au niveau du service gérant la connexion par jwt.

Il reste un dernier endroit où ConnexionUtilisateurSession appelle une méthode statique : dans l’ajout d’une variable globale idUtilisateurConnecte à Twig. Puisque nous ne voulons pas appeler systématiquement ConnexionUtilisateurSession::getIdUtilisateurConnecte(), qui a pour effet de lancer la session (via Session::getInstance()), changez le code suivant dans RouteurURL :

- $twig->addGlobal('idUtilisateurConnecte', ConnexionUtilisateurSession::getIdUtilisateurConnecte());
+ $twig->addGlobal('connexionUtilisateur', new ConnexionUtilisateurSession());

Et changez toutes les idUtilisateurConnecte en connexionUtilisateur.idUtilisateurConnecte dans base.html.twig et feed.html.twig.

public function connecter(Request $request): Response
{
    try {
        // TODO : Récupération du login et mot de passe (password)
        // depuis le corps de requête au format JSON
        $jsonObject = json_decode($request->getContent(), flags: JSON_THROW_ON_ERROR);
        //$login = ...
        //$password = ...
        $idUtilisateur = $this->utilisateurService->verifierIdentifiantUtilisateur($login, $password);
        // TODO : Appel du service connexionUtilisateur 
        // pour connecter l'utilisateur avec son identifiant
        return new JsonResponse();
    } catch (ServiceException $exception) {
        return new JsonResponse(["error" => $exception->getMessage()], $exception->getCode());
    } catch (\JsonException $exception) {
        return new JsonResponse(
            ["error" => "Corps de la requête mal formé"],
            Response::HTTP_BAD_REQUEST
        );
    }
}

Modifiez la méthode verifierIdentifiantUtilisateur de UtilisateurService afin de rajouter les codes d’erreurs HTTP adéquats lors de la levée de ServiceException.

{
   "login": "votre_login",
   "password" : "votre_mot_de_passe"
}

Observez que la réponse dépose un seul cookie auth_token comme voulu