1 00:00:01,160 --> 00:00:04,610 ‫-: Jetzt ist es endlich an der Zeit, die Login-API zu 2 00:00:04,610 --> 00:00:06,830 ‫verwenden, die wir in den vorherigen 3 00:00:06,830 --> 00:00:09,100 ‫Abschnitten erstellt haben, und es gibt hier eine 4 00:00:09,100 --> 00:00:12,880 ‫Menge Dinge zu tun, um das Front-End mit dem Back-End interagieren zu lassen. 5 00:00:12,880 --> 00:00:15,680 ‫Und so machen wir das in getrennten Vorlesungen. 6 00:00:15,680 --> 00:00:17,833 ‫Wie auch immer, lass uns jetzt anfangen. 7 00:00:19,740 --> 00:00:21,570 ‫Und so wird es funktionieren. 8 00:00:21,570 --> 00:00:25,180 ‫Wir werden den Benutzern also erlauben, sich bei unserer 9 00:00:25,180 --> 00:00:28,990 ‫Website anzumelden, indem sie eine HTTP-Anfrage oder einen ATEX-Aufruf ausführen, 10 00:00:28,990 --> 00:00:31,580 ‫wie viele Leute es auch nennen. 11 00:00:31,580 --> 00:00:35,890 ‫Und wir führen diese HTTP-Anfrage an den Login-API-Endpunkt aus, die wir implementiert haben, 12 00:00:35,890 --> 00:00:38,340 ‫bevor wir die Daten verwenden, die 13 00:00:38,340 --> 00:00:41,820 ‫der Benutzer in diesem Formular bereitstellt, das wir hier haben. 14 00:00:41,820 --> 00:00:45,614 ‫Denken Sie also daran, dass unsere API dann ein 15 00:00:45,614 --> 00:00:49,010 ‫Cookie zurücksendet, das automatisch im Browser gespeichert wird. 16 00:00:49,010 --> 00:00:51,650 ‫Und wird auch bei jeder 17 00:00:51,650 --> 00:00:53,990 ‫weiteren Anfrage automatisch zurückgesendet. 18 00:00:53,990 --> 00:00:56,950 ‫Und wie Sie sehen werden, ist 19 00:00:56,950 --> 00:01:00,040 ‫dies ein grundlegender Schlüssel, damit unser Authentifizierungssystem funktioniert. 20 00:01:00,040 --> 00:01:01,940 ‫Aber wie auch 21 00:01:01,940 --> 00:01:04,518 ‫immer, da wir diese HTTP-Anfrage im 22 00:01:04,518 --> 00:01:09,220 ‫Browser durchführen, werden wir natürlich wieder auf der Client-Seite arbeiten. 23 00:01:09,220 --> 00:01:10,900 ‫Aber wie auch immer, 24 00:01:10,900 --> 00:01:13,570 ‫da wir eine HTTP-Anfrage im Browser ausführen, 25 00:01:13,570 --> 00:01:17,010 ‫werden wir weiterhin am Skriptcode für clientseitige Jobs arbeiten. 26 00:01:17,010 --> 00:01:20,410 ‫Also genau wie bei der Mapbox-Implementierung. 27 00:01:20,410 --> 00:01:21,570 ‫In Ordung? 28 00:01:21,570 --> 00:01:24,430 ‫Lassen Sie uns nun fortfahren und hier eine neue Datei erstellen. 29 00:01:24,430 --> 00:01:29,063 ‫Und das ist öffentlich, js und eine neue Datei, die ich 30 00:01:30,190 --> 00:01:33,030 ‫Login nennen werde. js und 31 00:01:33,960 --> 00:01:36,380 ‫im nächsten Video werden wir all 32 00:01:36,380 --> 00:01:38,260 ‫diese separaten JavaScript-Dateien, die 33 00:01:38,260 --> 00:01:40,630 ‫wir hier für das Frontend erstellen, 34 00:01:40,630 --> 00:01:42,970 ‫zu einem großen Bundle zusammenfassen. 35 00:01:42,970 --> 00:01:43,820 ‫In Ordung? 36 00:01:43,820 --> 00:01:47,240 ‫Aber jetzt konzentrieren wir uns eigentlich nur darauf, 37 00:01:47,240 --> 00:01:49,510 ‫dass diese Login-Funktionalität funktioniert. 38 00:01:49,510 --> 00:01:52,820 ‫Aber egal, fangen wir jetzt damit an, einen 39 00:01:52,820 --> 00:01:57,139 ‫Ereignis-Listener hinzuzufügen und auf das Sendeereignis in unserem Anmeldeformular zu warten, okay? 40 00:01:57,139 --> 00:02:01,260 ‫Unser Login-Formular hat also diese Formularklasse hier. 41 00:02:01,260 --> 00:02:04,307 ‫Okay, wählen wir nun dieses Element für 42 00:02:04,307 --> 00:02:07,820 ‫das Element aus und hören dann auf das Submit-Ereignis. 43 00:02:07,820 --> 00:02:10,430 ‫Ich hoffe, dass Sie mit dieser Art von 44 00:02:10,430 --> 00:02:12,510 ‫Logik im clientseitigen JavaScript vertraut sind. 45 00:02:12,510 --> 00:02:14,810 ‫Und so ist dies hoffentlich nichts Neues für Sie. 46 00:02:15,810 --> 00:02:19,193 ‫Also, dokumentieren. querySelector, den wir 47 00:02:20,260 --> 00:02:23,063 ‫verwenden, um basierend auf der Klasse auszuwählen. 48 00:02:24,940 --> 00:02:27,040 ‫Fügen Sie dann diesen Selector-Namen 49 00:02:27,040 --> 00:02:32,040 ‫hinzu und fügen Sie jetzt EventListener hinzu, der auf das Submit-Ereignis wartet. 50 00:02:32,940 --> 00:02:35,740 ‫Im Grunde also ein Ereignis, das der Browser immer 51 00:02:35,740 --> 00:02:39,363 ‫dann auslöst, wenn ein Benutzer auf die Schaltfläche zum Senden im Formular klickt. 52 00:02:40,220 --> 00:02:41,810 ‫Fügen Sie dann in 53 00:02:41,810 --> 00:02:46,123 ‫der Sammelfunktion hinzu, wir haben Zugriff auf das Ereignis selbst, okay? 54 00:02:47,680 --> 00:02:49,500 ‫Und so ist das dritte, was wir 55 00:02:49,500 --> 00:02:52,843 ‫tatsächlich tun, Ereignis zu sagen. Standard verhindern. 56 00:02:56,770 --> 00:02:57,750 ‫Okay? 57 00:02:57,750 --> 00:03:01,580 ‫Dadurch wird verhindert, dass das Formular eine andere Seite lädt. 58 00:03:01,580 --> 00:03:03,925 ‫Als nächstes rufen wir die E-Mail 59 00:03:03,925 --> 00:03:06,740 ‫und den Passwortwert ab, den der Benutzer eingibt. 60 00:03:06,740 --> 00:03:10,485 ‫In diesem Element sind dies also die 61 00:03:10,485 --> 00:03:13,310 ‫ID-E-Mail und das ID-Passwort, okay? 62 00:03:13,310 --> 00:03:15,020 ‫Also diese beiden 63 00:03:15,020 --> 00:03:18,114 ‫Eingabefelder und holen wir uns auch diese Daten. 64 00:03:18,114 --> 00:03:21,364 ‫(Eingabe auf einer Tastatur) Also Dokument, 65 00:03:24,933 --> 00:03:26,440 ‫Element nach ID 66 00:03:26,440 --> 00:03:27,933 ‫abrufen. 67 00:03:29,310 --> 00:03:32,230 ‫E-Mail, und dann verwenden wir die value-Eigenschaft, um 68 00:03:32,230 --> 00:03:34,670 ‫diesen Wert dort draußen zu erreichen. 69 00:03:34,670 --> 00:03:37,893 ‫Nicht nodeValue, nur Wert. 70 00:03:39,520 --> 00:03:42,930 ‫Lass uns diese Zeile duplizieren, okay? 71 00:03:42,930 --> 00:03:45,330 ‫Und jetzt lassen Sie uns das 72 00:03:45,330 --> 00:03:47,940 ‫eigentliche Einloggen in einer separaten Funktion durchführen, okay? 73 00:03:47,940 --> 00:03:49,880 ‫Jetzt bekommen wir hier 74 00:03:49,880 --> 00:03:53,040 ‫diesen eslint-Fehler und das liegt wieder daran, 75 00:03:53,040 --> 00:03:56,450 ‫dass wir eslint nur für nicht JS-Code konfiguriert haben. 76 00:03:56,450 --> 00:03:59,963 ‫Also lasst uns das tatsächlich deaktivieren, genau wie wir es hier getan haben. 77 00:04:01,340 --> 00:04:03,233 ‫Also schnapp dir einfach dieses Stück Code. 78 00:04:07,790 --> 00:04:08,630 ‫In Ordung? 79 00:04:08,630 --> 00:04:09,910 ‫Und nun, wie 80 00:04:09,910 --> 00:04:12,123 ‫gesagt, erstellen wir jetzt diese Login-Funktion. 81 00:04:15,270 --> 00:04:16,370 ‫Also und einfach 82 00:04:17,380 --> 00:04:19,120 ‫so, und diese Funktion wird eine 83 00:04:19,120 --> 00:04:20,520 ‫E-Mail und ein Passwort akzeptieren. 84 00:04:24,840 --> 00:04:25,770 ‫Und zunächst 85 00:04:25,770 --> 00:04:29,080 ‫einmal sehen wir, ob dieser Code tatsächlich funktioniert. 86 00:04:29,080 --> 00:04:30,533 ‫Wir werden also eine Warnung 87 00:04:31,560 --> 00:04:33,740 ‫ausgeben, also erstellen Sie im Grunde ein Warnungsfenster. 88 00:04:33,740 --> 00:04:36,563 ‫Und mit dieser E-Mail und diesem Passwort. 89 00:04:38,910 --> 00:04:39,743 ‫In Ordung? 90 00:04:42,920 --> 00:04:45,710 ‫Nun müssen wir diese Funktion natürlich 91 00:04:45,710 --> 00:04:49,300 ‫auch noch einmal mit E-Mail und Passwort aufrufen. 92 00:04:49,300 --> 00:04:54,300 ‫Und schließlich müssen wir diese Login-Datei auch in 93 00:04:54,600 --> 00:04:58,370 ‫unser Basis-Template aufnehmen, in Ordnung? 94 00:04:58,370 --> 00:05:00,600 ‫Und wieder, wie ich eingangs sagte, 95 00:05:00,600 --> 00:05:02,340 ‫werden wir im 96 00:05:02,340 --> 00:05:04,640 ‫nächsten Video all diesen Front-End-Code hier 97 00:05:04,640 --> 00:05:06,423 ‫in einer großen JavaScript-Datei bündeln. 98 00:05:07,820 --> 00:05:08,653 ‫In Ordung? 99 00:05:08,653 --> 00:05:10,810 ‫Das ist also viel besser für 100 00:05:10,810 --> 00:05:14,143 ‫die Leistung und auch für uns selbst eine bessere Entwicklererfahrung. 101 00:05:15,250 --> 00:05:18,330 ‫Auf jeden Fall sollte das jetzt funktionieren. 102 00:05:18,330 --> 00:05:20,093 ‫Laden wir diese Seite hier einfach neu. 103 00:05:25,783 --> 00:05:27,620 ‫Also muss ich hier sowieso 104 00:05:27,620 --> 00:05:30,563 ‫ausfüllen, validieren, Chrome erlaubt mir nicht einmal, das Formular abzuschicken. 105 00:05:32,920 --> 00:05:35,100 ‫In Ordnung, hier erhalten wir also unsere 106 00:05:35,100 --> 00:05:37,020 ‫Benachrichtigung mit der E-Mail, die wir 107 00:05:37,020 --> 00:05:38,860 ‫gerade eingegeben haben, und dann wird 108 00:05:38,860 --> 00:05:40,080 ‫das Passwort wohl 109 00:05:40,080 --> 00:05:42,983 ‫nicht angezeigt, weil wir dort zwei Werte angegeben haben. 110 00:05:46,140 --> 00:05:50,470 ‫Lassen Sie uns stattdessen hier ein Objekt angeben und sehen, ob es 111 00:05:50,470 --> 00:05:52,020 ‫dann wieder funktioniert. 112 00:05:54,072 --> 00:05:57,322 ‫(Tippen auf einer Tastatur) Nun, ich denke, es 113 00:06:03,770 --> 00:06:05,410 ‫versucht, dieses Objekt 114 00:06:05,410 --> 00:06:07,473 ‫hier in eine Zeichenfolge umzuwandeln. 115 00:06:08,400 --> 00:06:11,530 ‫Okay, aber das spielt hier keine Rolle. 116 00:06:11,530 --> 00:06:15,573 ‫Normalerweise bin ich es gewohnt, Konsole zu verwenden. log statt alarmieren. 117 00:06:16,530 --> 00:06:17,900 ‫In Ordung? 118 00:06:17,900 --> 00:06:20,960 ‫Aber wie auch immer, ich bin mir sicher, dass es jetzt hier funktioniert. 119 00:06:20,960 --> 00:06:23,783 ‫Lassen Sie uns nun diese Funktion erstellen. 120 00:06:24,640 --> 00:06:28,910 ‫Um diese HTTP-Anforderungen für die Anmeldung auszuführen, verwenden 121 00:06:28,910 --> 00:06:29,890 ‫wir 122 00:06:29,890 --> 00:06:34,130 ‫eine sehr beliebte Bibliothek namens Axios, okay? 123 00:06:34,130 --> 00:06:36,430 ‫Und im nächsten Video werden wir 124 00:06:36,430 --> 00:06:39,460 ‫diese Bibliothek tatsächlich von NPM herunterladen und mit all 125 00:06:39,460 --> 00:06:41,000 ‫unseren anderen Skripten bündeln, 126 00:06:41,000 --> 00:06:43,713 ‫aber jetzt verwenden wir sie von einem CDN. 127 00:06:45,240 --> 00:06:48,860 ‫Also, lassen Sie uns einfach Google 128 00:06:48,860 --> 00:06:52,260 ‫Axios CDN, in Ordnung? 129 00:06:52,260 --> 00:06:55,513 ‫Dann kopieren Sie dieses hier und 130 00:06:57,650 --> 00:06:59,403 ‫dann in 131 00:07:00,610 --> 00:07:04,583 ‫unserem Basisskript direkt hier beim ersten, in Ordnung? 132 00:07:06,230 --> 00:07:07,300 ‫Dadurch wird 133 00:07:07,300 --> 00:07:10,080 ‫dann ein Axios-Objekt dem globalen Geltungsbereich 134 00:07:10,080 --> 00:07:14,500 ‫ausgesetzt, das wir dann in unserer Anmeldefunktion verwenden können, okay? 135 00:07:14,500 --> 00:07:17,123 ‫Und so können wir dann jetzt Axios 136 00:07:18,000 --> 00:07:21,003 ‫sagen und dann die Optionen für unsere Anfrage übergeben. 137 00:07:22,320 --> 00:07:26,380 ‫Nehmen wir also zunächst einmal an, dass wir eine Post-Anfrage durchführen. 138 00:07:26,380 --> 00:07:28,593 ‫Dann brauchen wir eine URL. 139 00:07:29,770 --> 00:07:31,140 ‫In Ordung? 140 00:07:31,140 --> 00:07:33,313 ‫Also holen wir uns das tatsächlich von Postman. 141 00:07:39,530 --> 00:07:41,543 ‫Das ist also unsere URL hier. 142 00:07:43,250 --> 00:07:45,040 ‫Und natürlich werden 143 00:07:45,040 --> 00:07:47,853 ‫wir dort auch den Host anhängen. 144 00:07:49,400 --> 00:07:52,910 ‫Also hier ist es natürlich http und dann im 145 00:07:55,440 --> 00:07:57,093 ‫Grunde ein lokaler Host. 146 00:08:01,250 --> 00:08:02,530 ‫Dies ist 147 00:08:02,530 --> 00:08:05,260 ‫also unsere Login-Eingabe, und jetzt müssen wir 148 00:08:05,260 --> 00:08:07,490 ‫die Daten angeben, die wir 149 00:08:07,490 --> 00:08:10,473 ‫zusammen mit der Anfrage im Hauptteil senden. 150 00:08:13,040 --> 00:08:13,873 ‫In Ordung? 151 00:08:13,873 --> 00:08:17,870 ‫Und das ist E-Mail: E-Mail. 152 00:08:17,870 --> 00:08:21,600 ‫Wie Sie bereits wissen, können wir diese E-Mail entfernen. 153 00:08:21,600 --> 00:08:22,433 ‫Okay? 154 00:08:22,433 --> 00:08:24,810 ‫Es wird hier also E-Mail genannt, 155 00:08:24,810 --> 00:08:29,210 ‫weil unser Endpunkt erwartet, dass die Daten als E-Mail bezeichnet werden, oder? 156 00:08:29,210 --> 00:08:31,250 ‫Das ist es, was wir hier im Körper haben. 157 00:08:31,250 --> 00:08:33,997 ‫Wir müssen eine Eigenschaft namens email und 158 00:08:33,997 --> 00:08:35,790 ‫eine namens password angeben. 159 00:08:35,790 --> 00:08:37,830 ‫Und genau das machen wir 160 00:08:37,830 --> 00:08:41,630 ‫hier, aber es hat dann den gleichen Namen wie dieser Parameter hier. 161 00:08:41,630 --> 00:08:44,030 ‫Es genügt also, einfach E-Mail 162 00:08:45,000 --> 00:08:48,123 ‫zu sagen und dasselbe gilt für das Passwort. 163 00:08:49,720 --> 00:08:50,760 ‫Okay? 164 00:08:50,760 --> 00:08:53,350 ‫Axios gibt hier dann ein Promise zurück, 165 00:08:53,350 --> 00:08:55,890 ‫also verwenden wir tatsächlich ein einzelnes 166 00:08:55,890 --> 00:08:59,210 ‫Await, um darauf zu warten, dass dieser Wert zurückkommt. 167 00:08:59,210 --> 00:09:04,210 ‫Also warte hier und dann asynchron hier. 168 00:09:05,110 --> 00:09:07,950 ‫Denken Sie daran, dass dies clientseitiger Code ist 169 00:09:07,950 --> 00:09:09,750 ‫und nur die moderneren 170 00:09:09,750 --> 00:09:12,290 ‫Browser tatsächlich eine einzelne Wait-Funktion ausführen können, 171 00:09:12,290 --> 00:09:15,573 ‫aber in diesem Kurs werde ich nicht wirklich darauf eingehen. 172 00:09:17,130 --> 00:09:18,310 ‫Okay? 173 00:09:18,310 --> 00:09:22,510 ‫Wie auch immer, speichern wir das Ergebnis in Erwartung 174 00:09:22,510 --> 00:09:25,640 ‫der Zusage in der Ergebnisvariablen. 175 00:09:25,640 --> 00:09:28,623 ‫Und dann, um einen Blick auf das Ergebnis zu 176 00:09:30,000 --> 00:09:33,453 ‫werfen, sagen wir Konsole. Ergebnis protokollieren. 177 00:09:34,500 --> 00:09:35,333 ‫Okay? 178 00:09:35,333 --> 00:09:37,870 ‫Eine Sache, die ich an Axios wirklich mag, 179 00:09:37,870 --> 00:09:40,240 ‫ist die Tatsache, dass es immer dann 180 00:09:40,240 --> 00:09:43,780 ‫einen Fehler ausgibt, wenn wir einen Fehler von unserer API-Eingabe zurückbekommen. 181 00:09:43,780 --> 00:09:46,480 ‫Nehmen wir an, es gibt ein falsches Passwort 182 00:09:46,480 --> 00:09:48,980 ‫und der Server sendet eine 403 zurück, also 183 00:09:48,980 --> 00:09:50,610 ‫im Grunde einen Fehler. 184 00:09:50,610 --> 00:09:52,768 ‫Wenn also ein Fehler auftritt, 185 00:09:52,768 --> 00:09:55,290 ‫löst Axios auch einen Fehler aus. 186 00:09:55,290 --> 00:09:58,680 ‫Das ist sehr praktisch, denn damit können wir 187 00:09:58,680 --> 00:10:00,763 ‫jetzt einen try-catch-Block verwenden. 188 00:10:02,660 --> 00:10:03,493 ‫Okay? 189 00:10:03,493 --> 00:10:05,840 ‫Also im Grunde, um hier auf der Client-Seite 190 00:10:05,840 --> 00:10:07,173 ‫eine Fehlerbehandlung durchzuführen. 191 00:10:08,750 --> 00:10:09,770 ‫Wenn der Benutzer 192 00:10:09,770 --> 00:10:12,090 ‫zum Beispiel richtig eingeloggt ist, möchten Sie 193 00:10:12,090 --> 00:10:14,375 ‫eine Nachricht anzeigen, die dies sagt, und 194 00:10:14,375 --> 00:10:16,470 ‫vielleicht eine andere Logik, aber wenn 195 00:10:16,470 --> 00:10:19,540 ‫nicht, nun, dann werden wir in den Catch-Block eintreten 196 00:10:19,540 --> 00:10:20,543 ‫und 197 00:10:21,770 --> 00:10:26,093 ‫können dann , führen Sie basierend auf dem Fehler eine andere Aktion aus. 198 00:10:27,022 --> 00:10:30,272 ‫(Tippen auf einer Tastatur) Sehen wir uns 199 00:10:31,670 --> 00:10:34,023 ‫also auch den Fehler an. 200 00:10:37,480 --> 00:10:42,120 ‫Und nur um sicher zu gehen, möchte ich auch die E-Mail und das 201 00:10:43,200 --> 00:10:45,253 ‫Passwort in der Konsole protokollieren. 202 00:10:49,130 --> 00:10:51,583 ‫Also, lass uns das hier versuchen. 203 00:10:52,430 --> 00:10:53,663 ‫Laden Sie 204 00:10:55,249 --> 00:10:58,499 ‫unsere Seite neu, (tippen Sie auf einer Tastatur) Und 205 00:11:02,240 --> 00:11:05,160 ‫ich gebe jetzt ein falsches Passwort ein, okay? 206 00:11:05,160 --> 00:11:06,993 ‫Test eins, zwei, drei, vier, fünf. 207 00:11:09,100 --> 00:11:12,070 ‫Werfen wir auch hier einen Blick auf unsere Konsole. 208 00:11:12,070 --> 00:11:15,740 ‫Und wir bekommen diesen Fehler hier von mapbox, js, aber machen 209 00:11:15,740 --> 00:11:17,330 ‫Sie sich keine Sorgen. 210 00:11:17,330 --> 00:11:19,430 ‫Wir werden das etwas später noch einmal beheben. 211 00:11:21,848 --> 00:11:24,890 ‫Aber jetzt schauen wir uns an, was hier passiert. 212 00:11:24,890 --> 00:11:28,900 ‫Und hier bekommen wir einen netten Fehler, in Ordnung? 213 00:11:28,900 --> 00:11:32,670 ‫Also, wenn wir uns das hier ansehen müssen, ist das 214 00:11:32,670 --> 00:11:34,253 ‫ein Irrtum. Antwort. 215 00:11:36,630 --> 00:11:38,910 ‫Und dann Punktdaten. 216 00:11:38,910 --> 00:11:42,550 ‫Okay, und Sie finden dies hier in der Axios-Dokumentation, falls 217 00:11:42,550 --> 00:11:45,113 ‫Sie sich fragen, woher das kommt. 218 00:11:46,660 --> 00:11:47,493 ‫In Ordung? 219 00:11:49,290 --> 00:11:52,140 ‫Lassen Sie mich diese E-Mail eigentlich einfach kopieren, 220 00:11:53,450 --> 00:11:56,713 ‫weil es nicht so gut ist, sie immer manuell zu schreiben. 221 00:12:00,200 --> 00:12:04,263 ‫Und jetzt bekommen wir hier tatsächlich einen schön formatierten Fehler. 222 00:12:05,440 --> 00:12:06,273 ‫Okay? 223 00:12:06,273 --> 00:12:08,810 ‫Und das ist im Grunde genau der jsencode, 224 00:12:08,810 --> 00:12:11,310 ‫den wir von unserem Server zurückgeschickt haben. 225 00:12:11,310 --> 00:12:12,143 ‫Rechts? 226 00:12:12,143 --> 00:12:13,320 ‫Dies ist also genau 227 00:12:13,320 --> 00:12:15,220 ‫das gleiche, wie wir es in Postman gesehen haben. 228 00:12:15,220 --> 00:12:20,220 ‫Wir erhalten also unseren gesamten Fehler, die Nachricht und auch den Stack. 229 00:12:20,270 --> 00:12:23,420 ‫Wir sehen also, dass wir wahrscheinlich aus irgendeinem Grund die 230 00:12:23,420 --> 00:12:26,523 ‫E-Mail-Adresse und das Passwort nicht richtig angegeben haben. 231 00:12:27,550 --> 00:12:30,330 ‫Also gehen wir zurück, schauen wir uns an. 232 00:12:30,330 --> 00:12:34,230 ‫Oh, also habe ich hier etwas Seltsames gemacht, wo ich ein Objekt 233 00:12:34,230 --> 00:12:36,230 ‫sowohl mit der E-Mail als auch 234 00:12:36,230 --> 00:12:38,003 ‫mit dem Passwort übergeben habe. 235 00:12:38,980 --> 00:12:41,060 ‫Und ich denke, das ist von früher, als 236 00:12:41,060 --> 00:12:42,900 ‫es versucht hat, diese Warnung auszulösen, 237 00:12:42,900 --> 00:12:45,670 ‫und ich glaube, ich habe dies an der falschen Stelle getan. 238 00:12:45,670 --> 00:12:49,570 ‫Und deshalb haben wir hier eigentlich undefiniert gesehen. 239 00:12:49,570 --> 00:12:51,260 ‫Und hier haben wir dieses Objekt. 240 00:12:51,260 --> 00:12:53,820 ‫Im Grunde war die E-Mail also dieses gesamte Objekt, 241 00:12:53,820 --> 00:12:56,023 ‫und das Passwort war dann so undefiniert. 242 00:12:58,290 --> 00:12:59,123 ‫Okay? 243 00:12:59,123 --> 00:13:01,400 ‫Jetzt sollte dies das Problem beheben, laden 244 00:13:01,400 --> 00:13:02,613 ‫Sie es neu. 245 00:13:07,930 --> 00:13:10,760 ‫Ah, jetzt bekommen wir diesen richtigen Fehler, den 246 00:13:10,760 --> 00:13:12,500 ‫wir eigentlich erwartet hatten. 247 00:13:12,500 --> 00:13:15,580 ‫Jetzt ist es also eine falsche E-Mail oder ein 248 00:13:15,580 --> 00:13:18,880 ‫falsches Passwort, weil ich ein falsches Passwort angegeben habe, in Ordnung? 249 00:13:18,880 --> 00:13:21,441 ‫Aber jetzt entfernen wir tatsächlich die Fünf 250 00:13:21,441 --> 00:13:24,973 ‫und dann sollte Test eins, zwei, drei, vier richtig sein. 251 00:13:25,860 --> 00:13:28,010 ‫Melden wir uns 252 00:13:28,010 --> 00:13:31,810 ‫also an, und jetzt erhalten wir eine 200-Antwort. 253 00:13:31,810 --> 00:13:33,253 ‫Also ein erfolgreicher. 254 00:13:34,290 --> 00:13:35,890 ‫Also lass uns das 255 00:13:35,890 --> 00:13:39,410 ‫öffnen und was uns eigentlich interessiert, sind die Daten. 256 00:13:39,410 --> 00:13:42,030 ‫Also im Grunde Antwort. data, denn 257 00:13:42,030 --> 00:13:43,260 ‫dort 258 00:13:43,260 --> 00:13:46,960 ‫befindet sich dann eigentlich unsere jsen-Antwort. 259 00:13:46,960 --> 00:13:48,653 ‫Hier erhalten wir also 260 00:13:50,210 --> 00:13:55,210 ‫diese Daten hier, und wir erhalten auch den Status und das Token. 261 00:13:55,410 --> 00:13:59,030 ‫Dies ist also unser korrektes jsen-Webtoken, das 262 00:13:59,030 --> 00:14:01,550 ‫diesem angemeldeten Benutzer entspricht. 263 00:14:01,550 --> 00:14:03,170 ‫Was jetzt wirklich interessant 264 00:14:03,170 --> 00:14:05,400 ‫ist, ist ein Blick auf unsere Cookies. 265 00:14:05,400 --> 00:14:07,540 ‫Und das tun wir in Google Chrome zumindest, 266 00:14:07,540 --> 00:14:09,560 ‫indem Sie hier auf dieses Symbol 267 00:14:09,560 --> 00:14:12,180 ‫klicken und dann hier unten, Sie haben die Cookies. 268 00:14:12,180 --> 00:14:14,900 ‫Und es sagt auch, dass unsere Verbindung nicht 269 00:14:14,900 --> 00:14:15,940 ‫sicher ist, 270 00:14:15,940 --> 00:14:19,330 ‫und das liegt einfach daran, dass wir derzeit kein 271 00:14:19,330 --> 00:14:20,920 ‫HTTPS verwenden, aber egal. 272 00:14:20,920 --> 00:14:23,530 ‫Wichtig ist hier, dass wir jetzt dieses 273 00:14:24,630 --> 00:14:27,620 ‫Cookie haben und tatsächlich heißt es jsen web token, 274 00:14:27,620 --> 00:14:31,060 ‫und es hat genau das jsen web token, das wir 275 00:14:31,060 --> 00:14:32,203 ‫hier unten sehen. 276 00:14:33,360 --> 00:14:36,620 ‫Dies ist also im Grunde nur das Ende der 277 00:14:36,620 --> 00:14:40,710 ‫Zeichenfolge, also sehen Sie, dass dies dem entspricht, was wir hier unten haben. 278 00:14:40,710 --> 00:14:43,560 ‫Und es ist dieses Cookie hier, das es uns 279 00:14:43,560 --> 00:14:46,030 ‫tatsächlich ermöglicht, diese gesamte Authentifizierung aufzubauen. 280 00:14:46,030 --> 00:14:49,000 ‫Auch hier, weil der Browser dieses Cookie nicht 281 00:14:49,000 --> 00:14:51,470 ‫bei jeder neuen Anfrage mitsendet. 282 00:14:51,470 --> 00:14:55,070 ‫Und lassen Sie mich es Ihnen in unserem Backend zeigen. 283 00:14:55,070 --> 00:14:59,930 ‫Kehren wir also dorthin zurück und gehen wir zur App. js. 284 00:14:59,930 --> 00:15:02,320 ‫Und jetzt sind wir wieder bei unserer Notiz, 285 00:15:02,320 --> 00:15:03,943 ‫oder eigentlich bei unserem Express-Code. 286 00:15:05,320 --> 00:15:07,360 ‫Nun, um tatsächlich Zugriff auf die Cookies 287 00:15:07,360 --> 00:15:09,690 ‫zu erhalten, die in unserer Anfrage enthalten sind. 288 00:15:09,690 --> 00:15:13,050 ‫In Express müssen wir eine bestimmte Middleware installieren. 289 00:15:13,050 --> 00:15:16,630 ‫Also müssen wir das aus einem NPM-Paket installieren. 290 00:15:16,630 --> 00:15:19,960 ‫Und so ist das wieder, kommen Sie zu 291 00:15:19,960 --> 00:15:21,550 ‫unserem anderen Terminal 292 00:15:22,660 --> 00:15:25,313 ‫und installieren Sie dann NPM den Cookie-Parser. 293 00:15:26,210 --> 00:15:27,043 ‫Okay? 294 00:15:27,043 --> 00:15:29,380 ‫Im Grunde analysiert dieses Paket also alle 295 00:15:29,380 --> 00:15:31,653 ‫Cookies aus der eingehenden Anfrage. 296 00:15:37,360 --> 00:15:38,193 ‫CookieParser. 297 00:15:44,600 --> 00:15:45,680 ‫In Ordung? 298 00:15:45,680 --> 00:15:50,377 ‫Und jetzt verwenden wir es in der Nähe dieses Body-Parsers. 299 00:15:54,770 --> 00:15:56,003 ‫Okay? 300 00:15:56,003 --> 00:15:57,050 ‫Diese beiden sind sich also sehr ähnlich. 301 00:15:57,050 --> 00:15:59,750 ‫Diese erste parst die Daten aus dem 302 00:15:59,750 --> 00:16:03,070 ‫Body und die zweite parst die Daten aus Cookies. 303 00:16:03,070 --> 00:16:06,600 ‫Und jetzt, wenn wir in dieser Middleware hier sind, 304 00:16:06,600 --> 00:16:09,803 ‫können wir request. Kekse. 305 00:16:11,470 --> 00:16:13,080 ‫Und so werden wir 306 00:16:13,080 --> 00:16:16,593 ‫jetzt bei jeder Anfrage immer alle Cookies in der Konsole anzeigen. 307 00:16:19,360 --> 00:16:22,440 ‫Also, wenn wir jetzt diese Seite neu laden, oder wirklich 308 00:16:22,440 --> 00:16:24,490 ‫jede andere Seite, und so lasst 309 00:16:24,490 --> 00:16:27,283 ‫mich diese hier einfach in einem neuen Tab öffnen. 310 00:16:29,780 --> 00:16:33,420 ‫Wenn wir jetzt zurückgehen, sollten wir das Cookie hier sehen. 311 00:16:33,420 --> 00:16:35,820 ‫Und tatsächlich, hier ist es. 312 00:16:35,820 --> 00:16:38,810 ‫Dies ist also das Cookie, das gerade 313 00:16:38,810 --> 00:16:42,960 ‫durch das Laden dieser Seite im Browser an unsere Anwendung gesendet wurde. 314 00:16:42,960 --> 00:16:44,223 ‫Und wenn ich 315 00:16:45,710 --> 00:16:49,710 ‫das noch einmal mache, wirst du noch einen sehen, oder? 316 00:16:49,710 --> 00:16:51,120 ‫Hier ist es also. 317 00:16:51,120 --> 00:16:54,790 ‫Und so können wir dies jetzt nutzen, um unsere Route zu schützen. 318 00:16:54,790 --> 00:16:56,863 ‫Okay, also probieren wir es aus. 319 00:16:58,860 --> 00:16:59,693 ‫Okay? 320 00:16:59,693 --> 00:17:01,070 ‫Aber bevor wir 321 00:17:01,070 --> 00:17:03,080 ‫das tun können, müssen wir 322 00:17:03,080 --> 00:17:05,770 ‫das in unserem Off-Controller auch hier hinzufügen. 323 00:17:05,770 --> 00:17:08,840 ‫Im Moment lesen wir also nur das jsen-Webtoken 324 00:17:08,840 --> 00:17:10,503 ‫aus dem Autorisierungsheader. 325 00:17:11,390 --> 00:17:12,223 ‫Rechts? 326 00:17:12,223 --> 00:17:15,230 ‫Und nur, wenn sie mit diesem Träger anfangen, ja? 327 00:17:15,230 --> 00:17:17,170 ‫Also für das Inhaber-Token. 328 00:17:17,170 --> 00:17:19,640 ‫Nun wollen wir aber grundsätzlich auch den 329 00:17:19,640 --> 00:17:21,970 ‫jsen-Webtoken aus einem Cookie auslesen. 330 00:17:21,970 --> 00:17:25,633 ‫Was wir hier also tun können, ist im Grunde ein else if, 331 00:17:27,870 --> 00:17:30,860 ‫also wenn kein Token im Autorisierungsheader war, nun, dann 332 00:17:30,860 --> 00:17:33,333 ‫werfen wir einen Blick auf die Cookies. 333 00:17:34,170 --> 00:17:36,807 ‫Also beantragen. Kekse. jsen-Webtoken. 334 00:17:36,807 --> 00:17:39,520 ‫Also JWT, das ist der Name 335 00:17:39,520 --> 00:17:42,550 ‫des Cookies, und daher gibt es im 336 00:17:42,550 --> 00:17:45,110 ‫Cookies-Objekt eine Eigenschaft namens JWT. 337 00:17:45,110 --> 00:17:47,137 ‫Also das hier, oder? 338 00:17:49,120 --> 00:17:51,280 ‫Wenn dies also 339 00:17:51,280 --> 00:17:55,080 ‫existiert, dann sollte das Token genau das sein. 340 00:17:55,080 --> 00:17:58,040 ‫Also beantragen. Kekse. jwt. 341 00:17:58,040 --> 00:17:58,873 ‫Okay. 342 00:18:00,117 --> 00:18:00,950 ‫Damit sind wir jetzt auch 343 00:18:02,085 --> 00:18:03,593 ‫in der Lage, Benutzer anhand von Token zu authentifizieren, die über 344 00:18:05,590 --> 00:18:06,840 ‫Cookies gesendet werden, und nicht nur über den Autorisierungs-Header. 345 00:18:06,840 --> 00:18:10,400 ‫Groß. 346 00:18:10,400 --> 00:18:13,210 ‫Und nur um das auszuprobieren, lasst uns tatsächlich 347 00:18:13,210 --> 00:18:15,780 ‫eine unserer Routen hier im Blick schützen. 348 00:18:15,780 --> 00:18:16,613 ‫Und das werde ich mit dieser Tour-Detailseite tun, okay? 349 00:18:16,613 --> 00:18:18,580 ‫Das ist also nur 350 00:18:18,580 --> 00:18:22,610 ‫zum Testen, weil es natürlich nicht viel Sinn macht, 351 00:18:22,610 --> 00:18:27,170 ‫aber ich wollte Ihnen nur zeigen, dass unser Login so wie 352 00:18:27,170 --> 00:18:29,460 ‫es jetzt ist bereits funktioniert. 353 00:18:29,460 --> 00:18:31,920 ‫Lassen Sie uns den authController hier importieren. 354 00:18:31,920 --> 00:18:33,800 ‫(tippen auf einer Tastatur) Und 355 00:18:33,800 --> 00:18:36,723 ‫dann, wie zuvor, hier in diese Route editieren. 356 00:18:37,860 --> 00:18:39,993 ‫Also authController. beschützen. 357 00:18:41,708 --> 00:18:44,958 ‫Und das ist an dieser Stelle also nichts Neues. 358 00:18:49,884 --> 00:18:54,860 ‫Und nur wenn der Benutzer eingeloggt ist, können wir 359 00:18:54,860 --> 00:18:58,770 ‫zur getTour gehen. 360 00:18:58,770 --> 00:19:00,930 ‫Groß. 361 00:19:00,930 --> 00:19:03,200 ‫Was ich jetzt tun werde, ist dieses Cookie zunächst grundsätzlich zu löschen, 362 00:19:03,200 --> 00:19:04,993 ‫nur um Ihnen zu zeigen, was passiert, wenn ein 363 00:19:06,400 --> 00:19:07,233 ‫nicht eingeloggter Benutzer 364 00:19:08,460 --> 00:19:09,710 ‫jetzt versucht, auf diese Route zuzugreifen. 365 00:19:09,710 --> 00:19:12,450 ‫Wenn wir also dieses Cookie entfernen, ist es im Grunde so, als 366 00:19:12,450 --> 00:19:13,850 ‫ob wir den Benutzer abmelden, oder? 367 00:19:13,850 --> 00:19:17,293 ‫Wenn Sie sich jetzt also unsere Touren anschauen, 368 00:19:18,180 --> 00:19:20,950 ‫dann sollte das ganz gut aussehen. 369 00:19:20,950 --> 00:19:24,563 ‫Wenn wir jedoch jetzt versuchen, auf diese Seite 370 00:19:25,730 --> 00:19:28,970 ‫zuzugreifen, sollten wir eine Fehlermeldung erhalten. 371 00:19:28,970 --> 00:19:30,653 ‫Und tatsächlich steht es da, dass Sie nicht eingeloggt sind. 372 00:19:31,700 --> 00:19:34,090 ‫Meinetwegen. 373 00:19:34,090 --> 00:19:35,580 ‫Gehen wir also zurück und melden uns tatsächlich an. 374 00:19:35,580 --> 00:19:39,443 ‫Okay? 375 00:19:40,640 --> 00:19:41,550 ‫Auf geht's. 376 00:19:41,550 --> 00:19:44,903 ‫Und dann werden wir in Zukunft natürlich auch hier ein paar Warnfenster 377 00:19:50,833 --> 00:19:51,666 ‫und all 378 00:19:51,666 --> 00:19:52,610 ‫den guten Kram implementieren. 379 00:19:52,610 --> 00:19:53,550 ‫Aber jetzt lassen Sie es uns noch einmal einfach zum Laufen bringen. 380 00:19:53,550 --> 00:19:55,570 ‫Sie sehen also, dass 381 00:19:55,570 --> 00:19:58,800 ‫wir hier wieder unseren netten Keks haben, okay? 382 00:19:58,800 --> 00:20:02,380 ‫Versuchen wir nun, auf diese geschützte Route zuzugreifen. 383 00:20:02,380 --> 00:20:04,240 ‫Und tatsächlich, jetzt funktioniert es. 384 00:20:04,240 --> 00:20:08,550 ‫Fantastisch, das ist schon richtig toll, oder? 385 00:20:08,550 --> 00:20:12,163 ‫Im Idealfall möchten wir nun, wenn ein Benutzer eingeloggt 386 00:20:13,370 --> 00:20:16,050 ‫ist, diese Schaltflächen nicht hier 387 00:20:16,050 --> 00:20:20,250 ‫anzeigen, sondern wie ein Benutzermenü oder ein Bild des Benutzers. 388 00:20:20,250 --> 00:20:22,800 ‫Im Grunde zeigt sich 389 00:20:22,800 --> 00:20:26,770 ‫also, dass der Benutzer tatsächlich angemeldet ist, oder? 390 00:20:26,770 --> 00:20:31,240 ‫Lassen Sie uns dies im nächsten Video tun, zusammen mit dem Bündeln 391 00:20:31,240 --> 00:20:32,650 ‫all unserer JavaScript-Dateien 392 00:20:32,650 --> 00:20:35,545 ‫im Front-End, wie ich zuvor erklärt habe. 393 00:20:35,545 --> 00:20:38,090 ‫Also warte nicht, lass uns gleich zum nächsten übergehen. 394 00:20:38,090 --> 00:20:41,220 ‫Wir sehen uns dort.