Re: Connexion asynchrone en javascript

Top Page

Reply to this message
Author: Mathieu Lonjaret
Date:  
To: Patrice Karatchentzeff
CC: GUILDE
Subject: Re: Connexion asynchrone en javascript
On Wed, 7 Jun 2023 at 11:55, Patrice Karatchentzeff
<patrice.karatchentzeff@???> wrote:
>
> Le bon format de curl est
>
> curl --header "Content-Type: application/json" \
> --request POST \
> --data '{"username":"xyz","password":"xyz"}' \
> http://localhost:3000/api/login


cool, mais normalement t'as pas besoin de préciser que tu fais du POST
si tu utilises -d/--data (car c'est déjà ce qui se passe avec cette
option) ;)

> La bonne nouvelle est que cela fonctionne bien : ça renvoie le bon
> json avec le bon login et vice-versa.
>
> donc /a priorio/, ça merdoie plutôt coté front-end...


ok, ce qui était bien ce que tu avais déjà constaté à priori, d'acc.

> Merci pour le truc.
>
> PK
>
> Le mer. 7 juin 2023 à 11:27, Mathieu Lonjaret
> <mathieu.lonjaret@???> a écrit :
> >
> > On Wed, 7 Jun 2023 at 11:15, Patrice Karatchentzeff
> > <patrice.karatchentzeff@???> wrote:
> > >
> > > Merci Mathieu pour les conseils.
> > >
> > > A priori, j'affiche tout côté serveur, donc c'est OK.
> > >
> > > C'est une bonne idée, curl, mais je ne vois pas trop comment passer de
> > > React Native à curl, donc ça me parait difficile.
> >
> > Très grossièrement, je pense que ça devrait être quelque chose comme
> > curl -vvv -d "{ "login":"xx", "password":"xxx" }" http://$uriBase/connect
> >
> > Mais si tu penses que ton problème est dans le callback côté client,
> > lors de la lecture de la réponse, et que la réponse envoyée par le
> > serveur est bien toujours la même, c'est sûr que curl ne va pas trop
> > t'aider dans ce cas là.
> >
> > > Les en-têtes sont identiques, sauf
> > >
> > > pragma: no-cache
> > >
> > > (et le user-agent bien entendu) côté Chrome.
> > >
> > > Je ne sais pas trop comment l'activer côté FF, mais je vais creuser...
> >
> > c'est pour ça que j'ai toujours le réflexe curl en premier aussi, vu
> > que ça permet d'avoir le contrôle total sur les headers que tu veux
> > envoyer :)
> >
> > > Merci
> > >
> > > PK
> > >
> > > Le mer. 7 juin 2023 à 10:46, Mathieu Lonjaret
> > > <mathieu.lonjaret@???> a écrit :
> > > >
> > > > Hello,
> > > >
> > > > Sans avoir trop regardé le code encore (pas encore assez de thé dans
> > > > le système pour du javascript/React), je ne vais rien dire de magique,
> > > > mais dans cette situation:
> > > > - d'une part je commencerais par envoyer la même requête avec un curl,
> > > > - et d'autre part je mettrais plus de logs au différentes étapes côté
> > > > serveur pour être sûr. Genre est-ce que le serveur a bien reçu la
> > > > requête, est-ce qu'elle est bien parsée sans erreur, est-ce qu'elle
> > > > arrive dans le bon handler, etc.
> > > > - et dés qu'on parle d'une différence au niveau navigateurs, je
> > > > comparerais évidemment les headers reçus par le serveur d'un
> > > > navigateur à l'autre.
> > > >
> > > > hth,
> > > > Mathieu
> > > >
> > > >
> > > > On Wed, 7 Jun 2023 at 09:47, Patrice Karatchentzeff
> > > > <patrice.karatchentzeff@???> wrote:
> > > > >
> > > > > Salut,
> > > > >
> > > > > Je me tire des balles sur un truc que je considère comme assez
> > > > > élémentaire... Je veux connecter un font-end écrit en javascript (en
> > > > > React Native pour être exact) avec un back-end (utilisant Dancer2,
> > > > > mais cela a peu d'importance).
> > > > >
> > > > > J'essaie un truc tout con : je veux me connecter avec un login + mot
> > > > > de passe. Je câble tout en dur pour développer.
> > > > >
> > > > > J'envoie donc un paquet json contenant le login et le mot de passe au
> > > > > serveur, à la bonne adresse (route) et ce dernier lit le paquet,
> > > > > vérifie si l'association est bonne et renvoie connecté si elle est
> > > > > bonne et déconnecté sinon. Il renvoie un paquet json. Bref, le bon
> > > > > vieux trucs des années 90.
> > > > >
> > > > > Le code (en React Native, mais cela ne doit pas trop effrayer) :
> > > > >
> > > > > const jsonReader = { "login":"xx", "password":"xxx" } // la requête d'envoi
> > > > >
> > > > > const submitConnectAsync2 = async () => {
> > > > >     return fetch(
> > > > >       uriBase + '/connect', { // c'est l'adresse avec la bonne route
> > > > >     mode: 'no-cors', // beurk... but waiting for a nice workaround
> > > > > from Dancer2 side!
> > > > >     method: 'POST',
> > > > >     headers: {
> > > > >           'Accept' : 'application/json',
> > > > >           'Content-Type' : 'application/json',
> > > > >     },
> > > > >     body: JSON.stringify(jsonReader),
> > > > >       })
> > > > >       .then(response => response.json())
> > > > >       .then(json => {
> > > > >     setMessage(json);  // c'est du react, pour mettre à jour une variable
> > > > >     console.log("Coucou2");
> > > > >     //return json.ConnectionState;
> > > > >       })
> > > > >       .catch(error => {
> > > > >     console.log("Transaction error:", error);
> > > > >     console.log("body:", JSON.stringify(jsonReader));
> > > > >     //console.log("response:", response);
> > > > >     //console.log("json:", json);
> > > > >       });
> > > > >   };

> > > > >
> > > > >  useEffect(() => {
> > > > >     submitConnectAsync2();
> > > > >   }, []);

> > > > >
> > > > >
> > > > > J'utilise donc une connexion asynchrone. Cela fonctionne bien côté
> > > > > serveur : il identifie le paquet json, démarre une session et renvoie
> > > > > la bonne valeur selon le login/mot de passe.
> > > > >
> > > > > En revanche, je me tire des balles, car selon FF ou Chrome, cela
> > > > > fonctionne... ou pas ! FF lit bien la requête de retour et Chrome
> > > > > prétend qu'il ne la voit pas !
> > > > >
> > > > > Au début, je croyais que Chrome se plantait, car il reconnait bien le
> > > > > cookie d'initialisation de session, que j'active lorsque j'ai reçu le
> > > > > bon couple login/mot de passe, côté back-end. Mais en grattant côté
> > > > > FF, je me rends compte que le code de retour n'est pas vu : le
> > > > > console.log('Coucou2") n'est jamais exécuté.
> > > > >
> > > > > En effet, si je développe le code d'erreur, j'ai un bien mystérieux :
> > > > >
> > > > > Transaction error: SyntaxError: JSON.parse: unexpected end of data at
> > > > > line 1 column 1 of the JSON data App.js:326
> > > > >
> > > > > Il semblerait que le code JSON de retour soit miteux, ce qui pourrait
> > > > > expliquer que Chrome ne le comprenne pas.
> > > > >
> > > > > Pourtant, le débugueur de FF le lit bien et il correspond exactement à
> > > > > ce qui est envoyé par le back-end. Le truc est propre côté back-end a
> > > > > priori (c'est du perl bien robuste...).
> > > > >
> > > > > Du coup, je suis paumé... Qui a une idée pour me dépanner ? Je
> > > > > n'aurais jamais imaginé passer des heures sur un truc aussi con...
> > > > >
> > > > > Merci
> > > > >
> > > > > PK
> > > > >
> > > > > --
> > > > >       |\      _,,,---,,_           Patrice KARATCHENTZEFF
> > > > > ZZZzz /,`.-'`'    -.  ;-;;,_   mailto:patrice.karatchentzeff@gmail.com
> > > > >      |,4-  ) )-,_. ,\ (  `'-'
> > > > >     '---''(_/--'  `-'\_)

> > > > >
> > >
> > >
> > >
> > > --
> > >       |\      _,,,---,,_           Patrice KARATCHENTZEFF
> > > ZZZzz /,`.-'`'    -.  ;-;;,_   mailto:patrice.karatchentzeff@gmail.com
> > >      |,4-  ) )-,_. ,\ (  `'-'
> > >     '---''(_/--'  `-'\_)

>
>
>
> --
>       |\      _,,,---,,_           Patrice KARATCHENTZEFF
> ZZZzz /,`.-'`'    -.  ;-;;,_   mailto:patrice.karatchentzeff@gmail.com
>      |,4-  ) )-,_. ,\ (  `'-'
>     '---''(_/--'  `-'\_)