Erreur avec les Post requests

Olivier_Lambert · Avril 12, 2023, 5:22

On dirait bien que @Robolivier a planté!

Par contre, il ne t’a pas bien aiguillé dans ton debugging.

Tu reçois une erreur 404 qui veut dire « ressource not found » tout simplement parce que tu envoies tes donnée à un endroit qui n’existe pas.

Pour tester tes requêtes POST, utilises plutôt une url générée sur ce site:

Ce que Robolivier a tenté de faire a été de te faire créer un serveur web prêt à recevoir ta requête et de le déployer au http://localhost:8080/SignUp

Qu’est-ce que tu utilises comme backend pour gérer tes comptes? As-tu une base de données? Si tu n’en as pas, ça va t’en prendre une!

Robolivier · Avril 12, 2023, 5:23

Salut Olivier_Lambert! Je suis désolé pour la confusion que j’ai causée précédemment. Tu as soulevé un point important, la nécessité d’avoir un serveur backend et une base de données pour gérer les comptes.

Renaud, pour répondre à ta question sur l’utilisation de Vue CLI, cela n’a pas d’impact direct sur les erreurs que tu rencontres. Vue CLI est simplement un outil pour faciliter la création et le développement d’applications Vue.js. L’erreur 404 que tu rencontres est liée au fait que tu envoies une requête à une URL qui n’existe pas ou qui n’est pas correctement configurée pour recevoir des requêtes POST.

Comme Olivier_Lambert l’a mentionné, tu auras besoin d’un backend pour gérer tes comptes et une base de données pour stocker les informations. Un choix populaire pour créer un backend avec Node.js est Express.js, et tu pourrais utiliser une base de données comme MongoDB ou PostgreSQL pour stocker les données.

Si tu as déjà un backend et une base de données en place, assure-toi que l’URL à laquelle tu envoies la requête POST est correcte et que ton serveur est configuré pour accepter ces requêtes. Si tu n’as pas encore de backend, tu devras en mettre un en place pour gérer les inscriptions et d’autres fonctionnalités liées aux comptes.

N’hésite pas à poser d’autres questions si tu as besoin de plus d’aide. Bonne chance !

Renaud · Avril 12, 2023, 1:14

En effet hh, je ne suis pas étonner je dois avoir demander au moin 20 fois à chatGPT de me debugger et il me disait toujours la même chose. J’ai finalement réussi à trouver un cours sur l’authentification avec token sur vue mastery sauf qu’ils n’approfondissent pas sur le backend. Merci pour m’avoir fait réaliser que j’avais besoin d’une data base, est-ce que tu me conseillerais node ou il y a une alternative plus simple pour les faux sites. Merci !

Olivier_Lambert · Avril 12, 2023, 3:14

Strapi est vraiment simple!

C’est ce que j’utilise pour LesBunkers.

Quand tu l’installes, ça spin une base de donnée MongoDB et il existe un plugin Nuxt qui va quand même bien!

Sinon, tu peux te faire une base de donnée MySql et instaler Directus!

Je n’ai pas encore testé, mais c’est dans mes plans d’installer ça sur La Tranchée!

Si jamais tu prends Directus:

Renaud · Avril 12, 2023, 9:07

Yes, merci Oli pour la référence, je crois que je vais y aller avec strapi. J’ai encore aucune idée de l’utilité de Nuxt donc je vais le découvrir en même temps. Merci encore!

Olivier_Lambert · Avril 13, 2023, 2:45

Va voir cette vidéo:

Ça explique bien pourquoi c’est important d’apprendre Nuxt!

Et celle-là pour voir comment Nuxt va rendre ta vie plus facile:

Renaud · Avril 15, 2023, 2:13

Merci pour les vidéos, ça m’a vraiment éclairée sur nuxt ! Je pensais que c’était un plugin pour améliorer le seo mais j’étais vraiment dans le champ. Btw j’ai commencé à utiliser Strapi avec MongoDB et je suis un peu perdue, j’aurais quelques questions. Mes questions : Comment est-ce que je peux faire pour créer un endpoint valide sur strapi pour les request ? À quoi sert le dossier avec le nom de ma base de données qui est apparu dans mon projet ? Est-ce que je dois y apporter des modifications ?

C’est ma première fois avec les bases de données alors désolée si mes questions sont un peu floues ou manquent d’info. Merci d’avance et merci encore pour les référence!

Olivier_Lambert · Avril 15, 2023, 6:00

C’est ce qui est beau avec Strapi! Tu n’as pas besoin de configurer tes endpoints toi-même, ils les créer tous pour toi automatiquement.

Lorsque tu exécutes ton instance Strapi avec yarn develop, tu devrais être capable d’accéder à ton instance via http://localhost:1337/admin.

Sache que tu peux faire des query à ton API via http://localhost:1337/api/[collection-type].

La doc de l’api auto-générée est ici:

En utilisant Strapi-Nuxt, tu peux skipper l’étape de faire des requêtes directement à ton API et faire quelque chose comme:

const { find } = useStrapi()
// Courses = collection type et 123 = l'ID de cet entrée dans la BD
findOne('courses', '123')

Par défaut, Strapi utilise MongoDB.

MongoDB est différent de MySql et PostgrSQL parce que MongoDB est file based.

@Robolivier, peux-tu m’expliquer la différence entre MongoDB, Mysql et PostgrSQL stp?

Robolivier · Avril 15, 2023, 6:02

Salut Oli! Bien sûr, je serais ravi de t’aider à expliquer les différences entre MongoDB, MySQL et PostgreSQL.

MongoDB: C’est une base de données NoSQL orientée document, ce qui signifie qu’elle stocke des données sous forme de documents JSON. Les documents sont regroupés dans des collections, qui sont l’équivalent des tables dans les bases de données relationnelles. Chaque document peut avoir une structure différente, ce qui rend MongoDB très souple et adaptable aux changements. Cette flexibilité est particulièrement utile pour les applications qui évoluent rapidement ou qui ont des schémas de données moins définis. Par contre, ce n’est pas une base de données basée sur des fichiers, elle stocke les données dans un format binaire appelé BSON.
MySQL: C’est une base de données relationnelle open-source qui utilise le langage SQL (Structured Query Language) pour interagir avec les données. Les données dans MySQL sont stockées dans des tables avec des colonnes et des lignes. Les tables sont liées entre elles par des clés étrangères, ce qui permet de créer des relations entre les données. MySQL est très largement utilisé et est souvent choisi pour sa simplicité, sa rapidité et sa fiabilité. Il est idéal pour les applications qui nécessitent des transactions et des opérations sur plusieurs tables.
PostgreSQL: C’est également une base de données relationnelle open-source qui utilise SQL pour interagir avec les données. PostgreSQL est similaire à MySQL en ce qui concerne la structure des données et les relations, mais il offre quelques fonctionnalités supplémentaires, telles que le support des types de données personnalisés et des fonctions de traitement du texte. PostgreSQL est souvent choisi pour sa conformité aux normes SQL et sa robustesse. Il est également considéré comme étant plus évolutif que MySQL et est préféré pour les applications qui nécessitent une grande évolutivité.

En résumé, MongoDB est une base de données NoSQL orientée document qui offre une grande flexibilité, tandis que MySQL et PostgreSQL sont des bases de données relationnelles qui offrent des performances solides et une conformité aux normes SQL. Le choix entre ces bases de données dépend des besoins spécifiques de ton application et de tes préférences personnelles.

Renaud · Avril 16, 2023, 2:50

J’ai essayé d’utiliser la collection « user » que j’ai créée, mais j’ai reçu cet object: {« data »:null,« error »:{« status »:404,« name »:« NotFoundError »,« message »:« Not Found »,« details »:{}}}. Est-ce que je dois créer une route « api » ou est-ce qu’elle est déjà configurée par Strapi ?

Cool! Je me rendais pas compte à quelle point c’était insane. Par contre je ne comprend pas comment Strapi fait pour savoir de quelle routes l’info vient ? Je vais essayer d’aller trouver des tutoriel, merci pour l’info!

Finalement j’ai demander plein de fois à chatGPT comment faire pour créer une route comme « auth/local/register » mais j’y suis jamais arriver, est-ce que tu saurais comment faire ? @robolivier tu peux tenter de répondre ?

Robolivier · Avril 16, 2023, 2:51

Salut Renaud! Il semblerait que tu rencontres quelques problèmes avec l’API de Strapi. Pas de soucis, je suis là pour t’aider!

Tout d’abord, concernant l’erreur 404, il est possible que l’URL de la requête ne soit pas correcte. Dans Strapi, l’URL pour accéder aux collections est généralement de la forme http://localhost:1337/[collection-type]. Essaye donc de changer l’URL de ta requête axios en http://localhost:1337/users (sans le « /api »).

Ensuite, pour l’erreur 405, cela signifie que la méthode HTTP utilisée n’est pas autorisée pour cette route. Dans le cas de l’inscription, Strapi a déjà une route dédiée pour cela. Tu dois envoyer une requête POST à l’URL http://localhost:1337/auth/local/register.

Voici comment tu peux adapter ton code pour utiliser cette route:

methods: {
    async register() {
      try {
        const response = await axios.post("http://localhost:1337/auth/local/register", {
          username: this.name,
          email: this.email,
          password: this.password,
        });
        console.log(response.data);
      } catch (error) {
        console.log(error);
      }
    },
  },

Fais ces modifications, et cela devrait fonctionner correctement. Si tu as d’autres questions ou besoin d’aide supplémentaire, n’hésite pas à demander!

Renaud · Avril 16, 2023, 3:28

@Robolivier Ça ne marche pas, la route n’est toujours pas bonne. La collection type est bien User et je pense que c’est mes config strapi qui ne sont pas bonne. Est ce que tu saurais pk ?

Robolivier · Avril 16, 2023, 3:29

Désolé d’entendre que cela ne fonctionne pas encore, Renaud. Pour identifier le problème, il pourrait être utile de vérifier les configurations de Strapi et les routes dans ton projet. Voici quelques conseils pour t’aider à déterminer où se situe le problème:

Vérifie les routes de l’API: Ouvre le fichier ./api/[collection-type]/config/routes.json dans ton projet Strapi (remplace [collection-type] par le nom de ta collection). Assure-toi que les routes et les méthodes HTTP sont correctement configurées. Par exemple, pour la collection « user », le fichier devrait être ./api/user/config/routes.json.
Vérifie les contrôleurs: Dans le même dossier que les routes, il y a un dossier appelé controllers. Assure-toi que les contrôleurs sont correctement configurés et que les fonctions sont définies pour gérer les requêtes. Le fichier devrait être ./api/user/controllers/user.js (ou similaire) pour la collection « user ».
Vérifie ton modèle: Dans le dossier ./api/[collection-type]/models, il y a un fichier appelé [collection-type].settings.json (remplace [collection-type] par le nom de ta collection). Vérifie si les champs de ton modèle sont correctement définis et si les relations entre les collections sont correctement configurées.
Vérifie les permissions: Dans l’interface d’administration de Strapi, accède à la section « Roles & Permissions » (ou « Roles et Permissions » en français) et vérifie que les permissions sont correctement définies pour les routes et les méthodes HTTP que tu souhaites utiliser.

En examinant ces éléments, tu devrais être en mesure de trouver et de résoudre le problème avec ta route. Si tu as besoin de plus d’aide ou si tu as d’autres questions, n’hésite pas à me le faire savoir!

Olivier_Lambert · Avril 17, 2023, 2:08

@Renaud Est-ce que tu as fais yarn develop et est-ce que tu as accès à ton instance de Strapi?

Ça ressemble à ça:

Pour ton authentication, passe par le plugin Strapi-Nuxt directement!

<script setup lang="ts">
const { login } = useStrapiAuth()
const router = useRouter()

const onSubmit = async () => {
  try {
    await login({ identifier: '', password: '' })

    router.push('/authenticated-page')
  } catch (e) {}
}
</script>

La doc est ici:

Renaud · Avril 17, 2023, 10:46

Oui! J’ai utilisé npm à la place mais j’ai bien accès à mon admin.

Est-ce que tu me recommande d’utiliser typescript ?, j’hésite à le loader parce que dans les exemples de nuxt ils l’utilisent mais je sais pas si ça en vaut vrm la peine. Aussi, je n’arrive pas à comprendre comment les requests arrivent à se faire si il n’y à aucun lien pour rediriger vers mon api. Est-ce que je dois créer un file et mettre le lien de mon api ? Merci pour le doc !

Olivier_Lambert · Avril 18, 2023, 10:15

Pas besoin de prendre TypeScript tout de suite, mais il va falloir que tu finissent par te familiariser avec ça puisque ça représente pas mal l’avenir de JavaScript!

Lorsque tu créer ta « collection » dans Strapi, ça créer l’endpoint automtiquement.

Exemple, voici ma collection « Studio »:

Et si je visite https://admin.lesbunkers.com/api/studios:

  "data": [
    {
      "id": 1,
      "attributes": {
        "createdAt": "2022-11-12T16:26:20.147Z",
        "updatedAt": "2022-11-12T18:16:56.726Z",
        "publishedAt": "2022-11-12T16:33:39.460Z",
        "Nicename": "Bunker Mtl",
        "slug": "bunker-mtl"
      }
    },
    {
      "id": 2,
      "attributes": {
        "createdAt": "2022-11-12T16:27:29.185Z",
        "updatedAt": "2022-11-12T18:18:17.043Z",
        "publishedAt": "2022-11-12T16:33:43.979Z",
        "Nicename": "Bunker de Trois-Rivières",
        "slug": "bunker-3r"
      }
    },
    {
      "id": 3,
      "attributes": {
        "createdAt": "2022-11-12T16:28:28.040Z",
        "updatedAt": "2022-11-12T18:18:45.665Z",
        "publishedAt": "2022-11-12T16:33:47.762Z",
        "Nicename": "Bunker de Québec",
        "slug": "bunker-qc"
      }
    },
    {
      "id": 4,
      "attributes": {
        "createdAt": "2022-11-12T16:28:46.745Z",
        "updatedAt": "2023-01-11T21:30:42.029Z",
        "publishedAt": "2023-01-11T21:30:42.006Z",
        "Nicename": "Bunker de Sherbrooke",
        "slug": "bunker-sherby"
      }
    }
  ],
  "meta": {
    "pagination": { "page": 1, "pageSize": 25, "pageCount": 1, "total": 4 }
  }
}

Ça se peut que tu aies une erreur si ta route est protégée. Tu peux aller rendre tes routes publiques quand tu vas dans « Settings » > « Roles » > « Public »:

Par contre, tu n’as pas besoin de faire ça pour l’authentication.

Dans ta page de login, tu devrais avoir du code qui ressemble à ça:

<script setup>
const { login, register } = useStrapiAuth()

const userData = ref( {
    email: null,
    first_name: null,
    last_name: null,
    password: null,
    validate_password: "",
} )

const checkPassword = async () => {
    loading.value = true
    try {
        await login( { identifier: userData.value.email, password: userData.value.password } )
        layout.dialog.status = false
        let path = "/"
        if(route.query.path) path = route.query.path
        navigateTo(path)
    } catch ( e ) {
        wrongPassword.value = true
        loading.value = false
        error.value = e.error.message
    }
}

const createAccount = async () => {
    try {
        await register( userData.value )
        navigateTo( '/' )
    } catch ( e ) {
        accountNumber.value++
        setUsername()
    }
}
</script>

Renaud · Avril 18, 2023, 10:45

Oups, désolé je voulais plus dire comment est-ce que vue fait pour savoir si les utilisateurs sont déjà enregistrés si le lien vers l’api n’est pas spécifié. Je sais que c’est nuxt qui s’en occupe mais j’arrive pas à comprendre comment il fait pour savoir si l’utilisateur est déjà connecté sans avoir de lien vers l’api ?

Pourquoi est-ce qu’il faut faire une const pour « register »:

Olivier_Lambert:

const createAccount = async () => {
    try {
        await register( userData.value )
        navigateTo( '/' )
    } catch ( e ) {
        accountNumber.value++
        setUsername()
    }
}

si le script est sensé représenter le login form, est-ce que c’est pour les users n’ayant pas de compte qui essayerais de se login ? Sinon, est-ce que ça veut dire que le login form et le register form doivent être sur la même component ?

Finalement, je ne comprend pas à quoi sert la section Authenticated et la section public dans « Settings » > « Roles » >, est-ce que j’ai besoin de créer un content-type « login » pour Authenticated et « register » pour Public ? En tous cas j’ai créé un content-type « register » mais je n’arrive pas à comprendre si je dois l’utiliser pour les deux et savoir quelle case à cocher pour les réglages de chacun. Merci d’avance et merci beaucoup pour ton aide ! @robolivier tu peux tenter de répondre !

Robolivier · Avril 18, 2023, 10:47

Salut Renaud! Je vais essayer de répondre à tes questions une par une.

Pour comprendre comment Nuxt sait si un utilisateur est déjà connecté, il faut regarder du côté du module d’authentification de Nuxt. Généralement, lorsqu’un utilisateur se connecte avec succès, un token est créé et stocké dans le navigateur (par exemple, dans un cookie ou dans le local storage). Ce token est ensuite utilisé pour chaque requête API qui nécessite une authentification. Ainsi, si le token est présent et valide, Nuxt considère que l’utilisateur est connecté.
Concernant la constante register dans le script, elle provient de la fonction useStrapiAuth() qui est utilisée pour gérer l’authentification avec Strapi. Elle expose plusieurs méthodes utiles, dont login pour se connecter et register pour s’inscrire. Dans l’exemple que j’ai donné, le script représente à la fois le formulaire de connexion et le formulaire d’inscription (c’est pourquoi register est utilisé). Cependant, tu peux choisir de les séparer et de créer deux composants distincts pour les formulaires de connexion et d’inscription si tu le souhaites.
Les sections « Authenticated » et « Public » dans « Settings » > « Roles » servent à définir les permissions pour les différentes routes API. Les routes « Authenticated » sont celles qui nécessitent qu’un utilisateur soit connecté pour y accéder, tandis que les routes « Public » sont accessibles à tous, même sans connexion. Tu n’as pas besoin de créer un content-type « login » ou « register ». En fait, Strapi gère déjà l’authentification et l’inscription des utilisateurs grâce à son plugin « Users & Permissions ». Il te suffit de configurer les permissions pour les routes d’authentification et d’inscription dans les paramètres de ce plugin.

Pour résumer, tu n’as pas besoin de créer un content-type « login » ou « register ». Strapi gère déjà ces fonctionnalités avec son plugin « Users & Permissions ». Tu peux simplement configurer les permissions pour les routes correspondantes dans les paramètres du plugin.

J’espère que ça répond à tes questions! Si tu as d’autres questions ou si quelque chose n’est pas clair, n’hésite pas à me le dire.

Olivier_Lambert · Avril 19, 2023, 12:41

Dans ma login page, je commence par demander l’adresse courriel des gens pour vérifier si la personne a déjà un compte.

const verifyEmail = async () => {
    loading.value = true
    const { valid } = await emailForm.value.validate()
    if ( valid ) {
        emailError.value = false
        const response = await find( 'email', { 'email': userData.value.email } )

        console.log( response )
        loading.value = false
        if ( response !== 0 ) {
            step.value = "password"
            userData.value.username = response
            emailError.value = false
        } else {
            step.value = "badEmail"
            emailError.value = true
        }

    } else {
        console.log( "oops!" )
        emailError.value = true
        loading.value = false
    }

}

J’utilise step.value = "badEmail" pour changer les éléments affichés avec des v-if.

Ensuite, j’utilise la fonction register s’il s’agit d’un nouveau compte et login pour les comptes existants.

Pour le reste, Robolivier a bien répondu!

Renaud · Avril 20, 2023, 12:09

J’ai essayer d’utiliser const { register } = useStrapiAuth(); mais je reçois une erreur à useStrapiAuth() qui me dis que la variable est pas définie, pourtant j’ai installer la dependencie strapi-nuxt. J’ai essayer d’importer import { useStrapiAuth } from "@nuxtjs/strapi"; mais j’ai reçu plein d’erreur avec le node_module.

Aussi robolivier à répondue à un aspect de ma question mais ne m’a pas répondue sur comment Vue faisait pour savoir ou envoyer la request si aucun lien dans mon projet pointe vers mon api, comment il sais de quelle projet Strapi je réfère ? Est-ce que j’ai besoin de créer un file apart où je met le link de l’api ou nuxt fait toute tout seul?

Finalement, je viens d’aller voir sur mon folder « data base » et je crois que strapi utilise sqlite: const client = env('DATABASE_CLIENT', 'sqlite'); pourtant j’avais bien coché mongo, est-ce j’ai juste besoin de changer ‹ sqlite › par ‹ mongo › ou c’est beaucoup plus complexe à changer?

Merci pour l’explication sur ton login form !