1
00:00:01,000 --> 00:00:03,340
‫Dozent: Wir haben also in

2
00:00:03,340 --> 00:00:06,030
‫der letzten Vorlesung gelernt, dass der JSON-Webtoken

3
00:00:06,030 --> 00:00:08,930
‫in einem sicheren HTTP-only-Cookie gespeichert werden sollte.

4
00:00:08,930 --> 00:00:11,470
‫Aber im Moment senden wir das

5
00:00:11,470 --> 00:00:14,790
‫Token nur als einfachen String in unserer JSON-Antwort.

6
00:00:14,790 --> 00:00:18,690
‫Lassen Sie uns in diesem Video also auch den Token als

7
00:00:18,690 --> 00:00:20,960
‫Cookie senden, damit der Browser ihn dann

8
00:00:20,960 --> 00:00:22,473
‫sicherer speichern kann.

9
00:00:23,920 --> 00:00:25,550
‫Wir sind also in unserem Code.

10
00:00:25,550 --> 00:00:28,193
‫Senden wir den Token tatsächlich an den Client?

11
00:00:29,170 --> 00:00:32,610
‫Denken Sie daran, das befindet sich im authController

12
00:00:32,610 --> 00:00:35,920
‫und direkt hier in der Funktion createSendToken.

13
00:00:35,920 --> 00:00:39,040
‫Früher hatten wir diesen Code im

14
00:00:39,040 --> 00:00:43,180
‫Grunde genommen an vielen verschiedenen Stellen, aber dann haben wir

15
00:00:43,180 --> 00:00:46,400
‫all das nur in diese createSendToken-Funktion umgestaltet.

16
00:00:46,400 --> 00:00:49,090
‫In Ordnung, und hier werden wir jetzt arbeiten.

17
00:00:49,090 --> 00:00:50,980
‫Ich bin sicher, dass Sie mit

18
00:00:50,980 --> 00:00:53,320
‫der Funktionsweise von Cookies im Allgemeinen vertraut sind,

19
00:00:53,320 --> 00:00:56,680
‫aber nur um sicherzustellen, dass wir hier alle auf derselben Seite sind,

20
00:00:56,680 --> 00:00:58,960
‫lassen Sie uns ein wenig über Cookies sprechen.

21
00:00:58,960 --> 00:01:02,330
‫Ein Cookie ist also zunächst einmal nur

22
00:01:02,330 --> 00:01:06,240
‫ein kleiner Text, den ein Server an Clients senden kann.

23
00:01:06,240 --> 00:01:08,960
‫Wenn der Client dann ein Cookie empfängt,

24
00:01:08,960 --> 00:01:10,650
‫speichert er es

25
00:01:10,650 --> 00:01:12,860
‫automatisch und sendet es dann automatisch

26
00:01:12,860 --> 00:01:16,360
‫zusammen mit allen zukünftigen Anfragen an denselben Server zurück.

27
00:01:16,360 --> 00:01:20,130
‫Alles klar, ein Browser speichert also automatisch ein Cookie, das

28
00:01:20,130 --> 00:01:23,010
‫er empfängt, und sendet es bei

29
00:01:23,010 --> 00:01:27,320
‫allen zukünftigen Anfragen an den Server zurück, von dem es stammt.

30
00:01:27,320 --> 00:01:29,500
‫Okay, im Moment wird dies für

31
00:01:29,500 --> 00:01:31,090
‫uns nicht wirklich wichtig

32
00:01:31,090 --> 00:01:34,020
‫sein, da wir die API nur mit Postman testen.

33
00:01:34,020 --> 00:01:37,110
‫Aber etwas später, wenn wir dynamische Webseiten rendern

34
00:01:37,110 --> 00:01:39,510
‫und wirklich mit dem Browser interagieren,

35
00:01:39,510 --> 00:01:41,450
‫wird es wirklich wichtig,

36
00:01:41,450 --> 00:01:44,220
‫dass der Browser das Token im Grunde

37
00:01:44,220 --> 00:01:46,410
‫automatisch bei jeder Anfrage zurücksendet.

38
00:01:46,410 --> 00:01:49,640
‫Okay, und bis dahin werden wir natürlich mehr darüber reden.

39
00:01:49,640 --> 00:01:52,220
‫Aber wie auch immer, lassen Sie uns jetzt lernen, wie man

40
00:01:52,220 --> 00:01:53,950
‫tatsächlich ein Cookie erstellt und sendet.

41
00:01:53,950 --> 00:01:57,720
‫Um ein Cookie zu senden, ist es eigentlich ganz einfach.

42
00:01:57,720 --> 00:02:00,380
‫Alles, was wir tun müssen, ist es im Grunde

43
00:02:00,380 --> 00:02:02,023
‫an das Antwortobjekt anzuhängen.

44
00:02:03,010 --> 00:02:06,910
‫Also sagen wir res. Cookie und dann müssen

45
00:02:06,910 --> 00:02:09,550
‫wir nur noch den Namen des

46
00:02:09,550 --> 00:02:11,630
‫Cookies angeben, und ich nenne

47
00:02:11,630 --> 00:02:14,860
‫es JSON-Webtoken, dann die Daten, die wir eigentlich im

48
00:02:14,860 --> 00:02:17,830
‫Cookie senden möchten, und das wird natürlich die

49
00:02:17,830 --> 00:02:22,020
‫Token-Variable sein und dann danach ein paar Optionen für das Cookie.

50
00:02:22,020 --> 00:02:24,119
‫Und die erste Option,

51
00:02:24,119 --> 00:02:26,810
‫die wir angeben werden, ist die Expirs-Eigenschaft.

52
00:02:26,810 --> 00:02:29,620
‫Okay, im Grunde sorgt diese Expires-Eigenschaft

53
00:02:29,620 --> 00:02:33,200
‫dafür, dass der Browser oder der Client im Allgemeinen

54
00:02:33,200 --> 00:02:36,360
‫das Cookie löscht, nachdem es abgelaufen ist.

55
00:02:36,360 --> 00:02:38,780
‫Okay, und wir legen das

56
00:02:38,780 --> 00:02:43,360
‫Ablaufdatum ähnlich dem fest, das wir im JSON-Webtoken festgelegt haben, okay.

57
00:02:43,360 --> 00:02:45,810
‫Erstellen wir also tatsächlich eine

58
00:02:46,760 --> 00:02:49,390
‫neue Variable dafür, okay, denn das JSON-Webtoken-Paket

59
00:02:49,390 --> 00:02:51,870
‫kann dann mit diesem Format arbeiten.

60
00:02:51,870 --> 00:02:55,450
‫Okay, aber in JavaScript ist dies irgendwie bedeutungslos und deshalb

61
00:02:55,450 --> 00:02:58,923
‫erstellen wir stattdessen eine Variable mit einer reellen Zahl.

62
00:02:59,850 --> 00:03:02,053
‫Nennen wir es also immer noch

63
00:03:03,090 --> 00:03:03,963
‫JWT, dann

64
00:03:06,210 --> 00:03:10,740
‫Cookie, läuft ab in, und wir setzen es immer noch auf 90, also 90

65
00:03:10,740 --> 00:03:12,810
‫Tage, aber wieder ohne das D.

66
00:03:12,810 --> 00:03:16,210
‫Okay, damit wir jetzt tatsächlich Operationen

67
00:03:16,210 --> 00:03:21,080
‫damit machen können, weil wir es in Millisekunden umwandeln müssen, okay.

68
00:03:21,080 --> 00:03:23,540
‫Wann sollte dieses Cookie ablaufen?

69
00:03:23,540 --> 00:03:26,610
‫Es sollte zu einem neuen Datum ablaufen.

70
00:03:26,610 --> 00:03:28,890
‫In JavaScript müssen wir also bei

71
00:03:28,890 --> 00:03:30,800
‫der Angabe von Datumsangaben immer

72
00:03:30,800 --> 00:03:35,403
‫neues Datum angeben und dann sollte es jetzt ablaufen, plus diese 90 Tage.

73
00:03:36,820 --> 00:03:39,483
‫Okay, jetzt natürlich so.

74
00:03:41,470 --> 00:03:43,633
‫Und dann verarbeiten. env, und

75
00:03:44,894 --> 00:03:48,280
‫jetzt verwenden wir dieses und fügen dann einfach

76
00:03:49,840 --> 00:03:52,320
‫den Cookie dort ein, okay.

77
00:03:52,320 --> 00:03:55,560
‫Aber jetzt müssen wir das natürlich in Millisekunden umrechnen.

78
00:03:55,560 --> 00:03:57,410
‫Wir haben also jetzt 90 Tage Zeit.

79
00:03:57,410 --> 00:03:59,910
‫Also zwei Stunden, es ist mal 24.

80
00:03:59,910 --> 00:04:01,770
‫Zwei Minuten, es ist mal 60.

81
00:04:01,770 --> 00:04:04,810
‫Zwei Sekunden, es ist wieder mal 60.

82
00:04:04,810 --> 00:04:08,610
‫Und dann auf Millisekunden, mal tausend, okay.

83
00:04:08,610 --> 00:04:10,600
‫Und natürlich könnte ich alles auf

84
00:04:10,600 --> 00:04:14,090
‫einmal machen, aber das ist nur, um zu spezifizieren, was genau wir tun.

85
00:04:14,090 --> 00:04:15,120
‫Um zu zeigen,

86
00:04:15,120 --> 00:04:17,163
‫dass wir es tatsächlich in Millisekunden umrechnen.

87
00:04:18,040 --> 00:04:21,603
‫Die nächste Option wird die sichere Option sein.

88
00:04:22,610 --> 00:04:24,560
‫Also setzen wir diesen auf

89
00:04:24,560 --> 00:04:27,530
‫true und so wird das Cookie nur über

90
00:04:27,530 --> 00:04:29,140
‫eine verschlüsselte Verbindung gesendet.

91
00:04:29,140 --> 00:04:32,830
‫Im Grunde verwenden wir also nur HTTPS.

92
00:04:32,830 --> 00:04:37,030
‫Und schließlich ist es diese httpOnly-Option, über die wir

93
00:04:37,030 --> 00:04:38,593
‫bereits gesprochen haben.

94
00:04:41,630 --> 00:04:43,740
‫Okay, wir setzen dies auf "true",

95
00:04:43,740 --> 00:04:45,820
‫damit der Browser nicht

96
00:04:45,820 --> 00:04:50,410
‫auf das Cookie zugreifen oder es in irgendeiner Weise ändern kann.

97
00:04:50,410 --> 00:04:53,280
‫Okay, und das ist wichtig, um

98
00:04:53,280 --> 00:04:55,900
‫diese Cross-Site-Scripting-Angriffe zu verhindern.

99
00:04:55,900 --> 00:04:58,110
‫Alles klar, also alles, was der

100
00:04:58,110 --> 00:05:01,340
‫Browser tun wird, wenn wir httpOnly auf true setzen, ist

101
00:05:01,340 --> 00:05:03,390
‫im Grunde das Cookie zu

102
00:05:03,390 --> 00:05:07,180
‫empfangen, zu speichern und es dann automatisch mit jeder Anfrage zu senden.

103
00:05:07,180 --> 00:05:09,180
‫Okay, und das ist es tatsächlich.

104
00:05:09,180 --> 00:05:12,770
‫So definieren wir im Grunde das Cookie, sagen wir also

105
00:05:12,770 --> 00:05:14,360
‫diesen Teil und senden ihn

106
00:05:14,360 --> 00:05:17,510
‫dann mit res. Plätzchen.

107
00:05:17,510 --> 00:05:20,850
‫Wenn wir das jetzt testen wollten, würde es nicht

108
00:05:20,850 --> 00:05:23,990
‫funktionieren, da wir derzeit eigentlich kein HTTPS verwenden.

109
00:05:23,990 --> 00:05:26,650
‫Aus diesem Grund sicher: Das Cookie würde

110
00:05:26,650 --> 00:05:28,130
‫nicht erstellt und

111
00:05:28,130 --> 00:05:30,590
‫nicht an den Client gesendet.

112
00:05:30,590 --> 00:05:31,920
‫Alles klar, und

113
00:05:31,920 --> 00:05:36,180
‫im Grunde wollen wir diesen Teil nur hier in der Produktion aktivieren.

114
00:05:36,180 --> 00:05:38,820
‫Was ich also tun werde, ist,

115
00:05:38,820 --> 00:05:42,510
‫dieses gesamte Objekt hier in eine separate Variable zu exportieren.

116
00:05:42,510 --> 00:05:44,160
‫Okay, dann lass mich dir das zeigen.

117
00:05:45,550 --> 00:05:46,383
‫Also

118
00:05:47,242 --> 00:05:49,710
‫sollte const cookieOptions gleich this

119
00:05:50,780 --> 00:05:54,003
‫sein und dann hier übergeben wir das.

120
00:05:55,440 --> 00:05:56,273
‫Gut.

121
00:05:57,480 --> 00:06:00,300
‫Dieses Teil wollen wir dann natürlich nicht hier, sondern

122
00:06:00,300 --> 00:06:03,100
‫erst, wenn wir in der Produktion sind.

123
00:06:03,100 --> 00:06:04,050
‫Sagen

124
00:06:06,830 --> 00:06:11,670
‫wir also, ob Prozess. env. NODE_ENV, denken Sie daran, dass es

125
00:06:11,670 --> 00:06:13,500
‫dort gespeichert ist, ob wir in

126
00:06:13,500 --> 00:06:15,023
‫Produktion sind oder nicht.

127
00:06:16,130 --> 00:06:17,780
‫Wenn das also der

128
00:06:20,210 --> 00:06:27,363
‫Produktion entspricht, legen Sie cookieOptions fest. sicher gleich wahr.

129
00:06:28,970 --> 00:06:31,533
‫Okay, und jetzt können wir es von hier entfernen.

130
00:06:33,600 --> 00:06:36,430
‫Ja, also jetzt, nur wenn wir in der

131
00:06:36,430 --> 00:06:39,300
‫Produktion sind, werden die sicheren Optionen auf "true" gesetzt.

132
00:06:39,300 --> 00:06:42,150
‫Und ansonsten wird es nur so

133
00:06:42,150 --> 00:06:45,470
‫verschickt, also nur mit Ablaufdatum und httpOnly.

134
00:06:45,470 --> 00:06:48,263
‫Okay, und jetzt testen wir das tatsächlich.

135
00:06:50,200 --> 00:06:53,153
‫Und ich werde es mit dem Erstellen eines neuen Benutzers testen.

136
00:06:54,940 --> 00:06:56,970
‫Also eigentlich hier in Sign Up

137
00:06:58,600 --> 00:06:59,750
‫und nennen wir

138
00:07:00,880 --> 00:07:03,180
‫diesen user@jonas. io.

139
00:07:03,180 --> 00:07:04,733
‫Immer mit dem gleichen Passwort.

140
00:07:07,390 --> 00:07:09,100
‫Ich werde ihn auch

141
00:07:09,100 --> 00:07:13,273
‫User nennen und sagen wir, dass die Rolle hier eine Anleitung ist,

142
00:07:14,520 --> 00:07:17,823
‫also nur damit wir auch hier einige andere Rollen haben.

143
00:07:19,040 --> 00:07:20,360
‫Geben Sie ihm etwas mehr Platz.

144
00:07:20,360 --> 00:07:22,670
‫Und jetzt versuchen wir es tatsächlich.

145
00:07:22,670 --> 00:07:25,500
‫Und die Reaktion ist genau wie erwartet, mit

146
00:07:25,500 --> 00:07:26,810
‫dem Unterschied, dass

147
00:07:26,810 --> 00:07:30,190
‫wir jetzt hier in diesem Cookie-Tab ein Cookie erhalten.

148
00:07:30,190 --> 00:07:32,160
‫Und so erhalten wir

149
00:07:32,160 --> 00:07:35,450
‫hier tatsächlich den Namen des Cookies, den Wert.

150
00:07:35,450 --> 00:07:37,220
‫Wir haben auch das

151
00:07:37,220 --> 00:07:40,160
‫Ablaufdatum, das genau in 90 Tagen liegt.

152
00:07:40,160 --> 00:07:44,913
‫Wir haben httpOnly auf true und Secure auf false gesetzt.

153
00:07:45,970 --> 00:07:47,210
‫Gut.

154
00:07:47,210 --> 00:07:49,970
‫Toll, wir können auch alle Cookies sehen, die wir

155
00:07:49,970 --> 00:07:51,733
‫hier in diesem Cookie-Tab haben.

156
00:07:52,690 --> 00:07:55,480
‫Und so sehen wir wieder das eine Cookie, das wir

157
00:07:55,480 --> 00:07:57,673
‫von dieser Domain erhalten haben, in Ordnung.

158
00:07:58,630 --> 00:08:01,540
‫Nun, eine letzte Sache, die ich in der

159
00:08:01,540 --> 00:08:04,130
‫Funktion, an der wir gerade arbeiten, also

160
00:08:04,130 --> 00:08:05,313
‫dem createSendToken, ändern

161
00:08:06,200 --> 00:08:10,660
‫möchte, besteht darin, dieses Passwort hier in der Ausgabe im Grunde zu entfernen.

162
00:08:10,660 --> 00:08:13,560
‫Okay, in unserem Schema haben wir es tatsächlich

163
00:08:13,560 --> 00:08:16,510
‫auf false gesetzt, damit es nicht angezeigt wird, wenn

164
00:08:16,510 --> 00:08:18,380
‫wir nach allen Benutzern fragen.

165
00:08:18,380 --> 00:08:21,290
‫Aber in diesem Fall kommt es von der Erstellung eines

166
00:08:21,290 --> 00:08:24,410
‫neuen Dokuments und das ist anders und deshalb sehen wir es hier.

167
00:08:24,410 --> 00:08:27,373
‫Okay, aber wir können das eigentlich ganz einfach beheben.

168
00:08:28,650 --> 00:08:31,850
‫Okay, alles, was wir tun müssen, ist, den Benutzer

169
00:08:33,660 --> 00:08:35,010
‫einzustellen. Passwort

170
00:08:36,370 --> 00:08:37,563
‫auf undefiniert.

171
00:08:38,750 --> 00:08:40,590
‫Alles klar, und damit sollten

172
00:08:42,630 --> 00:08:43,920
‫die Passwörter

173
00:08:46,340 --> 00:08:48,490
‫aus der Ausgabe entfernt werden.

174
00:08:48,490 --> 00:08:49,630
‫Okay.

175
00:08:49,630 --> 00:08:53,203
‫Löschen wir also einfach diesen Benutzer hier, den wir gerade erstellt haben.

176
00:08:57,890 --> 00:08:59,850
‫Und versuchen Sie es

177
00:08:59,850 --> 00:09:04,010
‫erneut, um zu sehen, ob das Passwort nicht mehr angezeigt wird.

178
00:09:04,010 --> 00:09:07,170
‫Und ja, jetzt ist es tatsächlich weg.

179
00:09:07,170 --> 00:09:09,820
‫Und trotzdem ist unser Cookie natürlich da.

180
00:09:09,820 --> 00:09:12,450
‫Und wenn wir jetzt zu unserem Reiter Cookies kommen, dann

181
00:09:12,450 --> 00:09:14,710
‫haben Sie immer noch nur einen Cookie, weil

182
00:09:14,710 --> 00:09:17,430
‫der alte jetzt im Grunde genommen von diesem neuen überschrieben wurde

183
00:09:17,430 --> 00:09:18,600
‫und das liegt

184
00:09:18,600 --> 00:09:20,380
‫daran, dass sie den gleichen Namen haben.

185
00:09:20,380 --> 00:09:23,940
‫Der Name ist also wie die eindeutige Kennung für ein Cookie.

186
00:09:23,940 --> 00:09:26,160
‫Wenn wir also einen mit dem

187
00:09:26,160 --> 00:09:27,570
‫bereits vergebenen Namen

188
00:09:27,570 --> 00:09:30,683
‫a erhalten, dann wird der alte einfach ersetzt.

189
00:09:31,720 --> 00:09:33,800
‫Okay, und das ist es tatsächlich.

190
00:09:33,800 --> 00:09:36,737
‫So senden wir also ein reines HTTP-Cookie, und wir

191
00:09:36,737 --> 00:09:38,730
‫werden noch einmal mehr darüber

192
00:09:38,730 --> 00:09:40,813
‫sprechen, wenn wir unsere dynamische Website erstellen.