Création d'un parser de querystring

Comment ça passe avec GIT et les tests ?

a marqué ce sujet comme résolu.
Auteur du sujet

Bonjour,

Pour une application dans un site web, j’ai besoin de récupérer le Token qui se trouve être en document.location.hash sous le format d’une querystring.

C’est le passage clé de mon site si je m’y prends mal, l’application ne fonctionnera pas. :zorro: Je voulais savoir si vous remarquiez un potentiel oubli dans mon parsing ou un format que je ne supporte pas.

Pour test : https://jsfiddle.net/v2w18tao/79/

function querystringParser(hash, opt) {
  var set = function (defVal, optVal) {
    return (typeof optVal === "undefined") ? defVal : optVal;
  };

  var options = {
    starter: set("?", opt && opt.starter),
    sep: set("&", opt && opt.sep),
    eq: set("=", opt && opt.eq)
  };
  var obj = {},
    enableStarter = (typeof options.starter === "string");
  for (var i = 0, varName = null, val = null, char, key; i <= hash.length; i++) {
    char = hash[i];
    if (i === 0 && char === options.starter && enableStarter) { // Enlève le "#"
      continue;
    } else if (val === null && char === options.eq) { // On passe à la suite si "="
      val = "";
    } else if (val === null) {
      varName = ((varName === null) ? "" : varName) + char;
    } else if (varName !== null && char !== options.sep && i !== hash.length) {
      val = val + char;
    } else {
      if (varName !== "") {
        key = decodeURIComponent(varName);
        switch (typeof obj[key]) {
          case "undefined":
            obj[key] = decodeURIComponent(val);
            break;
          case "string":
            obj[key] = [decodeURIComponent(val)];
          default:
            obj[key].push(decodeURIComponent(val));
        }
      }

      varName = null;
      val = null;
    }
  }
  return obj;
}

var querystring = "#token=a567082ca54abf223a77da38&scope=user%3Aread+channel%3Amoderate&token_type=auth2&token_type=auth";
document.getElementById("json").textContent = JSON.stringify(querystringParser(querystring, {starter:"#"}), null, 4);

Pour le côté apprentissage, je souhaiterais mettre ma fonction sur github (sous forme de bibliothèque par exemple) et faire automatiquement des tests quand je PR (comme le zds) via : https://qunitjs.com/ est-ce possible ? Dois-je changer de lib ? Faut-il des connaissances avancées ?

J’ai aussi pensé à faire un script node pour tester le résultat.

Bon vol,

A.

EDIT : Rajout des tags.

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0

Disons qu’il y a déjà des tas de fonctions mieux que celle que tu montres pour faire ça. En revanche ce qu’elles font c’est parser une query string, pas parser une query string seulement si elle préfixée par #.

Du coup conseils :

  • Une fonction qui fait UN truc c’est mieux qu’une fonction qui en fait plusieurs. Découpe ça en 2 fonctions : une qui extrait la query string, l’autre qui la parse. Et la 2e t’as pas besoin de l’écrire, t’en trouveras des tas de très bien partout, t’as même donné un exemple.
  • Evite de réinventer la roue.
  • Dans un topic de ce genre, ça vaut la peine d’expliquer pourquoi tu te retrouves à devoir parser une query string passée aussi bizarrement que ça. Si ça se trouve c’est un hack moche parce que t’as raté la bonne solution.

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+0 -0
Auteur du sujet

L’API avec authentication oauth me renvoi sur : monsite.com/callback#token=a567082ca54abf223a77da38&scope=user%3Aread+channel%3Amoderate&token_type=auth2&token_type=auth, je ne peux donc pas utiliser querystring de node.

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0

Pourquoi est-ce qu’elle te redirige sur cette URL ? Le principe d’OAuth c’est pas que tu dis au provider vers quelle URL rediriger le client ? Si oui, pourquoi rediriger vers example.com/foo# au lieu d'example.com/foo? (Le ? s’applique à l’URL, mais si tu préfères tu peux l’appliquer à la question.)

Édité par cepus

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+0 -0
Auteur du sujet

J’ai choisi l'OAuth 2.0 Implicit Grant pour une question de simplicité et le fait d’être léger pour le serveur. Le serveur me sert uniquement à distribuer des pages statiques avec ce mode.

Édité par A-312

✈️ // 🐺 Ami des loups // 🎮 Coding Game // 🐤 Twitter @A312_zds // :B // L’hiver vient // @**A-312** pour me ping

+0 -0

Cette réponse a aidé l’auteur du sujet

Je vois.

Dans ce cas je te recommande par exemple le premier résultat google : https://stackoverflow.com/questions/2090551/parse-query-string-in-javascript , pour la lecture. Plein de solutions qui semblent moins alambiquées que la tienne.

Il te reste à faire une fonction pour extraire le hash fragment, et à utiliser ce qui te plait pour parser.

Pour les tests je connais pas particulièrement qUnit, je suis plutôt habitué de jest, ava, mocha, … Prends ce qui te convient, au final c’est égal. Ça ne demande pas de connaissances poussées, non. Suffit généralement de lire la doc pour piger comment ça marche. En revanche le testing est un art et là je connais pas de ressources francophones pour apprendre à écrire de bons tests.

L’idée de tester que ton parseur retourne la même chose que celui de node n’est pas mauvaise, mais si tu testes pas les edge cases testés par node ça ne montrera pas que ton code est aussi correct que le leur. Du coup tu peux jeter un oeil à leurs tests pour cette méthode.

Vous aimez le frontend ? Il y a un tas de petites tâches faciles si vous voulez contribuer à ZdS : https://github.com/zestedesavoir/zds-site/issues?q=is%3Aissue+is%3Aopen+label%3AC-Front

+1 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte