‫Instructeur : Nous avons donc appris
‫lors de la dernière conférence que le jeton Web
‫JSON doit être stocké dans un cookie sécurisé HTTP uniquement.
‫Mais pour le moment, nous n'envoyons le jeton
‫que sous la forme d'une simple chaîne dans notre réponse JSON.
‫Donc, dans cette vidéo, envoyons également le jeton en tant que cookie, afin
‫que le navigateur puisse ensuite l'enregistrer de
‫cette manière plus sécurisée.
‫Nous sommes donc dans notre code.
‫Envoyons-nous réellement le jeton au client ?
‫Eh bien, rappelez-vous, c'est dans authController et
‫ici dans la fonction createSendToken.
‫Donc, avant, nous avions essentiellement tout
‫ce code dans de nombreux endroits différents, mais nous avons
‫ensuite refactorisé tout cela dans cette fonction createSendToken.
‫Très bien, et c'est donc là que nous allons travailler maintenant.
‫Maintenant, je suis sûr que
‫vous connaissez le fonctionnement des cookies en général,
‫mais juste pour être sûr que nous sommes tous sur la même
‫longueur d'onde ici, parlons un peu des cookies.
‫Donc tout d'abord, un cookie n'est en fait
‫qu'un petit morceau de texte qu'un serveur peut envoyer aux clients.
‫Ensuite, lorsque le client reçoit un cookie,
‫il le stocke
‫automatiquement, puis le renvoie automatiquement
‫avec toutes les demandes futures au même serveur.
‫Très bien, encore une fois, un navigateur stocke automatiquement un
‫cookie qu'il reçoit et le renvoie
‫dans toutes les demandes futures à ce serveur d'où il vient.
‫Bon, maintenant, pour l'instant, cela ne va
‫pas être vraiment important pour
‫nous car nous ne testons l'API qu'à l'aide de Postman.
‫Mais un peu plus tard, lorsque nous allons rendre
‫des pages Web dynamiques et vraiment interagir
‫avec le navigateur, il deviendra
‫alors très important que le navigateur renvoie le
‫jeton essentiellement automatiquement à chaque demande.
‫D'accord, et d'ici là, bien sûr, nous en parlerons davantage.
‫Mais de toute façon, apprenons maintenant comment créer
‫et envoyer un cookie.
‫Donc pour envoyer un cookie, c'est en fait très simple.
‫Tout ce que nous avons à faire est de
‫l'attacher à l'objet de réponse.
‫Alors on dit rés. cookie, puis tout ce que
‫nous avons à faire est de spécifier le
‫nom du cookie, et je l'appelle jeton
‫Web JSON, puis les données que nous voulons réellement envoyer
‫dans le cookie, et ce sera donc bien sûr
‫la variable du jeton et puis après cela, quelques options pour le cookie.
‫Et la première option que
‫nous allons spécifier est la propriété expires.
‫D'accord, donc fondamentalement, cette propriété expires
‫fera en sorte que le navigateur ou le client
‫en général supprime le cookie après son expiration.
‫D'accord, et nous avons donc défini une
‫date d'expiration similaire à celle que nous avons définie dans le jeton Web JSON, d'accord.
‫Créons donc une nouvelle variable pour
‫cela, d'accord, car le package de jetons Web
‫JSON peut alors fonctionner avec ce format.
‫D'accord, mais en JavaScript, cela n'a pas de sens et à
‫la place, créons une variable avec un nombre réel.
‫Appelons-le toujours JWT, puis cookie, expire
‫dans,
‫et nous le définissons toujours sur 90, donc 90 jours, mais encore
‫une fois, sans le D.
‫D'accord, alors maintenant nous pouvons faire des
‫opérations avec parce que nous devrons le convertir en millisecondes, d'accord.
‫Alors, quand ce cookie doit-il expirer ?
‫Il devrait expirer à une nouvelle date.
‫Ainsi, en JavaScript, lorsque nous spécifions
‫des dates, nous devons toujours
‫indiquer une nouvelle date, puis elle devrait expirer maintenant, plus ces 90 jours.
‫Bon, alors maintenant, comme ça bien sûr.
‫Et puis traiter. env,
‫et maintenant, utilisons celui-ci et mettons
‫simplement le cookie là-dedans, d'accord.
‫Mais maintenant, bien sûr, nous devons convertir cela en millisecondes.
‫Nous avons donc 90 jours maintenant.
‫Donc deux heures, il est temps 24.
‫Deux minutes, il est temps 60.
‫Deux secondes, c'est encore 60 fois.
‫Et puis en millisecondes, fois mille, d'accord.
‫Et bien sûr, je pourrais tout faire
‫en une seule fois, mais c'est juste pour préciser ce que nous faisons exactement.
‫Donc, pour montrer
‫que nous le convertissons réellement en millisecondes.
‫L'option suivante sera l'option sécurisée.
‫Et donc nous allons définir celui-ci
‫sur true et ainsi, le cookie ne sera envoyé que
‫sur une connexion cryptée.
‫Donc, en gros, nous n'utilisons que HTTPS, d'accord.
‫Et enfin, c'est cette option httpOnly dont nous avons
‫déjà parlé.
‫D'accord, nous définissons donc celui-ci sur true et
‫cela fera en sorte que le
‫cookie ne puisse pas être consulté ou modifié de quelque manière que ce soit par le navigateur.
‫D'accord, et c'est donc important pour empêcher
‫ces attaques de scripts intersites.
‫Très bien, donc tout ce que
‫le navigateur va faire lorsque nous définissons httpOnly sur
‫true est de recevoir le
‫cookie, de le stocker, puis de l'envoyer automatiquement avec chaque demande.
‫D'accord, et c'est en fait tout.
‫C'est donc ainsi que nous définissons le cookie, disons cette
‫partie, puis nous l'envoyons
‫en utilisant res. biscuit.
‫Maintenant, si nous voulions tester cela maintenant, cela ne fonctionnerait
‫pas car pour le moment, nous n'utilisons pas HTTPS.
‫Et donc à cause de ce secure : true,
‫le cookie ne serait
‫pas créé et ne serait pas envoyé au client.
‫Très bien, et
‫donc en gros, nous voulons seulement activer cette partie ici en production.
‫Donc, ce que je vais faire, c'est
‫essentiellement exporter cet objet entier ici dans une variable distincte.
‫D'accord, alors laisse-moi te montrer ça.
‫Donc
‫const cookieOptions doit être égal
‫à ceci, puis ici, nous le transmettons.
‫D'accord.
‫Maintenant, bien sûr, nous ne voulons pas de cette partie
‫ici, mais seulement lorsque nous sommes en production.
‫Alors
‫disons si processus. env. NODE_ENV, rappelez-vous que c'est là
‫qu'il est stocké si nous sommes
‫en production ou non.
‫Donc, si cela
‫équivaut à la production, définissez cookieOptions. sécurisé égal à
‫vrai.
‫D'accord, et maintenant, nous pouvons le supprimer d'ici.
‫Oui, alors maintenant, seulement lorsque nous serons en
‫production, nous aurons les options sécurisées définies sur true.
‫Et sinon, il ne sera envoyé que
‫comme ça, donc juste avec la date d'expiration et httpOnly.
‫D'accord, et alors testons cela maintenant.
‫Et je vais le tester en créant un nouvel utilisateur.
‫Alors ici, inscrivez-vous en fait
‫et appelons
‫celui-ci user@jonas. io.
‫Toujours avec le même mot de passe.
‫Je vais également l'appeler
‫Utilisateur et disons que le rôle ici est un guide, donc juste
‫pour que nous ayons également des rôles différents ici.
‫Donnez-lui un peu plus d'espace.
‫Et maintenant, essayons réellement.
‫Et la réponse est exactement comme nous l'attendions avec
‫la différence que
‫maintenant, nous obtenons un cookie ici dans cet onglet Cookie.
‫Et donc effectivement, ici,
‫on obtient le nom du cookie, la valeur.
‫Nous avons également la
‫date d'expiration, qui est dans exactement 90 jours.
‫Nous avons défini httpOnly sur true et secure défini sur false.
‫D'accord.
‫Génial, nous pouvons également voir tous les cookies que nous
‫avons ici dans cet onglet Cookie.
‫Et encore une fois, nous voyons ce cookie que
‫nous avons reçu de ce domaine, d'accord.
‫Maintenant, juste une dernière chose que je veux réellement
‫changer dans cette fonction sur laquelle nous travaillons,
‫donc le createSendToken,
‫consiste essentiellement à se débarrasser de ce mot de passe ici dans la sortie.
‫D'accord, donc dans notre schéma, nous l'avons défini
‫pour sélectionner false, afin qu'il n'apparaisse pas lorsque nous
‫interrogeons tous les utilisateurs.
‫Mais dans ce cas, cela vient de la création d'un nouveau
‫document et donc c'est différent et c'est pourquoi nous le voyons ici.
‫D'accord, mais nous pouvons en fait très facilement résoudre ce problème.
‫D'accord, tout ce que nous avons à faire est de
‫définir l'utilisateur. mot
‫de passe à indéfini.
‫Très bien, et cela devrait
‫donc supprimer les
‫mots de passe de la sortie.
‫D'accord.
‫Alors supprimons simplement cet utilisateur que nous venons de créer.
‫Et réessayez juste pour
‫voir si le mot de passe ne s'affiche plus.
‫Et oui, en effet maintenant, c'est parti.
‫Et pourtant, notre cookie, bien sûr, est là.
‫Et quand nous arrivons maintenant à notre onglet Cookies,
‫eh bien, vous n'avez encore qu'un seul
‫cookie parce que l'ancien était maintenant essentiellement écrasé par ce
‫nouveau et c'est
‫parce qu'ils ont le même nom.
‫Le nom est donc comme l'identifiant unique d'un cookie.
‫Et donc si nous en recevons un
‫avec le nom qui
‫a déjà été donné, eh bien, alors l'ancien est simplement remplacé.
‫D'accord, et c'est en fait tout.
‫C'est donc ainsi que nous envoyons un cookie HTTP uniquement et
‫encore une fois, nous en parlerons
‫davantage lorsque nous créerons notre site Web dynamique.