Bienvenue dans cette leçon, nous reprenons où nous avons laissé avec le code d'authentification le long et nous allons ajouter dans les fonctionnalités de connexion.
Donc, cela signifie que vous devez ajouter que pour vous connecter des itinéraires un qui est pour le formulaire rend le formulaire et l'autre qui fait réellement le log dans la logique.
Et puis nous avons réellement besoin de créer le formulaire et ensuite nous allons le tester.
Alors commençons à l'intérieur.
Oui, nous allons ajouter deux routes et ces deux routes à nouveau.
L'un est la requête GET et l'autre est une requête POST.
Les deux seront slash log in tout comme nous l'avons fait pour le registre.
Commençons donc par le formulaire et je ferai une autre note ici.
Ceux-ci seront enregistrés dans les itinéraires et le premier est juste va rendre le formulaire de connexion et que celui-ci est agréable et facile ne reçoivent pas de réponse de demande de connexion slash et ils rappellent et nous allons juste faire un rez rendre log in.
Maintenant, créons cette forme.
Donc, touchez utiliser slash logon Ejay nous et ensuite ouvrir que les vues slash log dans que E.J. Oui.
Génial.
Et nous ajouterons juste un H-1 gentil qui indique le logon et veillons à ce que nous voyions ceci quand nous commençons l'application.
Let's go à notre application et aller à slash log in et recevoir le modèle.
Alors maintenant, il est Ajouter dans le formulaire et ce sera comme le formulaire d'inscription à l'exception d'une grande différence qui est où le formulaire se soumet à.
Donc, nous allons ajouter que la dernière Let's juste aller avec les entrées à nouveau.
Ainsi, le type est égal au texte sur le premier nom égal au nom d'utilisateur et à l'espace réservé est égal au nom d'utilisateur et alors nous le dupliquerons et ici nous ferons le type égal au mot de passe du mot de passe de nouveau et le placeholder sera le mot de passe.
Et puis nous allons ajouter un bouton R pour soumettre le formulaire et nous allons simplement écrire log in et puis nous devons travailler sur le formulaire lui-même.
Donc, ce formulaire a besoin d'envoyer une demande de poste de slash logon de connexion en tant que poste sera notre autre itinéraire que nous n'avons pas encore défini, mais c'est là que nous allons effectivement traiter les données et de déterminer si les informations d'identification correspondent.
So let's set that up au lieu de log dans chaque cas, nous avons action égale slash log in et la méthode est également un post.
Donc, ce formulaire est en fait sur l'ouverture de session slash car il obtenir route et il soumet à slash log en tant que poste.
Maintenant, nous allons jeter un oeil à elle.
Actualisez la page que nous voyons le formulaire.
Génial si nous essayons de le soumettre dès maintenant, nous n'avons pas de barre oblique de connexion en tant que route post et il sera juste le temps mort.
Donc, nous allons revenir en arrière maintenant et ajouter le journal en route post et cette route sera responsable de la logique logique.
Donc, au plus haut slash log in demande de fonction en réponse et ici nous avons une nouvelle logique et ce n'est pas vraiment nouveau parce que nous avons déjà utilisé ici ou nous avons passeport dot authentifier local Nous allons faire exactement la même chose sauf il ya un Petite torsion qui est que nous n'allons pas le faire à l'intérieur de la callback ici.
Nous allons réellement le faire ici comme un deuxième argument.
Alors permettez-moi de vous montrer à quoi ça ressemble tout d'abord, puis passez-y.
Donc amped up post log in et puis nous allons ajouter authentification point de passeport et qui prendra local comme une virgule chaîne, puis l'ouverture et la fermeture des accolades.
Et à l'intérieur de ces accolades est un objet et nous allons passer en redirect succès.
Et ce sera slash secret et redirection échec sera slash se connecter à nouveau et nous allons enregistrer et ou authentifié doit fermer ici autour de cela.
Donc, il prend ces deux arguments passeport qui authentifient local Et puis cet objet entier.
Ce sont des paramètres que nous passons en virgule et puis c'est notre fonction de rappel et nous n'avons pas besoin de mettre quelque chose ici pour l'instant.
Donc, nous allons simplement laisser le.
Alors parlons maintenant de ce que nous avons fait ici.
Nous avons déjà vu l'authentification de point d'authentification de passeport mais nous ne l'avons pas vu utiliser comme ceci à l'intérieur du poste ascendant où il n'est pas dans le rappel lui-même.
C'est donc ce que l'on appelle un middleware et nous allons travailler avec middleware et écrire notre propre middleware et la prochaine vidéo.
Mais l'idée de middleware je vais l'épeler ici milieu où vous l'avez dit un code qui s'exécute avant notre retour d'appel final ici.
Lorsque notre application obtient une demande de poste à slash log in il va exécuter ce code immédiatement et nous pouvons avoir plusieurs middleware empilés afin que nous puissions avoir une autre chose qui va fonctionner après nous authentifier et puis une autre chose après cela.
Et l'idée est qu'ils sont assis entre le début de votre itinéraire et puis à la fin de l'itinéraire qui est notre gestionnaire à la fin.
D'où le nom middleware.
Encore une fois, nous allons créer notre propre middleware dans la prochaine vidéo.
Mais pour l'instant, tout ce que vous devez savoir, c'est que cela s'appelle un middleware et rappelle l'authentification par points de passeport.
Rappelez-vous le point entier de cela est qu'il essaie réellement de vous aimer quand il vérifie, puis il garde vos informations d'identification.
Donc, il va prendre le mot de passe et le nom d'utilisateur qui sont dans la demande à l'intérieur de la requête jusqu'à body.
Nous n'avons même pas à fournir explicitement que le passeport prend automatiquement le mot de passe de nom d'utilisateur à partir du formulaire ou à partir du corps de la demande et il est fondamentalement va comparer le mot de passe que l'utilisateur tapé dans l'entrée et de comparer à cette version fou hachage dans la base de données .
Et puis nous fournissons un objet avec deux paramètres.
Redirection réussie et redirection d'échec.
Donc, si cela fonctionne, nous allons rediriger vers slash secret et si elle ne fonctionne pas bien redirection à slash log it avant de tester cela.
Il ya une autre ligne de code que nous avons besoin pour configurer le passeport avec tellement vers le haut où nous avons fait le passeport ne feuilleter et sérialiser l'utilisateur va ajouter un autre dans le passeport utiliser nouvelle stratégie locale qui est ce que nous avons importé ici.
Je soutiens local.
Nous l'avons sauvé à la stratégie locale.
Revenez donc à cette nouvelle stratégie locale, puis entrez entre parenthèses l'authentification par point et l'enregistrement.
Nous créons donc une nouvelle stratégie locale en utilisant l'authentification de l'utilisateur.
Cela vient des passeurs locaux de Passport donc nous n'avons pas vraiment à écrire la méthode d'authentification non plus.
Cela est donné à nous et puis nous disons juste passeport pour l'utilisation stratégie locale que la version des données utilisateur authentifier.
OK, maintenant nous avons configuré notre authentification devrait fonctionner.
Donc, nous allons lui donner un coup de feu.
Non vraiment oui.
Et commençons par essayer de vous inscrire ou de vous connecter avec un compte que nous savons ne fonctionne pas.
Connectez-vous et il vous ramène à la page de connexion et c'est ce que nous avions mis en place ici.
Échec de redirection d'ouverture de session slash.
Connectez-vous maintenant avec un compte que je connais fonctionne et cette fois-ci, il me mène à la page secrète.
Donc nous avons maintenant ouvrir une session de travail.
Nous n'avons toujours pas de déconnexion.
Nous avons ouvert une session de travail afin que je puisse m'inscrire à l'aide de registre et ensuite ils peuvent également se connecter.