Création d'un Webhook: Réception et Confirmation JSON

Étape 1 : Configurer le Déclencheur Webhook

Pour commencer, créez un nouveau workflow et, à la place du nœud Start, ajoutez un nœud Webhook.

La configuration de ce nœud est cruciale car elle définit comment votre workflow peut être appelé de l'extérieur.

1. Méthode HTTP (HTTP Method) : Pour recevoir un corps de données structuré comme du JSON, la méthode standard est POST. Contrairement à la méthode GET que nous avons utilisée dans la leçon précédente pour récupérer des données, POST est utilisée pour envoyer des données à un endpoint. Sélectionnez POST.
2. Chemin (Path) : Pour rendre l'URL plus claire, personnalisez le chemin. Saisissez par exemple reception-donnees.
3. Authentification (Authentication) : Pour cet exercice, laissez sur None. En environnement de production, il serait essentiel de sécuriser ce point d'entrée, par exemple avec une Header Auth (clé API).
4. Réponse (Response) : C'est le paramètre le plus important pour cet exercice. Il définit quand et comment le webhook répond à l'appelant.

D'après cette lecture, vous comprenez que pour renvoyer une réponse personnalisée construite au milieu de notre workflow, nous devons sélectionner l'option Using Respond to Webhook Node. Faites cette sélection.

Étape 2 : Tester la Réception des Données

Maintenant que le webhook est configuré pour écouter, nous devons lui envoyer des données de test pour nous assurer qu'il les reçoit correctement.

1. Dans le panneau du nœud Webhook, cliquez sur le bouton Listen for Test Event. n8n est maintenant en attente d'une requête sur l'URL de test.
2. Copiez l'URL de test (Test URL) affichée. Elle devrait se terminer par le chemin que vous avez défini (.../reception-donnees).

Pour envoyer une requête POST avec des données JSON, vous pouvez utiliser un outil comme Postman, Insomnia, ou simplement la ligne de commande curl. Votre expérience de consultant IT vous rendra sans doute familier avec ces outils. Utilisons curl pour sa simplicité.

Ouvrez un terminal et exécutez la commande suivante, en remplaçant <VOTRE_URL_DE_TEST> par l'URL que vous venez de copier :

curl -X POST \
-H "Content-Type: application/json" \
-d '{"nom": "Dupont", "produit_id": "XYZ-123", "quantite": 10}' \
'<VOTRE_URL_DE_TEST>'

Une fois la commande exécutée, retournez sur n8n. Le nœud Webhook devrait afficher les données reçues. Inspectez la sortie (Output) : vous verrez que les données JSON que nous avons envoyées se trouvent dans l'objet body. C'est la preuve que notre endpoint fonctionne !

Étape 3 : Créer la Réponse Formatée

Notre webhook a bien reçu les données, mais pour l'instant, il n'a rien renvoyé à l'appelant (l'exécution de curl a probablement expiré). C'est parce que nous avons configuré le webhook pour attendre un nœud Respond to Webhook.

Ajoutez un nœud Respond to Webhook après le nœud Webhook. C'est ce nœud qui va nous permettre de construire et d'envoyer notre réponse personnalisée.

Comme vous l'avez vu dans la vidéo, nous pouvons renvoyer une réponse JSON. Mais nous pouvons faire mieux qu'une réponse statique : nous pouvons la rendre dynamique en y incluant des données de la requête initiale.

1. Dans le nœud Respond to Webhook, sélectionnez le type de réponse (Respond With) : JSON.
2. Dans le champ Response Body, nous allons construire notre message de confirmation en utilisant des expressions, comme nous l'avons fait pour l'email dans la leçon précédente.

Cliquez sur l'icône "rouages" pour ouvrir l'éditeur d'expressions et collez la structure JSON suivante :

{
  "status": "reçu",
  "message": "Confirmation pour la commande du produit {{ $('Webhook').item.json.body.produit_id }} par {{ $('Webhook').item.json.body.nom }}.",
  "timestamp": "{{ $now.toISO() }}"
}

• $('Webhook').item.json.body.produit_id est une expression qui récupère la valeur du champ produit_id depuis le corps (body) de la requête reçue par le nœud nommé Webhook.
• $now.toISO() est une variable globale qui insère la date et l'heure actuelles au format ISO.

Fermez l'éditeur. Votre réponse personnalisée est prête.

Étape 4 : Assemblage Final et Test de Bout en Bout

Votre workflow est maintenant complet et très simple : Webhook -> Respond to Webhook.

Pour tester l'ensemble :

1. Cliquez sur Test workflow en bas de l'éditeur n8n.
2. Retournez dans votre terminal et exécutez à nouveau la commande curl.

Cette fois-ci, au lieu de rester en attente, curl devrait immédiatement afficher la réponse JSON formatée que vous venez de créer :

{
  "status": "reçu",
  "message": "Confirmation pour la commande du produit XYZ-123 par Dupont.",
  "timestamp": "2024-10-28T10:30:00.123Z"
}

Sur n8n, les deux nœuds devraient passer au vert, confirmant que le workflow s'est exécuté avec succès.

N'oubliez pas d'activer votre workflow avec l'interrupteur en haut à droite pour le rendre disponible en permanence sur son URL de production.

Solution de l'Exercice

Pour référence ou si vous êtes bloqué, voici le code JSON du workflow complet. Vous pouvez l'importer dans n8n en le copiant-collant (Import from Clipboard).

{
  "name": "Webhook avec Réponse Personnalisée",
  "nodes": [
    {
      "parameters": {
        "httpMethod": "POST",
        "path": "reception-donnees",
        "responseMode": "onReceived",
        "options": {}
      },
      "id": "c62f2d9b-d72b-40fa-8025-a77514ffc8b8",
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "typeVersion": 1,
      "position": [
        450,
        300
      ],
      "webhookId": "2a823521-133a-4f51-a9f8-d45a90d984df"
    },
    {
      "parameters": {
        "responseCode": 200,
        "options": {
          "responseBody": "{\n  \"status\": \"reçu\",\n  \"message\": \"Confirmation pour la commande du produit {{ $('Webhook').item.json.body.produit_id }} par {{ $('Webhook').item.json.body.nom }}.\",\n  \"timestamp\": \"{{ $now.toISO() }}\"\n}"
        }
      },
      "id": "d13be473-b3c7-436d-9788-2947c6b5b5c9",
      "name": "Respond to Webhook",
      "type": "n8n-nodes-base.respondToWebhook",
      "typeVersion": 1,
      "position": [
        670,
        300
      ]
    }
  ],
  "pinData": {},
  "connections": {
    "Webhook": {
      "main": [
        [
          {
            "node": "Respond to Webhook",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  },
  "active": false,
  "settings": {},
  "versionId": "b1b0e35a-9698-46c5-a339-b9d9c12666a7"
}

Conclusion

Félicitations ! Vous avez créé une API simple mais fonctionnelle avec n8n.

Points clés à retenir :

• Le nœud Webhook est un déclencheur réactif qui démarre un workflow lorsqu'il reçoit une requête HTTP.
• La méthode POST est utilisée pour envoyer des données dans le corps (body) de la requête.
• Le mode de réponse Using Respond to Webhook Node est essentiel pour construire des réponses personnalisées et complexes.
• Le nœud Respond to Webhook permet de contrôler précisément le contenu (JSON, texte, HTML...) et le code de statut de la réponse renvoyée.
• Les expressions permettent de créer des réponses dynamiques en réutilisant les données d'entrée.

Dans le prochain module, "Expressions et Manipulation de Données", nous allons explorer en profondeur les expressions pour ne plus nous contenter de les afficher, mais pour transformer, remodeler et calculer de nouvelles données à partir de ce que nous recevons.