Discussion :

[juan.3594]

Bonjour à tous
Je suis débutant et j'aurais besoin de votre aide.
Je dois créer un projet de réseau social équivalent à facebook et je suis en train de créer le profil d'un membre utilisant boostrap 5.En voulant publier un message sur le profil de l'administrateur j'ai dans mon navigateur un souci m'indiquant Erreur lors de la récupération des messages : Error: Token non valide. Voici mon code en javascript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// formulaire pour publier un message sur le profil de l'administrateur
document.addEventListener("DOMContentLoaded", function () {
  const postMessageForm = document.getElementById("postMessageForm");
  const messagesList = document.getElementById("messagesList");
 
  async function isValidToken(token) {
    try {
      const response = await fetch("http://localhost:3000/api/verifyToken", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      });
      if (!response.ok) {
        console.warn("Token non valide", response.status, data);
        return false;
      }
      return true;
    } catch (error) {
      console.warn("Erreur lors de la vérification du token : ", error);
      return false;
    }
  }
 
  if (postMessageForm) {
    postMessageForm.addEventListener("submit", async function (event) {
      event.preventDefault();
      const formData = new FormData(postMessageForm);
      const payload = Object.fromEntries(formData.entries());
 
      if (!payload.message.trim()) {
        alert("Veuillez entrer un message");
        return;
      }
 
      // Message de débogage
      try {
        const token = localStorage.getItem("token");
        console.log("Token récupéré :", token);
 
        if (!token) {
          console.warn("Token non valide");
          alert("Token non valide. Veuillez vous reconnecter.");
          return;
        }
        const isValid = await isValidToken(token);
        if (!isValid) {
          console.warn("Token non valide");
          alert("Token non valide. Veuillez vous reconnecter.");
          return;
        }
 
        const response = await fetch("http://localhost:3000/api/messages", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
          body: JSON.stringify(payload),
        });
        const data = await response.json();
        if (response.ok) {
          alert("Message publié avec succès!");
          postMessageForm.reset();
          loadMessages();
        } else {
          alert("Erreur lors de la publication du message : " + data.message);
        }
      } catch (error) {
        console.error("Erreur lors de la publication du message : ", error);
        alert("Erreur lors de la publication du message. Veuillez réessayer.");
      }
    });
  }
 
  async function loadMessages() {
    try {
      const token = localStorage.getItem("token");
      console.log("Token récupéré pour charger les messages :", token); // Message de débogage
 
      if (!token) {
        console.warn("Token non valide");
        alert("Token non valide. Veuillez vous reconnecter.");
        return;
      }
 
      const isValid = await isValidToken(token);
      if (!isValid) {
        console.warn("Token non valide");
        alert("Token non valide. Veuillez vous reconnecter.");
        return;
      }
 
      const response = await fetch("http://localhost:3000/api/messages", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
      });
 
      if (!response.ok) {
        console.warn("Problème pour obtenir les messages");
        alert(
          "Problème pour obtenir les messages. Veuillez réessayer plus tard."
        );
        return;
      }
 
      const data = await response.json();
      messagesList.innerHTML = "";
      data.forEach((message) => {
        const li = document.createElement("li");
        li.textContent = message.content;
        messagesList.appendChild(li);
      });
    } catch (error) {
      console.error("Erreur lors de la récupération des messages : ", error);
      alert(
        "Erreur lors de la récupération des messages. Veuillez réessayer plus tard."
      );
    }
  }
 
  loadMessages();
});

Je ne sais pas si ça provient du scripts en lui même ou sur nodeJs côté serveur. Côté backend je me suis crée un fichier middleware pour voir si ça proviendrai pas de là. Voici mon code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import jwt from "jsonwebtoken";
 
const authenticateToken = (req, res, next) => {
  const token = req.headers["authorization"]?.split(" ")[1];
 
  if (!token) return res.status(401).json({ error: "Token non fourni" });
 
  try {
    const user = jwt.verify(token, process.env.JWT_SECRET);
    req.user = user;
    next();
  } catch (error) {
    return res.status(403).json({ error: "Token invalide" });
  }
};
 
export default authenticateToken;

Et le serveur en lui même pour node.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Route pour publier un message
app.post("/api/messages", authenticateToken, async (req, res) => {
  try {
    const { content } = req.body;
    const message = new Message({ content, senderId: req.user.id });
    await message.save();
    res.json({ success: true, message: "Message publié avec succès" });
  } catch (err) {
    console.error("Erreur lors de la publication du message :", err);
    res.status(500).json({
      success: false,
      message: "Erreur lors de la publication du message",
    });
  }
});
 
// Route pour récupérer les messages publiés
app.get("/api/messages", authenticateToken, async (req, res) => {
  try {
    const messages = await Message.find().sort({ createdAt: -1 });
    res.json(messages);
  } catch (err) {
    console.error("Erreur lors de la récupération des messages :", err);
    res.status(500).json({
      success: false,
      message: "Erreur lors de la récupération des messages",
    });
  }
});

Je voudrais que ce token puisse être validé mais je n'ai pas trouver de solution. Je ne sais pas si réinstaller un npm par rapport au token car dans package JSON j'ai seulement celle-ci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"dependencies": {
    "bcrypt": "^5.1.1",
    "body-parser": "^1.20.3",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.21.1",
    "express-validator": "^7.2.0",
    "jsonwebtoken": "^9.0.2",
    "mongoose": "^8.8.3",
    "nodemailer": "^6.9.15",
    "socket.io": "^4.8.0"
  },
  "devDependencies": {
    "nodemon": "^3.1.7"
  }

Merci à vous tous pour votre aide

[mathieu]

est ce que l'url de la requête http est correct ?
vous pouvez voir ça avec l'onglet "Réseau" de la console de développement de votre navigateur. par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

[juan.3594]

est ce que l'url de la requête http est correct ?
vous pouvez voir ça avec l'onglet "Réseau" de la console de développement de votre navigateur. par exemple avec Firefox, faites Ctrl + Maj + E
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

Bonjour Mathieu

Merci pour votre réponse,
En fait j'utilise plutôt Edge ou Chrome et je viens de vérifier sur le réseau du navigateur Edge et il me sort ceci

URL de la demande:
http://localhost:3000/scripts.js
Request Method:
GET
Code d’état:
304 Not Modified
Adresse distante:
[::1]:3000
Stratégie de point d’accès:
strict-origin-when-cross-origin

[juan.3594]

Bonjour,

Après des semaines à chercher, j'ai au final supprimé tous les tokens dans le javascript et node.js côté serveur et ça a fonctionné, mais je ne m'explique toujours pas pourquoi avec un truc sécurisé, le navigateur ne fonction-t-il pas avec un token?

Si quelqu'un aurait une explication.

Merci à tous pour votre aide

[mathieu]

je viens de vérifier sur le réseau du navigateur Edge et il me sort ceci

cela est une des requêtes de la page. pour avoir plus d'informations vous devez trouver la requête http qui appelle votre api.

j'ai au final supprimé tous les tokens dans le javascript et node.js côté serveur

et vous utilisez quelle information maintenant pour connaitre quel est l'utilisateur connecté ?

[juan.3594]

cela est une des requêtes de la page. pour avoir plus d'informations vous devez trouver la requête http qui appelle votre api.

et vous utilisez quelle information maintenant pour connaitre quel est l'utilisateur connecté ?

Bonjour Mathieu

Suite à vos réponses, en http j'utilise localhost:3000
et en ce qui concerne l'utilisateur connecté un localStorage en Javascript.

[gabi7756]

Bonjour,
Tant pis si je me trompe mais j'ai un doute en relisant le code,
La vérification de token se fait exclusivement côté serveur, si le token est bon on redirige vers la page sinon error 403.
Pourquoi faire une vérification front ?
Toute la logique de génération / vérification se fait côté serveur donc pas besoin de récupéré le token côté front ?


Sinon côté serveur il doit bien avoir un truc qui flanche ? Un code d'erreur ou quelque chose ?

Merci d'avance pour l'éclaircissement
Cdt

[juan.3594]

Bonjour Gabi,

Suite à votre réponse côté front, j'avais inclus un Authorization: `Bearer ${token}`, puis côté serveur node.js authenticateToken. J'avais essayé de faire cet essai, mais dans le navigateur, il m'a sorti "error 403 unauthorized". En cherchant dans les tutos, j'ai vu que rajouté des tokens peux causer des plantages c'est pour ça que je les ai tout enlevés. Si vous avez d'autres méthodes de sécurité autre que les Token, je suis ouvert à toute suggestions.