1
00:00:00,690 --> 00:00:08,370
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.

2
00:00:08,550 --> 00:00:16,700
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.

3
00:00:17,100 --> 00:00:20,210
Et puis nous avons réellement besoin de créer le formulaire et ensuite nous allons le tester.

4
00:00:20,220 --> 00:00:22,250
Alors commençons à l'intérieur.

5
00:00:22,480 --> 00:00:26,420
Oui, nous allons ajouter deux routes et ces deux routes à nouveau.

6
00:00:26,460 --> 00:00:29,310
L'un est la requête GET et l'autre est une requête POST.

7
00:00:29,310 --> 00:00:33,320
Les deux seront slash log in tout comme nous l'avons fait pour le registre.

8
00:00:33,870 --> 00:00:37,470
Commençons donc par le formulaire et je ferai une autre note ici.

9
00:00:37,470 --> 00:01:00,050
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.

10
00:01:00,060 --> 00:01:01,630
Maintenant, créons cette forme.

11
00:01:01,680 --> 00:01:10,870
Donc, touchez utiliser slash logon Ejay nous et ensuite ouvrir que les vues slash log dans que E.J. Oui.

12
00:01:11,100 --> 00:01:11,850
Génial.

13
00:01:11,970 --> 00:01:19,540
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.

14
00:01:20,460 --> 00:01:26,470
Let's go à notre application et aller à slash log in et recevoir le modèle.

15
00:01:26,680 --> 00:01:34,980
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 à.

16
00:01:35,010 --> 00:01:38,410
Donc, nous allons ajouter que la dernière Let's juste aller avec les entrées à nouveau.

17
00:01:38,460 --> 00:01:59,460
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.

18
00:02:00,180 --> 00:02:11,400
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.

19
00:02:11,400 --> 00:02:23,720
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.

20
00:02:24,230 --> 00:02:35,980
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.

21
00:02:36,450 --> 00:02:43,320
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.

22
00:02:43,320 --> 00:02:44,580
Maintenant, nous allons jeter un oeil à elle.

23
00:02:44,850 --> 00:02:47,720
Actualisez la page que nous voyons le formulaire.

24
00:02:47,790 --> 00:02:54,790
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.

25
00:02:55,170 --> 00:03:04,170
Donc, nous allons revenir en arrière maintenant et ajouter le journal en route post et cette route sera responsable de la logique logique.

26
00:03:04,320 --> 00:03:30,110
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.

27
00:03:30,300 --> 00:03:34,420
Nous allons réellement le faire ici comme un deuxième argument.

28
00:03:34,560 --> 00:03:37,260
Alors permettez-moi de vous montrer à quoi ça ressemble tout d'abord, puis passez-y.

29
00:03:37,260 --> 00:03:51,970
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.

30
00:03:52,200 --> 00:03:58,170
Et à l'intérieur de ces accolades est un objet et nous allons passer en redirect succès.

31
00:03:58,170 --> 00:04:14,030
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.

32
00:04:14,030 --> 00:04:19,950
Donc, il prend ces deux arguments passeport qui authentifient local Et puis cet objet entier.

33
00:04:20,020 --> 00:04:26,940
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.

34
00:04:26,970 --> 00:04:28,970
Donc, nous allons simplement laisser le.

35
00:04:29,040 --> 00:04:31,030
Alors parlons maintenant de ce que nous avons fait ici.

36
00:04:31,350 --> 00:04:39,440
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.

37
00:04:40,050 --> 00:04:46,550
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.

38
00:04:46,590 --> 00:04:56,930
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.

39
00:04:57,270 --> 00:05:09,510
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.

40
00:05:09,510 --> 00:05:16,270
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.

41
00:05:16,590 --> 00:05:18,130
D'où le nom middleware.

42
00:05:18,420 --> 00:05:21,260
Encore une fois, nous allons créer notre propre middleware dans la prochaine vidéo.

43
00:05:21,420 --> 00:05:27,510
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.

44
00:05:27,550 --> 00:05:33,650
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.

45
00:05:33,840 --> 00:05:39,690
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.

46
00:05:39,750 --> 00:05:55,950
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 .

47
00:05:55,950 --> 00:05:58,740
Et puis nous fournissons un objet avec deux paramètres.

48
00:05:58,740 --> 00:06:02,290
Redirection réussie et redirection d'échec.

49
00:06:02,310 --> 00:06:10,410
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.

50
00:06:10,410 --> 00:06:27,370
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.

51
00:06:27,480 --> 00:06:28,710
Je soutiens local.

52
00:06:28,710 --> 00:06:30,490
Nous l'avons sauvé à la stratégie locale.

53
00:06:30,990 --> 00:06:41,710
Revenez donc à cette nouvelle stratégie locale, puis entrez entre parenthèses l'authentification par point et l'enregistrement.

54
00:06:41,790 --> 00:06:46,620
Nous créons donc une nouvelle stratégie locale en utilisant l'authentification de l'utilisateur.

55
00:06:46,770 --> 00:06:53,680
Cela vient des passeurs locaux de Passport donc nous n'avons pas vraiment à écrire la méthode d'authentification non plus.

56
00:06:53,850 --> 00:07:01,440
Cela est donné à nous et puis nous disons juste passeport pour l'utilisation stratégie locale que la version des données utilisateur authentifier.

57
00:07:01,800 --> 00:07:06,400
OK, maintenant nous avons configuré notre authentification devrait fonctionner.

58
00:07:06,470 --> 00:07:08,450
Donc, nous allons lui donner un coup de feu.

59
00:07:08,580 --> 00:07:10,480
Non vraiment oui.

60
00:07:10,570 --> 00:07:16,350
Et commençons par essayer de vous inscrire ou de vous connecter avec un compte que nous savons ne fonctionne pas.

61
00:07:16,350 --> 00:07:21,860
Connectez-vous et il vous ramène à la page de connexion et c'est ce que nous avions mis en place ici.

62
00:07:22,380 --> 00:07:24,900
Échec de redirection d'ouverture de session slash.

63
00:07:25,140 --> 00:07:33,650
Connectez-vous maintenant avec un compte que je connais fonctionne et cette fois-ci, il me mène à la page secrète.

64
00:07:34,260 --> 00:07:35,890
Donc nous avons maintenant ouvrir une session de travail.

65
00:07:36,120 --> 00:07:37,380
Nous n'avons toujours pas de déconnexion.

66
00:07:37,500 --> 00:07:43,470
Nous avons ouvert une session de travail afin que je puisse m'inscrire à l'aide de registre et ensuite ils peuvent également se connecter.