‫Dozent: Wir haben also in
‫der letzten Vorlesung gelernt, dass der JSON-Webtoken
‫in einem sicheren HTTP-only-Cookie gespeichert werden sollte.
‫Aber im Moment senden wir das
‫Token nur als einfachen String in unserer JSON-Antwort.
‫Lassen Sie uns in diesem Video also auch den Token als
‫Cookie senden, damit der Browser ihn dann
‫sicherer speichern kann.
‫Wir sind also in unserem Code.
‫Senden wir den Token tatsächlich an den Client?
‫Denken Sie daran, das befindet sich im authController
‫und direkt hier in der Funktion createSendToken.
‫Früher hatten wir diesen Code im
‫Grunde genommen an vielen verschiedenen Stellen, aber dann haben wir
‫all das nur in diese createSendToken-Funktion umgestaltet.
‫In Ordnung, und hier werden wir jetzt arbeiten.
‫Ich bin sicher, dass Sie mit
‫der Funktionsweise von Cookies im Allgemeinen vertraut sind,
‫aber nur um sicherzustellen, dass wir hier alle auf derselben Seite sind,
‫lassen Sie uns ein wenig über Cookies sprechen.
‫Ein Cookie ist also zunächst einmal nur
‫ein kleiner Text, den ein Server an Clients senden kann.
‫Wenn der Client dann ein Cookie empfängt,
‫speichert er es
‫automatisch und sendet es dann automatisch
‫zusammen mit allen zukünftigen Anfragen an denselben Server zurück.
‫Alles klar, ein Browser speichert also automatisch ein Cookie, das
‫er empfängt, und sendet es bei
‫allen zukünftigen Anfragen an den Server zurück, von dem es stammt.
‫Okay, im Moment wird dies für
‫uns nicht wirklich wichtig
‫sein, da wir die API nur mit Postman testen.
‫Aber etwas später, wenn wir dynamische Webseiten rendern
‫und wirklich mit dem Browser interagieren,
‫wird es wirklich wichtig,
‫dass der Browser das Token im Grunde
‫automatisch bei jeder Anfrage zurücksendet.
‫Okay, und bis dahin werden wir natürlich mehr darüber reden.
‫Aber wie auch immer, lassen Sie uns jetzt lernen, wie man
‫tatsächlich ein Cookie erstellt und sendet.
‫Um ein Cookie zu senden, ist es eigentlich ganz einfach.
‫Alles, was wir tun müssen, ist es im Grunde
‫an das Antwortobjekt anzuhängen.
‫Also sagen wir res. Cookie und dann müssen
‫wir nur noch den Namen des
‫Cookies angeben, und ich nenne
‫es JSON-Webtoken, dann die Daten, die wir eigentlich im
‫Cookie senden möchten, und das wird natürlich die
‫Token-Variable sein und dann danach ein paar Optionen für das Cookie.
‫Und die erste Option,
‫die wir angeben werden, ist die Expirs-Eigenschaft.
‫Okay, im Grunde sorgt diese Expires-Eigenschaft
‫dafür, dass der Browser oder der Client im Allgemeinen
‫das Cookie löscht, nachdem es abgelaufen ist.
‫Okay, und wir legen das
‫Ablaufdatum ähnlich dem fest, das wir im JSON-Webtoken festgelegt haben, okay.
‫Erstellen wir also tatsächlich eine
‫neue Variable dafür, okay, denn das JSON-Webtoken-Paket
‫kann dann mit diesem Format arbeiten.
‫Okay, aber in JavaScript ist dies irgendwie bedeutungslos und deshalb
‫erstellen wir stattdessen eine Variable mit einer reellen Zahl.
‫Nennen wir es also immer noch
‫JWT, dann
‫Cookie, läuft ab in, und wir setzen es immer noch auf 90, also 90
‫Tage, aber wieder ohne das D.
‫Okay, damit wir jetzt tatsächlich Operationen
‫damit machen können, weil wir es in Millisekunden umwandeln müssen, okay.
‫Wann sollte dieses Cookie ablaufen?
‫Es sollte zu einem neuen Datum ablaufen.
‫In JavaScript müssen wir also bei
‫der Angabe von Datumsangaben immer
‫neues Datum angeben und dann sollte es jetzt ablaufen, plus diese 90 Tage.
‫Okay, jetzt natürlich so.
‫Und dann verarbeiten. env, und
‫jetzt verwenden wir dieses und fügen dann einfach
‫den Cookie dort ein, okay.
‫Aber jetzt müssen wir das natürlich in Millisekunden umrechnen.
‫Wir haben also jetzt 90 Tage Zeit.
‫Also zwei Stunden, es ist mal 24.
‫Zwei Minuten, es ist mal 60.
‫Zwei Sekunden, es ist wieder mal 60.
‫Und dann auf Millisekunden, mal tausend, okay.
‫Und natürlich könnte ich alles auf
‫einmal machen, aber das ist nur, um zu spezifizieren, was genau wir tun.
‫Um zu zeigen,
‫dass wir es tatsächlich in Millisekunden umrechnen.
‫Die nächste Option wird die sichere Option sein.
‫Also setzen wir diesen auf
‫true und so wird das Cookie nur über
‫eine verschlüsselte Verbindung gesendet.
‫Im Grunde verwenden wir also nur HTTPS.
‫Und schließlich ist es diese httpOnly-Option, über die wir
‫bereits gesprochen haben.
‫Okay, wir setzen dies auf "true",
‫damit der Browser nicht
‫auf das Cookie zugreifen oder es in irgendeiner Weise ändern kann.
‫Okay, und das ist wichtig, um
‫diese Cross-Site-Scripting-Angriffe zu verhindern.
‫Alles klar, also alles, was der
‫Browser tun wird, wenn wir httpOnly auf true setzen, ist
‫im Grunde das Cookie zu
‫empfangen, zu speichern und es dann automatisch mit jeder Anfrage zu senden.
‫Okay, und das ist es tatsächlich.
‫So definieren wir im Grunde das Cookie, sagen wir also
‫diesen Teil und senden ihn
‫dann mit res. Plätzchen.
‫Wenn wir das jetzt testen wollten, würde es nicht
‫funktionieren, da wir derzeit eigentlich kein HTTPS verwenden.
‫Aus diesem Grund sicher: Das Cookie würde
‫nicht erstellt und
‫nicht an den Client gesendet.
‫Alles klar, und
‫im Grunde wollen wir diesen Teil nur hier in der Produktion aktivieren.
‫Was ich also tun werde, ist,
‫dieses gesamte Objekt hier in eine separate Variable zu exportieren.
‫Okay, dann lass mich dir das zeigen.
‫Also
‫sollte const cookieOptions gleich this
‫sein und dann hier übergeben wir das.
‫Gut.
‫Dieses Teil wollen wir dann natürlich nicht hier, sondern
‫erst, wenn wir in der Produktion sind.
‫Sagen
‫wir also, ob Prozess. env. NODE_ENV, denken Sie daran, dass es
‫dort gespeichert ist, ob wir in
‫Produktion sind oder nicht.
‫Wenn das also der
‫Produktion entspricht, legen Sie cookieOptions fest. sicher gleich wahr.
‫Okay, und jetzt können wir es von hier entfernen.
‫Ja, also jetzt, nur wenn wir in der
‫Produktion sind, werden die sicheren Optionen auf "true" gesetzt.
‫Und ansonsten wird es nur so
‫verschickt, also nur mit Ablaufdatum und httpOnly.
‫Okay, und jetzt testen wir das tatsächlich.
‫Und ich werde es mit dem Erstellen eines neuen Benutzers testen.
‫Also eigentlich hier in Sign Up
‫und nennen wir
‫diesen user@jonas. io.
‫Immer mit dem gleichen Passwort.
‫Ich werde ihn auch
‫User nennen und sagen wir, dass die Rolle hier eine Anleitung ist,
‫also nur damit wir auch hier einige andere Rollen haben.
‫Geben Sie ihm etwas mehr Platz.
‫Und jetzt versuchen wir es tatsächlich.
‫Und die Reaktion ist genau wie erwartet, mit
‫dem Unterschied, dass
‫wir jetzt hier in diesem Cookie-Tab ein Cookie erhalten.
‫Und so erhalten wir
‫hier tatsächlich den Namen des Cookies, den Wert.
‫Wir haben auch das
‫Ablaufdatum, das genau in 90 Tagen liegt.
‫Wir haben httpOnly auf true und Secure auf false gesetzt.
‫Gut.
‫Toll, wir können auch alle Cookies sehen, die wir
‫hier in diesem Cookie-Tab haben.
‫Und so sehen wir wieder das eine Cookie, das wir
‫von dieser Domain erhalten haben, in Ordnung.
‫Nun, eine letzte Sache, die ich in der
‫Funktion, an der wir gerade arbeiten, also
‫dem createSendToken, ändern
‫möchte, besteht darin, dieses Passwort hier in der Ausgabe im Grunde zu entfernen.
‫Okay, in unserem Schema haben wir es tatsächlich
‫auf false gesetzt, damit es nicht angezeigt wird, wenn
‫wir nach allen Benutzern fragen.
‫Aber in diesem Fall kommt es von der Erstellung eines
‫neuen Dokuments und das ist anders und deshalb sehen wir es hier.
‫Okay, aber wir können das eigentlich ganz einfach beheben.
‫Okay, alles, was wir tun müssen, ist, den Benutzer
‫einzustellen. Passwort
‫auf undefiniert.
‫Alles klar, und damit sollten
‫die Passwörter
‫aus der Ausgabe entfernt werden.
‫Okay.
‫Löschen wir also einfach diesen Benutzer hier, den wir gerade erstellt haben.
‫Und versuchen Sie es
‫erneut, um zu sehen, ob das Passwort nicht mehr angezeigt wird.
‫Und ja, jetzt ist es tatsächlich weg.
‫Und trotzdem ist unser Cookie natürlich da.
‫Und wenn wir jetzt zu unserem Reiter Cookies kommen, dann
‫haben Sie immer noch nur einen Cookie, weil
‫der alte jetzt im Grunde genommen von diesem neuen überschrieben wurde
‫und das liegt
‫daran, dass sie den gleichen Namen haben.
‫Der Name ist also wie die eindeutige Kennung für ein Cookie.
‫Wenn wir also einen mit dem
‫bereits vergebenen Namen
‫a erhalten, dann wird der alte einfach ersetzt.
‫Okay, und das ist es tatsächlich.
‫So senden wir also ein reines HTTP-Cookie, und wir
‫werden noch einmal mehr darüber
‫sprechen, wenn wir unsere dynamische Website erstellen.