‫-: Jetzt ist es endlich an der Zeit, die Login-API zu
‫verwenden, die wir in den vorherigen
‫Abschnitten erstellt haben, und es gibt hier eine
‫Menge Dinge zu tun, um das Front-End mit dem Back-End interagieren zu lassen.
‫Und so machen wir das in getrennten Vorlesungen.
‫Wie auch immer, lass uns jetzt anfangen.
‫Und so wird es funktionieren.
‫Wir werden den Benutzern also erlauben, sich bei unserer
‫Website anzumelden, indem sie eine HTTP-Anfrage oder einen ATEX-Aufruf ausführen,
‫wie viele Leute es auch nennen.
‫Und wir führen diese HTTP-Anfrage an den Login-API-Endpunkt aus, die wir implementiert haben,
‫bevor wir die Daten verwenden, die
‫der Benutzer in diesem Formular bereitstellt, das wir hier haben.
‫Denken Sie also daran, dass unsere API dann ein
‫Cookie zurücksendet, das automatisch im Browser gespeichert wird.
‫Und wird auch bei jeder
‫weiteren Anfrage automatisch zurückgesendet.
‫Und wie Sie sehen werden, ist
‫dies ein grundlegender Schlüssel, damit unser Authentifizierungssystem funktioniert.
‫Aber wie auch
‫immer, da wir diese HTTP-Anfrage im
‫Browser durchführen, werden wir natürlich wieder auf der Client-Seite arbeiten.
‫Aber wie auch immer,
‫da wir eine HTTP-Anfrage im Browser ausführen,
‫werden wir weiterhin am Skriptcode für clientseitige Jobs arbeiten.
‫Also genau wie bei der Mapbox-Implementierung.
‫In Ordung?
‫Lassen Sie uns nun fortfahren und hier eine neue Datei erstellen.
‫Und das ist öffentlich, js und eine neue Datei, die ich
‫Login nennen werde. js und
‫im nächsten Video werden wir all
‫diese separaten JavaScript-Dateien, die
‫wir hier für das Frontend erstellen,
‫zu einem großen Bundle zusammenfassen.
‫In Ordung?
‫Aber jetzt konzentrieren wir uns eigentlich nur darauf,
‫dass diese Login-Funktionalität funktioniert.
‫Aber egal, fangen wir jetzt damit an, einen
‫Ereignis-Listener hinzuzufügen und auf das Sendeereignis in unserem Anmeldeformular zu warten, okay?
‫Unser Login-Formular hat also diese Formularklasse hier.
‫Okay, wählen wir nun dieses Element für
‫das Element aus und hören dann auf das Submit-Ereignis.
‫Ich hoffe, dass Sie mit dieser Art von
‫Logik im clientseitigen JavaScript vertraut sind.
‫Und so ist dies hoffentlich nichts Neues für Sie.
‫Also, dokumentieren. querySelector, den wir
‫verwenden, um basierend auf der Klasse auszuwählen.
‫Fügen Sie dann diesen Selector-Namen
‫hinzu und fügen Sie jetzt EventListener hinzu, der auf das Submit-Ereignis wartet.
‫Im Grunde also ein Ereignis, das der Browser immer
‫dann auslöst, wenn ein Benutzer auf die Schaltfläche zum Senden im Formular klickt.
‫Fügen Sie dann in
‫der Sammelfunktion hinzu, wir haben Zugriff auf das Ereignis selbst, okay?
‫Und so ist das dritte, was wir
‫tatsächlich tun, Ereignis zu sagen. Standard verhindern.
‫Okay?
‫Dadurch wird verhindert, dass das Formular eine andere Seite lädt.
‫Als nächstes rufen wir die E-Mail
‫und den Passwortwert ab, den der Benutzer eingibt.
‫In diesem Element sind dies also die
‫ID-E-Mail und das ID-Passwort, okay?
‫Also diese beiden
‫Eingabefelder und holen wir uns auch diese Daten.
‫(Eingabe auf einer Tastatur) Also Dokument,
‫Element nach ID
‫abrufen.
‫E-Mail, und dann verwenden wir die value-Eigenschaft, um
‫diesen Wert dort draußen zu erreichen.
‫Nicht nodeValue, nur Wert.
‫Lass uns diese Zeile duplizieren, okay?
‫Und jetzt lassen Sie uns das
‫eigentliche Einloggen in einer separaten Funktion durchführen, okay?
‫Jetzt bekommen wir hier
‫diesen eslint-Fehler und das liegt wieder daran,
‫dass wir eslint nur für nicht JS-Code konfiguriert haben.
‫Also lasst uns das tatsächlich deaktivieren, genau wie wir es hier getan haben.
‫Also schnapp dir einfach dieses Stück Code.
‫In Ordung?
‫Und nun, wie
‫gesagt, erstellen wir jetzt diese Login-Funktion.
‫Also und einfach
‫so, und diese Funktion wird eine
‫E-Mail und ein Passwort akzeptieren.
‫Und zunächst
‫einmal sehen wir, ob dieser Code tatsächlich funktioniert.
‫Wir werden also eine Warnung
‫ausgeben, also erstellen Sie im Grunde ein Warnungsfenster.
‫Und mit dieser E-Mail und diesem Passwort.
‫In Ordung?
‫Nun müssen wir diese Funktion natürlich
‫auch noch einmal mit E-Mail und Passwort aufrufen.
‫Und schließlich müssen wir diese Login-Datei auch in
‫unser Basis-Template aufnehmen, in Ordnung?
‫Und wieder, wie ich eingangs sagte,
‫werden wir im
‫nächsten Video all diesen Front-End-Code hier
‫in einer großen JavaScript-Datei bündeln.
‫In Ordung?
‫Das ist also viel besser für
‫die Leistung und auch für uns selbst eine bessere Entwicklererfahrung.
‫Auf jeden Fall sollte das jetzt funktionieren.
‫Laden wir diese Seite hier einfach neu.
‫Also muss ich hier sowieso
‫ausfüllen, validieren, Chrome erlaubt mir nicht einmal, das Formular abzuschicken.
‫In Ordnung, hier erhalten wir also unsere
‫Benachrichtigung mit der E-Mail, die wir
‫gerade eingegeben haben, und dann wird
‫das Passwort wohl
‫nicht angezeigt, weil wir dort zwei Werte angegeben haben.
‫Lassen Sie uns stattdessen hier ein Objekt angeben und sehen, ob es
‫dann wieder funktioniert.
‫(Tippen auf einer Tastatur) Nun, ich denke, es
‫versucht, dieses Objekt
‫hier in eine Zeichenfolge umzuwandeln.
‫Okay, aber das spielt hier keine Rolle.
‫Normalerweise bin ich es gewohnt, Konsole zu verwenden. log statt alarmieren.
‫In Ordung?
‫Aber wie auch immer, ich bin mir sicher, dass es jetzt hier funktioniert.
‫Lassen Sie uns nun diese Funktion erstellen.
‫Um diese HTTP-Anforderungen für die Anmeldung auszuführen, verwenden
‫wir
‫eine sehr beliebte Bibliothek namens Axios, okay?
‫Und im nächsten Video werden wir
‫diese Bibliothek tatsächlich von NPM herunterladen und mit all
‫unseren anderen Skripten bündeln,
‫aber jetzt verwenden wir sie von einem CDN.
‫Also, lassen Sie uns einfach Google
‫Axios CDN, in Ordnung?
‫Dann kopieren Sie dieses hier und
‫dann in
‫unserem Basisskript direkt hier beim ersten, in Ordnung?
‫Dadurch wird
‫dann ein Axios-Objekt dem globalen Geltungsbereich
‫ausgesetzt, das wir dann in unserer Anmeldefunktion verwenden können, okay?
‫Und so können wir dann jetzt Axios
‫sagen und dann die Optionen für unsere Anfrage übergeben.
‫Nehmen wir also zunächst einmal an, dass wir eine Post-Anfrage durchführen.
‫Dann brauchen wir eine URL.
‫In Ordung?
‫Also holen wir uns das tatsächlich von Postman.
‫Das ist also unsere URL hier.
‫Und natürlich werden
‫wir dort auch den Host anhängen.
‫Also hier ist es natürlich http und dann im
‫Grunde ein lokaler Host.
‫Dies ist
‫also unsere Login-Eingabe, und jetzt müssen wir
‫die Daten angeben, die wir
‫zusammen mit der Anfrage im Hauptteil senden.
‫In Ordung?
‫Und das ist E-Mail: E-Mail.
‫Wie Sie bereits wissen, können wir diese E-Mail entfernen.
‫Okay?
‫Es wird hier also E-Mail genannt,
‫weil unser Endpunkt erwartet, dass die Daten als E-Mail bezeichnet werden, oder?
‫Das ist es, was wir hier im Körper haben.
‫Wir müssen eine Eigenschaft namens email und
‫eine namens password angeben.
‫Und genau das machen wir
‫hier, aber es hat dann den gleichen Namen wie dieser Parameter hier.
‫Es genügt also, einfach E-Mail
‫zu sagen und dasselbe gilt für das Passwort.
‫Okay?
‫Axios gibt hier dann ein Promise zurück,
‫also verwenden wir tatsächlich ein einzelnes
‫Await, um darauf zu warten, dass dieser Wert zurückkommt.
‫Also warte hier und dann asynchron hier.
‫Denken Sie daran, dass dies clientseitiger Code ist
‫und nur die moderneren
‫Browser tatsächlich eine einzelne Wait-Funktion ausführen können,
‫aber in diesem Kurs werde ich nicht wirklich darauf eingehen.
‫Okay?
‫Wie auch immer, speichern wir das Ergebnis in Erwartung
‫der Zusage in der Ergebnisvariablen.
‫Und dann, um einen Blick auf das Ergebnis zu
‫werfen, sagen wir Konsole. Ergebnis protokollieren.
‫Okay?
‫Eine Sache, die ich an Axios wirklich mag,
‫ist die Tatsache, dass es immer dann
‫einen Fehler ausgibt, wenn wir einen Fehler von unserer API-Eingabe zurückbekommen.
‫Nehmen wir an, es gibt ein falsches Passwort
‫und der Server sendet eine 403 zurück, also
‫im Grunde einen Fehler.
‫Wenn also ein Fehler auftritt,
‫löst Axios auch einen Fehler aus.
‫Das ist sehr praktisch, denn damit können wir
‫jetzt einen try-catch-Block verwenden.
‫Okay?
‫Also im Grunde, um hier auf der Client-Seite
‫eine Fehlerbehandlung durchzuführen.
‫Wenn der Benutzer
‫zum Beispiel richtig eingeloggt ist, möchten Sie
‫eine Nachricht anzeigen, die dies sagt, und
‫vielleicht eine andere Logik, aber wenn
‫nicht, nun, dann werden wir in den Catch-Block eintreten
‫und
‫können dann , führen Sie basierend auf dem Fehler eine andere Aktion aus.
‫(Tippen auf einer Tastatur) Sehen wir uns
‫also auch den Fehler an.
‫Und nur um sicher zu gehen, möchte ich auch die E-Mail und das
‫Passwort in der Konsole protokollieren.
‫Also, lass uns das hier versuchen.
‫Laden Sie
‫unsere Seite neu, (tippen Sie auf einer Tastatur) Und
‫ich gebe jetzt ein falsches Passwort ein, okay?
‫Test eins, zwei, drei, vier, fünf.
‫Werfen wir auch hier einen Blick auf unsere Konsole.
‫Und wir bekommen diesen Fehler hier von mapbox, js, aber machen
‫Sie sich keine Sorgen.
‫Wir werden das etwas später noch einmal beheben.
‫Aber jetzt schauen wir uns an, was hier passiert.
‫Und hier bekommen wir einen netten Fehler, in Ordnung?
‫Also, wenn wir uns das hier ansehen müssen, ist das
‫ein Irrtum. Antwort.
‫Und dann Punktdaten.
‫Okay, und Sie finden dies hier in der Axios-Dokumentation, falls
‫Sie sich fragen, woher das kommt.
‫In Ordung?
‫Lassen Sie mich diese E-Mail eigentlich einfach kopieren,
‫weil es nicht so gut ist, sie immer manuell zu schreiben.
‫Und jetzt bekommen wir hier tatsächlich einen schön formatierten Fehler.
‫Okay?
‫Und das ist im Grunde genau der jsencode,
‫den wir von unserem Server zurückgeschickt haben.
‫Rechts?
‫Dies ist also genau
‫das gleiche, wie wir es in Postman gesehen haben.
‫Wir erhalten also unseren gesamten Fehler, die Nachricht und auch den Stack.
‫Wir sehen also, dass wir wahrscheinlich aus irgendeinem Grund die
‫E-Mail-Adresse und das Passwort nicht richtig angegeben haben.
‫Also gehen wir zurück, schauen wir uns an.
‫Oh, also habe ich hier etwas Seltsames gemacht, wo ich ein Objekt
‫sowohl mit der E-Mail als auch
‫mit dem Passwort übergeben habe.
‫Und ich denke, das ist von früher, als
‫es versucht hat, diese Warnung auszulösen,
‫und ich glaube, ich habe dies an der falschen Stelle getan.
‫Und deshalb haben wir hier eigentlich undefiniert gesehen.
‫Und hier haben wir dieses Objekt.
‫Im Grunde war die E-Mail also dieses gesamte Objekt,
‫und das Passwort war dann so undefiniert.
‫Okay?
‫Jetzt sollte dies das Problem beheben, laden
‫Sie es neu.
‫Ah, jetzt bekommen wir diesen richtigen Fehler, den
‫wir eigentlich erwartet hatten.
‫Jetzt ist es also eine falsche E-Mail oder ein
‫falsches Passwort, weil ich ein falsches Passwort angegeben habe, in Ordnung?
‫Aber jetzt entfernen wir tatsächlich die Fünf
‫und dann sollte Test eins, zwei, drei, vier richtig sein.
‫Melden wir uns
‫also an, und jetzt erhalten wir eine 200-Antwort.
‫Also ein erfolgreicher.
‫Also lass uns das
‫öffnen und was uns eigentlich interessiert, sind die Daten.
‫Also im Grunde Antwort. data, denn
‫dort
‫befindet sich dann eigentlich unsere jsen-Antwort.
‫Hier erhalten wir also
‫diese Daten hier, und wir erhalten auch den Status und das Token.
‫Dies ist also unser korrektes jsen-Webtoken, das
‫diesem angemeldeten Benutzer entspricht.
‫Was jetzt wirklich interessant
‫ist, ist ein Blick auf unsere Cookies.
‫Und das tun wir in Google Chrome zumindest,
‫indem Sie hier auf dieses Symbol
‫klicken und dann hier unten, Sie haben die Cookies.
‫Und es sagt auch, dass unsere Verbindung nicht
‫sicher ist,
‫und das liegt einfach daran, dass wir derzeit kein
‫HTTPS verwenden, aber egal.
‫Wichtig ist hier, dass wir jetzt dieses
‫Cookie haben und tatsächlich heißt es jsen web token,
‫und es hat genau das jsen web token, das wir
‫hier unten sehen.
‫Dies ist also im Grunde nur das Ende der
‫Zeichenfolge, also sehen Sie, dass dies dem entspricht, was wir hier unten haben.
‫Und es ist dieses Cookie hier, das es uns
‫tatsächlich ermöglicht, diese gesamte Authentifizierung aufzubauen.
‫Auch hier, weil der Browser dieses Cookie nicht
‫bei jeder neuen Anfrage mitsendet.
‫Und lassen Sie mich es Ihnen in unserem Backend zeigen.
‫Kehren wir also dorthin zurück und gehen wir zur App. js.
‫Und jetzt sind wir wieder bei unserer Notiz,
‫oder eigentlich bei unserem Express-Code.
‫Nun, um tatsächlich Zugriff auf die Cookies
‫zu erhalten, die in unserer Anfrage enthalten sind.
‫In Express müssen wir eine bestimmte Middleware installieren.
‫Also müssen wir das aus einem NPM-Paket installieren.
‫Und so ist das wieder, kommen Sie zu
‫unserem anderen Terminal
‫und installieren Sie dann NPM den Cookie-Parser.
‫Okay?
‫Im Grunde analysiert dieses Paket also alle
‫Cookies aus der eingehenden Anfrage.
‫CookieParser.
‫In Ordung?
‫Und jetzt verwenden wir es in der Nähe dieses Body-Parsers.
‫Okay?
‫Diese beiden sind sich also sehr ähnlich.
‫Diese erste parst die Daten aus dem
‫Body und die zweite parst die Daten aus Cookies.
‫Und jetzt, wenn wir in dieser Middleware hier sind,
‫können wir request. Kekse.
‫Und so werden wir
‫jetzt bei jeder Anfrage immer alle Cookies in der Konsole anzeigen.
‫Also, wenn wir jetzt diese Seite neu laden, oder wirklich
‫jede andere Seite, und so lasst
‫mich diese hier einfach in einem neuen Tab öffnen.
‫Wenn wir jetzt zurückgehen, sollten wir das Cookie hier sehen.
‫Und tatsächlich, hier ist es.
‫Dies ist also das Cookie, das gerade
‫durch das Laden dieser Seite im Browser an unsere Anwendung gesendet wurde.
‫Und wenn ich
‫das noch einmal mache, wirst du noch einen sehen, oder?
‫Hier ist es also.
‫Und so können wir dies jetzt nutzen, um unsere Route zu schützen.
‫Okay, also probieren wir es aus.
‫Okay?
‫Aber bevor wir
‫das tun können, müssen wir
‫das in unserem Off-Controller auch hier hinzufügen.
‫Im Moment lesen wir also nur das jsen-Webtoken
‫aus dem Autorisierungsheader.
‫Rechts?
‫Und nur, wenn sie mit diesem Träger anfangen, ja?
‫Also für das Inhaber-Token.
‫Nun wollen wir aber grundsätzlich auch den
‫jsen-Webtoken aus einem Cookie auslesen.
‫Was wir hier also tun können, ist im Grunde ein else if,
‫also wenn kein Token im Autorisierungsheader war, nun, dann
‫werfen wir einen Blick auf die Cookies.
‫Also beantragen. Kekse. jsen-Webtoken.
‫Also JWT, das ist der Name
‫des Cookies, und daher gibt es im
‫Cookies-Objekt eine Eigenschaft namens JWT.
‫Also das hier, oder?
‫Wenn dies also
‫existiert, dann sollte das Token genau das sein.
‫Also beantragen. Kekse. jwt.
‫Okay.
‫Damit sind wir jetzt auch
‫in der Lage, Benutzer anhand von Token zu authentifizieren, die über
‫Cookies gesendet werden, und nicht nur über den Autorisierungs-Header.
‫Groß.
‫Und nur um das auszuprobieren, lasst uns tatsächlich
‫eine unserer Routen hier im Blick schützen.
‫Und das werde ich mit dieser Tour-Detailseite tun, okay?
‫Das ist also nur
‫zum Testen, weil es natürlich nicht viel Sinn macht,
‫aber ich wollte Ihnen nur zeigen, dass unser Login so wie
‫es jetzt ist bereits funktioniert.
‫Lassen Sie uns den authController hier importieren.
‫(tippen auf einer Tastatur) Und
‫dann, wie zuvor, hier in diese Route editieren.
‫Also authController. beschützen.
‫Und das ist an dieser Stelle also nichts Neues.
‫Und nur wenn der Benutzer eingeloggt ist, können wir
‫zur getTour gehen.
‫Groß.
‫Was ich jetzt tun werde, ist dieses Cookie zunächst grundsätzlich zu löschen,
‫nur um Ihnen zu zeigen, was passiert, wenn ein
‫nicht eingeloggter Benutzer
‫jetzt versucht, auf diese Route zuzugreifen.
‫Wenn wir also dieses Cookie entfernen, ist es im Grunde so, als
‫ob wir den Benutzer abmelden, oder?
‫Wenn Sie sich jetzt also unsere Touren anschauen,
‫dann sollte das ganz gut aussehen.
‫Wenn wir jedoch jetzt versuchen, auf diese Seite
‫zuzugreifen, sollten wir eine Fehlermeldung erhalten.
‫Und tatsächlich steht es da, dass Sie nicht eingeloggt sind.
‫Meinetwegen.
‫Gehen wir also zurück und melden uns tatsächlich an.
‫Okay?
‫Auf geht's.
‫Und dann werden wir in Zukunft natürlich auch hier ein paar Warnfenster
‫und all
‫den guten Kram implementieren.
‫Aber jetzt lassen Sie es uns noch einmal einfach zum Laufen bringen.
‫Sie sehen also, dass
‫wir hier wieder unseren netten Keks haben, okay?
‫Versuchen wir nun, auf diese geschützte Route zuzugreifen.
‫Und tatsächlich, jetzt funktioniert es.
‫Fantastisch, das ist schon richtig toll, oder?
‫Im Idealfall möchten wir nun, wenn ein Benutzer eingeloggt
‫ist, diese Schaltflächen nicht hier
‫anzeigen, sondern wie ein Benutzermenü oder ein Bild des Benutzers.
‫Im Grunde zeigt sich
‫also, dass der Benutzer tatsächlich angemeldet ist, oder?
‫Lassen Sie uns dies im nächsten Video tun, zusammen mit dem Bündeln
‫all unserer JavaScript-Dateien
‫im Front-End, wie ich zuvor erklärt habe.
‫Also warte nicht, lass uns gleich zum nächsten übergehen.
‫Wir sehen uns dort.