‫- : Il est enfin temps d'utiliser l'API de connexion que
‫nous avons construite dans les sections
‫précédentes et il y a une tonne de
‫choses à faire ici afin de faire interagir le front-end avec le back-end.
‫Et donc nous faisons cela dans des conférences séparées.
‫Quoi qu'il en soit, commençons maintenant.
‫Et c'est comme ça que ça va fonctionner.
‫Donc, nous allons permettre aux utilisateurs de se connecter à
‫notre site Web en faisant une requête HTTP, ou un appel ATEX
‫comme beaucoup de gens aiment l'appeler aussi.
‫Et nous faisons cette requête HTTP au point de terminaison de l'API de connexion
‫que nous avons implémenté avant d'utiliser les
‫données que l'utilisateur fournit sous cette forme que nous avons ici.
‫Alors, n'oubliez pas que notre API renverra alors un
‫cookie qui sera automatiquement stocké dans le navigateur.
‫Et est également automatiquement renvoyé
‫à chaque demande ultérieure.
‫Et comme vous le verrez, c'est une
‫clé fondamentale pour faire fonctionner notre système d'authentification.
‫Mais de toute façon,
‫puisque nous effectuons cette requête HTTP
‫dans le navigateur, nous travaillerons bien sûr à nouveau du côté client.
‫Mais de toute façon, puisque
‫nous effectuons une requête HTTP dans le navigateur, nous
‫continuerons à travailler sur le code du script des tâches côté client.
‫Donc, tout comme nous l'avons fait avec l'implémentation de Mapbox.
‫Bien?
‫Alors allons-y maintenant et créons un nouveau fichier ici.
‫Et donc c'est en public, js et nouveau fichier, que je
‫vais appeler login. js et dans
‫la vidéo suivante, nous allons en fait
‫regrouper tous ces fichiers JavaScript
‫séparés que nous créons ici pour le
‫front-end en un seul gros paquet.
‫Bien?
‫Mais pour l'instant, concentrons-nous uniquement sur le fonctionnement
‫de cette fonctionnalité de connexion.
‫Mais de toute façon, commençons maintenant par ajouter un écouteur
‫d'événement, à l'écoute de l'événement de soumission sur notre formulaire de connexion, d'accord ?
‫Ainsi, notre formulaire de connexion a cette classe de formulaire ici.
‫D'accord, sélectionnons maintenant cet élément
‫pour l'élément, puis écoutons l'événement de soumission.
‫J'espère que vous êtes familier avec ce type de
‫logique dans le JavaScript côté client.
‫Et j'espère que ce n'est pas nouveau pour vous.
‫Alors, documentez-vous. querySelector, que nous utilisons
‫pour sélectionner en fonction de la classe.
‫Ajoutez ensuite ce nom
‫de sélecteur, et ajoutez maintenant EventListener, à l'écoute de l'événement de soumission.
‫Donc, fondamentalement, un événement que le navigateur se
‫déclenchera chaque fois qu'un utilisateur cliquera sur le bouton d'envoi du formulaire.
‫Ajoutez ensuite la fonction
‫de collecte, nous aurons accès à cet événement lui-même, d'accord ?
‫Et donc la troisième chose que nous
‫faisons est de dire événement. prévenirDéfaut.
‫D'accord?
‫Cela empêche donc le formulaire de charger toute autre page.
‫Ensuite, récupérons l'e-mail et la valeur
‫du mot de passe que l'utilisateur a saisis.
‫Et donc ce sont, dans cet élément, avec l'e-mail d'identification et
‫le mot de passe d'identification, d'accord ?
‫Donc, ces deux
‫champs de saisie et obtenons également ces données.
‫(en tapant sur un clavier) Donc
‫document, obtenez l'élément
‫par ID.
‫Email, puis nous utilisons la propriété value
‫afin d'atteindre cette valeur là-bas.
‫Pas nodeValue, juste valeur.
‫Dupliquons cette ligne, d'accord ?
‫Et maintenant, passons à la véritable
‫connexion dans une fonction distincte, d'accord ?
‫Maintenant, nous arrivons ici,
‫cette erreur eslint et c'est encore parce que nous
‫n'avons eslint configuré que pour le code non JS.
‫Et donc désactivons cela comme nous l'avons fait ici.
‫Alors prenez simplement ce morceau de code.
‫Bien?
‫Et maintenant, comme je
‫le disais, créons maintenant cette fonction de connexion.
‫Donc et juste comme
‫ça, et cette fonction va accepter un
‫email et un mot de passe.
‫Et
‫tout d'abord, voyons si ce code fonctionne réellement.
‫Nous allons donc alerter,
‫donc en gros, créez une fenêtre d'alerte.
‫Et avec cet email et mot de passe.
‫Bien?
‫Maintenant, bien sûr, nous devons également appeler à
‫nouveau cette fonction avec un e-mail et un mot de passe.
‫Et enfin, nous devons également inclure ce fichier de connexion
‫dans notre modèle de base, d'accord ?
‫Et encore une fois, comme je le disais
‫au début, dans la vidéo
‫suivante, nous allons regrouper tout ce code frontal
‫ici dans un seul gros fichier JavaScript.
‫Bien?
‫C'est donc bien meilleur pour les
‫performances et c'est aussi une meilleure expérience de développeur pour nous-mêmes.
‫Quoi qu'il en soit, cela devrait maintenant fonctionner.
‫Rechargeons simplement cette page ici.
‫Je dois donc remplir, valider ici, de
‫toute façon, Chrome ne me permettra même pas de soumettre le formulaire.
‫D'accord, donc ici, nous recevons notre alerte avec
‫l'e-mail que nous venons de saisir, puis
‫le mot de passe, je suppose,
‫ne s'affiche pas
‫parce que nous avons en quelque sorte spécifié deux valeurs là-bas.
‫Donc, à la place, spécifions un objet ici et voyons s'il
‫fonctionne à nouveau.
‫(en tapant sur un clavier) Eh bien, je suppose
‫qu'il essaie de
‫convertir cet objet en chaîne ici.
‫D'accord, mais ça n'a pas vraiment d'importance ici.
‫Je suis généralement plus habitué à utiliser la console. log au lieu d'alerte.
‫Bien?
‫Mais de toute façon, je suis sûr que ça marche maintenant ici.
‫Et donc allons-y maintenant et créons cette fonction.
‫Donc, pour faire ces requêtes HTTP pour la connexion,
‫nous allons
‫utiliser une bibliothèque très populaire appelée Axios, d'accord ?
‫Et dans la vidéo suivante, nous allons en
‫fait télécharger cette bibliothèque à partir de NPM et la regrouper
‫avec tous nos autres
‫scripts, mais pour l'instant, utilisons-la à partir d'un CDN.
‫Alors, allons-y sur Google Axios
‫CDN, d'accord ?
‫Ensuite, allez-y et copiez celui-ci ici, puis,
‫dans notre script
‫de base, mettons-le ici au premier, d'accord ?
‫Cela exposera
‫donc un objet Axios à la portée globale,
‫que nous pourrons ensuite utiliser dans notre fonction de connexion, d'accord ?
‫Et nous pouvons donc maintenant dire
‫Axios, puis transmettre les options pour notre demande.
‫Alors tout d'abord, disons que nous faisons une post-requête.
‫Ensuite, nous avons besoin d'une URL.
‫Bien?
‫Alors, obtenons cela de Postman.
‫Voici donc notre URL ici.
‫Et nous allons
‫aussi, bien sûr, ajouter l'hôte alors là-bas.
‫Alors ici, bien sûr, il s'agit essentiellement de http
‫puis d'un hôte local.
‫Et, c'est
‫donc notre entrée de connexion, et maintenant
‫nous devons spécifier les données que
‫nous envoyons avec la demande dans le corps.
‫Bien?
‫Et donc c'est l'e-mail : l'e-mail.
‫Et donc, comme vous le savez déjà, nous pouvons supprimer cet e-mail.
‫D'accord?
‫Cela s'appelle donc e-mail ici, car notre
‫point de terminaison s'attend à ce que les données soient appelées e-mail, n'est-ce pas ?
‫C'est donc ce que nous avons ici dans le corps.
‫Nous devons spécifier une propriété appelée email et une
‫autre appelée mot de passe.
‫Et c'est exactement ce que nous
‫faisons ici, mais il porte alors le même nom que ce paramètre ici.
‫Et donc il suffit de dire email
‫et il en va de même pour le mot de passe.
‫D'accord?
‫Maintenant, Axios renvoie ici une promesse et
‫utilisons donc en fait une
‫seule attente pour attendre que cette valeur revienne.
‫Attendez donc ici, puis asynchrone ici.
‫Maintenant, gardez à l'esprit qu'il s'agit de code orienté client et
‫que seuls les navigateurs les plus
‫modernes peuvent réellement exécuter une seule fonction d'attente, mais
‫dans ce cours, je ne vais pas vraiment entrer dans les détails.
‫D'accord?
‫Quoi qu'il en soit, enregistrons le résultat de ceci en attendant
‫la promesse dans la variable de résultat.
‫Et puis juste, pour regarder le
‫résultat, disons console. résultat du journal.
‫D'accord?
‫Maintenant, une chose que j'aime vraiment chez Axios
‫est le fait qu'il va générer une
‫erreur chaque fois que nous recevons une erreur de notre entrée API.
‫Alors disons qu'il y a un mauvais mot de passe
‫et donc le serveur va renvoyer un 403
‫et donc fondamentalement, une erreur.
‫Et donc chaque fois qu'il y
‫a une erreur, Axios déclenchera également une erreur.
‫Et donc, c'est très pratique car, avec cela, nous pouvons
‫maintenant utiliser un bloc try catch.
‫D'accord?
‫Donc, fondamentalement, afin de gérer les erreurs ici
‫du côté client.
‫Ainsi, par exemple,
‫lorsque l'utilisateur est correctement connecté, vous souhaitez
‫afficher un message indiquant cela, et
‫peut-être une autre logique, mais sinon,
‫eh bien, nous allons entrer dans le bloc catch,
‫et
‫nous pouvons alors , effectuez une autre action en fonction de l'erreur.
‫(en tapant sur un clavier) Alors,
‫examinons également l'erreur.
‫Et juste pour être sûr, je souhaite également enregistrer l'e-mail et le mot
‫de passe sur la console.
‫Alors, essayons ça ici.
‫Rechargez notre
‫page, (en tapant sur un clavier) Et je mets
‫un mauvais mot de passe maintenant, d'accord ?
‫Testez un, deux, trois, quatre, cinq.
‫Jetons également un coup d'œil à notre console ici.
‫Et nous obtenons cette erreur ici de mapbox, js, mais ne vous
‫inquiétez pas pour ça.
‫Nous allons à nouveau corriger cela un peu plus tard.
‫Bur pour l'instant, regardons ce qui se passe ici.
‫Et ici, nous obtenons une belle erreur, d'accord ?
‫Et donc, en fait, quand nous devons jeter un œil à ici, c'est
‫une erreur. réponse.
‫Et puis les données de point.
‫D'accord, et vous le trouverez ici dans la documentation Axios au cas
‫où vous vous demanderiez d'où cela vient.
‫Bien?
‫Permettez-moi d'aller de l'avant et de copier cet
‫e-mail, car ce n'est pas si bon de toujours l'écrire manuellement.
‫Et maintenant, nous obtenons en fait une erreur bien formatée ici.
‫D'accord?
‫Et c'est donc exactement le jsencode que
‫nous avons renvoyé depuis notre serveur.
‫À droite?
‫Donc, c'est exactement la
‫même chose que nous avons vu dans Postman.
‫Nous obtenons donc l'intégralité de notre erreur, le message, ainsi que la pile.
‫Et nous voyons donc que nous n'avons probablement pas fourni l'e-mail
‫et le mot de passe correctement pour une raison quelconque.
‫Alors revenons en arrière, jetez un œil.
‫Oh, alors j'ai fait quelque chose de bizarre ici où j'ai passé un
‫objet avec à la fois l'email
‫et le mot de passe.
‫Et donc je pense que c'est avant quand
‫il a essayé de faire cette
‫alerte et je suppose que je l'ai fait au mauvais endroit.
‫Et donc, c'est pourquoi nous avons en fait vu undefined ici.
‫Et nous avons ici cet objet.
‫Donc, fondamentalement, l'e-mail était tout cet objet, et le
‫mot de passe était alors aussi indéfini.
‫D'accord?
‫Alors maintenant, cela devrait résoudre le
‫problème, rechargez-le.
‫Ah, maintenant nous obtenons cette erreur correcte
‫que nous attendions réellement.
‫Alors maintenant, c'est un e-mail ou un mot de passe
‫incorrect parce que j'ai spécifié un mauvais mot de passe, d'accord ?
‫Mais maintenant, supprimons les cinq et
‫testons un, deux, trois, quatre, cela devrait être correct.
‫Alors, connectons-nous, et
‫maintenant nous obtenons une réponse 200.
‫Donc, une réussite.
‫Alors ouvrons ceci et
‫ce qui nous intéresse en fait, ce sont les données.
‫Donc en gros réponse. data car c'est
‫alors
‫en fait où se trouve notre réponse jsen.
‫Donc ici, nous obtenons
‫ces données ici, et nous obtenons également le statut et le jeton.
‫Et donc, c'est ici notre jeton Web jsen correct
‫correspondant à cet utilisateur connecté.
‫Maintenant, ce qui est vraiment
‫intéressant, c'est de jeter un œil à nos cookies.
‫Et nous le faisons dans Google Chrome au
‫moins en cliquant sur cette icône
‫ici, puis ici en bas, vous avez les cookies.
‫Et cela dit aussi que notre connexion n'est
‫pas sécurisée
‫et c'est simplement parce que nous n'utilisons pas HTTPS à
‫ce stade, mais peu importe.
‫Ce qui compte ici, c'est que nous avons
‫maintenant ce cookie et en effet, il s'appelle, jeton
‫Web jsen, et il a exactement le jeton Web jsen que
‫nous voyons ici.
‫Donc, ce n'est que la fin, fondamentalement, de la
‫chaîne, donc vous voyez que c'est égal à ce que nous avons ici.
‫Et c'est ce cookie ici, qui nous permettra en
‫fait de construire toute cette authentification.
‫Encore une fois, parce que le navigateur n'enverra pas
‫ce cookie avec chaque nouvelle demande.
‫Et laissez-moi vous montrer dans notre back-end.
‫Revenons donc là-bas, et allons à l'application. js.
‫Et maintenant nous sommes de retour dans notre note, ou
‫en fait dans notre code Express.
‫Maintenant, afin d'avoir accès aux
‫cookies qui sont dans notre demande.
‫Dans Express, nous devons installer un certain middleware.
‫Et nous devons donc l'installer à partir d'un package NPM.
‫Et c'est encore une fois, venez sur notre
‫autre terminal,
‫puis NPM installez l'analyseur de cookies.
‫D'accord?
‫Donc, fondamentalement, ce package analysera ensuite tous
‫les cookies de la demande entrante.
‫cookieParser.
‫Bien?
‫Et maintenant, utilisons-le près de cet analyseur de corps.
‫D'accord?
‫Ces deux-là sont donc très similaires.
‫Ce premier analyse les données du
‫corps et le second analyse les données des cookies.
‫Et maintenant, si dans ce middleware ici, nous
‫pouvons utiliser request. biscuits.
‫Et donc maintenant pour
‫chaque demande, nous afficherons toujours tous les cookies dans la console.
‫Donc, si nous rechargeons maintenant cette page, ou vraiment
‫n'importe quelle autre page, et
‫laissez-moi ouvrir celle-ci ici dans un nouvel onglet.
‫Donc, si nous revenons maintenant, nous devrions voir ce cookie ici.
‫Et, en effet, le voici.
‫C'est donc le cookie qui vient d'être
‫envoyé dans notre application en chargeant cette page dans le navigateur.
‫Et si
‫je recommence, vous en verrez un autre, n'est-ce pas ?
‫Alors voilà.
‫Et maintenant, nous pouvons l'utiliser pour protéger notre itinéraire.
‫Bon, alors essayons ça.
‫D'accord?
‫Mais avant de
‫pouvoir faire cela, nous devons
‫également ajouter cela dans notre contrôleur off ici.
‫Donc, pour le moment, nous ne lisons que le jeton Web jsen
‫à partir de l'en-tête d'autorisation.
‫À droite?
‫Et seulement s'ils commencent par ce porteur, d'accord ?
‫Donc pour le jeton au porteur.
‫Mais maintenant, nous voulons aussi lire le jeton
‫Web jsen à partir d'un cookie.
‫Et donc ce que nous pouvons faire ici est essentiellement un else
‫if, donc s'il n'y avait pas de jeton dans
‫l'en-tête d'autorisation, eh bien, examinons les cookies.
‫Alors demande. biscuits. jeton Web jsen.
‫Donc JWT, qui est le nom du
‫cookie, et donc donc, dans l'objet cookies, il
‫y aura une propriété appelée JWT.
‫Alors c'est ici, n'est-ce pas ?
‫Et donc si cela existe,
‫eh bien, alors le jeton devrait être exactement cela.
‫Alors demande. biscuits. jwt.
‫D'accord.
‫Et maintenant, avec cela, nous
‫sommes également en mesure d'authentifier les utilisateurs en fonction des jetons
‫envoyés via les cookies et pas seulement l'en-tête d'autorisation.
‫Super.
‫Et juste pour tester cela, protégeons en fait l'une
‫de nos routes ici dans la vue.
‫Et je le ferai avec cette page de détails de la tournée, d'accord ?
‫Donc c'est juste pour
‫tester car bien sûr cela n'a pas beaucoup de sens,
‫mais je voulais juste vous montrer que tel qu'il est en ce
‫moment, notre connexion fonctionne déjà.
‫Importons donc le authController ici.
‫(en tapant sur un clavier)
‫Et puis, comme avant, éditez ici dans cette route.
‫Donc authController. protéger.
‫Et donc ce n'est pas nouveau à ce stade.
‫Et puis seulement si l'utilisateur est connecté, nous pouvons
‫aller au getTour.
‫Super.
‫Donc, ce que je vais faire maintenant, c'est supprimer ce cookie d'abord
‫juste pour vous montrer ce qui se passe lorsqu'un
‫utilisateur non connecté
‫essaie d'accéder à cette route maintenant.
‫Et donc fondamentalement, si nous supprimons ce cookie, c'est comme
‫déconnecter l'utilisateur, n'est-ce pas ?
‫Donc, si vous jetez maintenant un œil à nos
‫visites, cela devrait très bien paraître.
‫Mais, si nous essayons maintenant d'accéder à cette
‫page, nous devrions obtenir une erreur.
‫Et en effet, ça y est, en disant que vous n'êtes pas connecté.
‫Assez juste.
‫Alors revenons en arrière et connectons-nous réellement.
‫D'accord?
‫Alors on y va.
‫Et puis à l'avenir, nous allons bien sûr également implémenter des fenêtres d'alerte
‫ici et
‫toutes ces bonnes choses.
‫Mais pour l'instant, encore une fois, faisons en sorte que cela fonctionne.
‫Et donc vous voyez que nous
‫sommes de retour pour avoir notre bon cookie ici, d'accord ?
‫Et donc, essayons maintenant d'accéder à cette route protégée.
‫Et effectivement, maintenant ça marche.
‫Fantastique, c'est déjà vraiment génial, non ?
‫Idéalement, lorsqu'un utilisateur est connecté, nous voulons alors ne
‫pas afficher ces boutons ici,
‫mais plutôt, comme un menu utilisateur ou une image de l'utilisateur.
‫Donc, en gros, montrant que
‫cet utilisateur est réellement connecté, n'est-ce pas ?
‫Faisons-le dans la vidéo suivante, en regroupant tous nos fichiers
‫JavaScript dans
‫le front-end, comme je l'expliquais plus tôt.
‫Alors n'attendez pas, passons directement au suivant.
‫On se voit là-bas.