1
00:00:03,620 --> 00:00:09,015
Ich bin sicher, dass Sie ein oder mehrere Social-Media-Konten haben.

2
00:00:09,015 --> 00:00:13,920
Sei es Facebook, Twitter, YouTube, Google, GitHub

3
00:00:13,920 --> 00:00:19,760
oder viele andere solche Dienstleister, bei denen Sie Telefon und Konto registriert haben.

4
00:00:19,760 --> 00:00:22,545
Nun

5
00:00:22,545 --> 00:00:27,480
sind diese Dienstanbieter wiederum bereit, Authentifizierungsdienste in Ihrem Namen bereitzustellen.

6
00:00:27,480 --> 00:00:32,880
So sehen Sie beispielsweise die Verbreitung einer Reihe von Websites

7
00:00:32,880 --> 00:00:37,440
und mobilen Anwendungen, bei denen Sie sich

8
00:00:37,440 --> 00:00:40,260
mit Ihren Social-Media-Konten anmelden dürfen.

9
00:00:40,260 --> 00:00:42,805
Nun, wie funktioniert das eigentlich?

10
00:00:42,805 --> 00:00:47,270
Viele dieser Social-Media-Kontoanbieter fungieren

11
00:00:47,270 --> 00:00:53,945
als Authentifizierungsdienstanbieter, die ein Protokoll namens OAuth verwenden.

12
00:00:53,945 --> 00:01:00,660
Wir werden uns OAuth ansehen, und wie es diesen Drittanbietern ermöglicht

13
00:01:00,660 --> 00:01:04,995
, Authentifizierung

14
00:01:04,995 --> 00:01:14,183
in Ihrem Namen bereitzustellen und Ihnen die Anmeldung bei anderen Diensten über ihre Social-Media-Konten zu ermöglichen.

15
00:01:14,183 --> 00:01:18,510
Ich bin sicher, dass Sie in der Vergangenheit über OAuth 1 und OAuth 2 gehört haben

16
00:01:18,510 --> 00:01:21,370
und vielleicht von Leuten gehört haben,

17
00:01:21,370 --> 00:01:24,669
die sagen, dass Facebook OAuth 2-basierte Authentifizierung

18
00:01:24,669 --> 00:01:28,450
bereitstellt oder Google OAuth 2-basierte Authentifizierung bereitstellt und so weiter.

19
00:01:28,450 --> 00:01:29,800
Ich bin sicher, dass Sie sich fragen müssen,

20
00:01:29,800 --> 00:01:35,240
was genau sind diese OAuth1 und OAuth 2 sollen?

21
00:01:35,240 --> 00:01:40,090
Jetzt sind OAuth1 und OAuth 2 Autorisierungs-Frameworks

22
00:01:40,090 --> 00:01:42,920
, die auf offenen Standards basieren.

23
00:01:42,920 --> 00:01:46,110
Und diese können über das Internet verwendet werden, um

24
00:01:46,110 --> 00:01:50,375
Ihre Identität bei vielen Websites oder mobilen Anwendungen zu authentifizieren.

25
00:01:50,375 --> 00:01:52,475
Wenn Sie diese Dienste nutzen,

26
00:01:52,475 --> 00:01:56,470
sind Sie abhängig von einem der Social-Media-Accounts wie Facebook

27
00:01:56,470 --> 00:01:58,525
, Google, Twitter, Microsoft, Instagram

28
00:01:58,525 --> 00:02:02,380
, GitHub, DigitalOcean und vielen mehr,

29
00:02:02,380 --> 00:02:06,915
die diese Authentifizierungsdienste für andere bereitstellen.

30
00:02:06,915 --> 00:02:10,465
Diese Authentifizierungsdienstanbieter versprechen

31
00:02:10,465 --> 00:02:15,310
den Benutzern dieses Authentifizierungsdienstes, dass sie die Identität

32
00:02:15,310 --> 00:02:18,535
des Benutzers anhand

33
00:02:18,535 --> 00:02:24,100
ihrer Anmeldeinformationen für diese Social-Media-Dienste authentifizieren.

34
00:02:24,100 --> 00:02:28,630
Jetzt gibt es einen ergänzenden Service OpenID.

35
00:02:28,630 --> 00:02:34,220
Aber natürlich, nicht mit OAuth verwandt, sondern bietet eine ähnliche Art von Service.

36
00:02:34,220 --> 00:02:38,005
Aber die meisten standardmäßigen Social-Media-Dienstleister,

37
00:02:38,005 --> 00:02:39,835
wie Sie hier sehen werden,

38
00:02:39,835 --> 00:02:44,290
bieten heute OAuth 2-basierte Dienste an.

39
00:02:44,290 --> 00:02:48,760
Wie ich bereits erwähnt habe, sind OAuth1 und OAuth 2 Authentifizierungsprotokolle,

40
00:02:48,760 --> 00:02:53,010
und OAuth 1 war das erste Protokoll, das entstanden ist.

41
00:02:53,010 --> 00:02:55,165
Dies wurde von Twitter entwickelt,

42
00:02:55,165 --> 00:02:58,725
Blaine Cook ist die Person dahinter,

43
00:02:58,725 --> 00:03:04,330
und dies ist in der Internet Engineering Task Force, RFC 5849 dokumentiert.

44
00:03:04,330 --> 00:03:08,235
Also, wenn Sie die blutigen Details darüber lesen wollen, wie diese Protokolle funktionieren,

45
00:03:08,235 --> 00:03:11,350
ist das der Ort, um das zu finden. Das

46
00:03:11,350 --> 00:03:18,430
OAuth 2-Protokoll wurde von OAuth 1 entwickelt, um es einfacher

47
00:03:18,430 --> 00:03:23,420
zu machen und eine einfachere Möglichkeit für die Client-Entwicklung zu bieten.

48
00:03:23,420 --> 00:03:29,050
Und dies ist in IETF RFC 6749 dokumentiert und danach

49
00:03:29,050 --> 00:03:35,975
kam eine weitere Inhaber-Token Verwendung in IETF RFC 6750 zustande.

50
00:03:35,975 --> 00:03:38,155
Aus unserer Sicht

51
00:03:38,155 --> 00:03:42,926
wollen wir nicht wirklich in Details darüber eingehen, wie diese Protokolle tatsächlich funktionieren.

52
00:03:42,926 --> 00:03:45,640
Stattdessen ist alles, was wir daran interessiert sind,

53
00:03:45,640 --> 00:03:51,505
wie nutzen wir diese für die Benutzerauthentifizierung innerhalb unserer Webanwendung

54
00:03:51,505 --> 00:03:53,460
oder innerhalb unserer mobilen Anwendung,

55
00:03:53,460 --> 00:03:56,215
wenn wir den Benutzer beim

56
00:03:56,215 --> 00:03:59,965
Express-Server authentifizieren müssen, auf dem wir bisher aufbauen?

57
00:03:59,965 --> 00:04:04,330
Jetzt konzentrieren wir uns in erster Linie auf OAuth 2,

58
00:04:04,330 --> 00:04:05,710
weil

59
00:04:05,710 --> 00:04:10,960
wir in der Übung die Verwendung von Facebook als OAuth 2-Authentifizierungsdienstanbieter betrachten werden,

60
00:04:10,960 --> 00:04:13,870
und hier müssen wir

61
00:04:13,870 --> 00:04:19,810
ein paar Begriffe verstehen, um zu sehen, wie genau dieses OAuth 2-Protokoll funktioniert.

62
00:04:19,810 --> 00:04:25,065
Zumindest die bare-bone Details, wie das Protokoll selbst funktioniert.

63
00:04:25,065 --> 00:04:26,995
Jetzt sprechen

64
00:04:26,995 --> 00:04:30,440
wir im Falle von OAuth 2 immer über einen Ressourcenbesitz.

65
00:04:30,440 --> 00:04:32,200
In diesem Fall

66
00:04:32,200 --> 00:04:34,810
ist die Ressource, auf die ich verweise, nicht

67
00:04:34,810 --> 00:04:37,870
die Ressource, die auf dem Express-Server gespeichert ist.

68
00:04:37,870 --> 00:04:39,655
Stattdessen

69
00:04:39,655 --> 00:04:42,055
ist die Ressource, auf die wir hier verweisen, die Identität des Benutzers.

70
00:04:42,055 --> 00:04:45,760
Nun

71
00:04:45,760 --> 00:04:48,310
möchte jeder Server, wie der Express-Server, den wir erstellt haben, Zugriff auf diese Ressource erhalten,

72
00:04:48,310 --> 00:04:50,000
das ist Ihre Identität.

73
00:04:50,000 --> 00:04:51,760
Nun, wo ist Ihre Identität?

74
00:04:51,760 --> 00:04:54,160
Ihre Identität wird auf einem

75
00:04:54,160 --> 00:04:58,457
dieser Social-Media-Authentifizierungsdienstleister wie Facebook und so weiter gespeichert,

76
00:04:58,457 --> 00:05:03,140
da Sie bereits ein Konto auf diesen Social-Media-Websites erstellt haben.

77
00:05:03,140 --> 00:05:06,920
So werden

78
00:05:06,920 --> 00:05:11,020
beispielsweise Ihre Informationen oder Ihre Identitätsinformationen oder Ihre Profilinformationen bei Facebook gespeichert.

79
00:05:11,020 --> 00:05:15,550
Nun möchte Ihr Express-Server Zugriff auf Ihre Identität erhalten und

80
00:05:15,550 --> 00:05:20,650
überprüfen, ob Sie wirklich versuchen, auf den Express-Server zuzugreifen.

81
00:05:20,650 --> 00:05:24,690
In diesem Fall

82
00:05:24,690 --> 00:05:27,390
fungiert der Express-Server, den wir entwickelt haben, als Client-Anwendung.

83
00:05:27,390 --> 00:05:29,170
Also, hier ist die Client-Anwendung,

84
00:05:29,170 --> 00:05:33,265
die die Website oder die mobile App, die

85
00:05:33,265 --> 00:05:38,905
Zugriff auf den Ressourcenserver will, um die Informationen über Sie zu erhalten.

86
00:05:38,905 --> 00:05:41,530
Was ist ein Ressourcenserver, von dem wir sprechen?

87
00:05:41,530 --> 00:05:45,730
Dies ist der Facebook OAuth Authentifizierungsserver,

88
00:05:45,730 --> 00:05:49,870
der auch Ihre Profilinformationen auf Anfrage zur Verfügung stellt.

89
00:05:49,870 --> 00:05:54,490
Natürlich werden Sie Ihre Profilinformationen nicht nach dem Zufallsprinzip weiterleiten.

90
00:05:54,490 --> 00:06:00,370
Stattdessen möchten Sie überprüfen können, ob Sie einem authentifizierten

91
00:06:00,370 --> 00:06:08,250
Dienstanbieter oder einem authentifizierten Server Zugriff auf Ihre Profilinformationen gewähren.

92
00:06:08,250 --> 00:06:12,610
Nun, hier wird sich Ihre Client-Anwendung oder der Express-Server hier

93
00:06:12,610 --> 00:06:18,535
zum Beispiel auf Facebook mit einem Konto registrieren, das besagt, dass ich eine App betreibe,

94
00:06:18,535 --> 00:06:25,780
und ich möchte mich als potenzielle Quelle registrieren, die

95
00:06:25,780 --> 00:06:29,680
Sie nähern kann, um Benutzer zu authentifizieren, wenn sie

96
00:06:29,680 --> 00:06:33,859
Zugriff auf deren Profil, das auf Ihrer Website gespeichert ist.

97
00:06:33,859 --> 00:06:35,335
Der Express-Server,

98
00:06:35,335 --> 00:06:37,645
in diesem Fall als Client-Anwendung fungiert,

99
00:06:37,645 --> 00:06:45,790
registriert sich auf Facebook und erhält eine ClientID und ein Kundengeheimnis von Facebook.

100
00:06:45,790 --> 00:06:48,955
Wenn sich der Express-Server auf Facebook registriert,

101
00:06:48,955 --> 00:06:52,240
benötigen Sie ein Konto auf Facebook,

102
00:06:52,240 --> 00:06:53,950
ein authentifiziertes Konto auf Facebook, mit

103
00:06:53,950 --> 00:06:59,030
dem Sie diese App auf Facebook einrichten.

104
00:06:59,030 --> 00:07:01,450
Sobald Sie sich registriert haben,

105
00:07:01,450 --> 00:07:06,680
erhalten Sie Zugriff auf eine ClientID und ein Kundengeheimnis.

106
00:07:06,680 --> 00:07:08,650
Nun

107
00:07:08,650 --> 00:07:12,310
ist der Ressourcenserver, wie ich bereits erwähnt habe, der Server, der die geschützten Daten hostet.

108
00:07:12,310 --> 00:07:18,665
Geschützte Daten, d. h. das Profil des Benutzers, der auf den Express-Server zugreifen möchte.

109
00:07:18,665 --> 00:07:22,300
Der Express-Server möchte also auf diesen Ressourcenserver zugreifen

110
00:07:22,300 --> 00:07:28,415
und die Profildaten des Benutzers erhalten, der auf den Express-Server zugreifen möchte.

111
00:07:28,415 --> 00:07:31,265
Also, Sie sehen die Beziehung hier.

112
00:07:31,265 --> 00:07:33,355
Wenn ich also über eine Clientanwendung spreche,

113
00:07:33,355 --> 00:07:36,535
meine ich nicht ihre Front-End-Anwendung,

114
00:07:36,535 --> 00:07:40,000
sondern ihren Express-Server, der versucht, Ihnen

115
00:07:40,000 --> 00:07:44,190
Zugriff auf Ressourcen zu gewähren, die es auf seiner Website hat.

116
00:07:44,190 --> 00:07:45,635
Aber der Express-Server,

117
00:07:45,635 --> 00:07:48,940
um Ihnen den Zugriff zu ermöglichen,

118
00:07:48,940 --> 00:07:53,200
benötigt Zugriff auf Ihren Facebook-Ressourcenserver, der

119
00:07:53,200 --> 00:07:58,655
Sie authentifiziert und Ihre Profilinformationen an den Express-Server zur Verfügung stellt.

120
00:07:58,655 --> 00:08:01,375
Also, der Ressourcenserver, von dem ich hier spreche,

121
00:08:01,375 --> 00:08:06,190
ist der OAuth 2-Authentifizierungsserver von Facebook

122
00:08:06,190 --> 00:08:11,681
plus der Ressourcenserver, der Ihnen Zugriff auf die Profilinformationen des Benutzers gibt.

123
00:08:11,681 --> 00:08:16,180
Und der Autorisierungsserver ist der Server, der

124
00:08:16,180 --> 00:08:19,210
jemanden autorisiert, auf

125
00:08:19,210 --> 00:08:22,825
den Ressourcenserver zuzugreifen, um die Profilinformationen abzurufen.

126
00:08:22,825 --> 00:08:27,375
Nun ist der Benutzer derjenige, der die Profilinformationen auf dem Ressourcenserver hat.

127
00:08:27,375 --> 00:08:30,610
Der Benutzer sollte den Express-Server autorisieren, zu

128
00:08:30,610 --> 00:08:34,035
diesem Ressourcenserver zu gehen, um die Profilinformationen abzurufen.

129
00:08:34,035 --> 00:08:37,000
Wenn der Benutzer jedoch den Express-Server autorisieren muss,

130
00:08:37,000 --> 00:08:40,045
muss sich der Benutzer beim Facebook-Konto anmelden

131
00:08:40,045 --> 00:08:45,115
und dann Informationen von Facebook erhalten, die als Zugriffstoken aufgerufen

132
00:08:45,115 --> 00:08:48,995
werden, die der Benutzer dann an Express-Server weitergibt.

133
00:08:48,995 --> 00:08:54,750
Nun, wenn das Zugriffstoken von Facebook über das OAuth 2-Protokoll erhalten wird,

134
00:08:54,750 --> 00:08:58,090
wird das Zugriffstoken in Bezug auf das

135
00:08:58,090 --> 00:09:01,675
Zulassen dieser Client-Anwendung oder des Express-Servers ausgegeben

136
00:09:01,675 --> 00:09:04,885
, der bereits auf Facebook registriert ist und sagt, dass

137
00:09:04,885 --> 00:09:08,020
dieser Client-Server ich autorisieren werde,

138
00:09:08,020 --> 00:09:15,265
auf ihre Profilinformationen von ihrem Facebook-OAuth-Dienstanbieter.

139
00:09:15,265 --> 00:09:18,290
Also, wieder, das ist ein bisschen verwirrend.

140
00:09:18,290 --> 00:09:20,940
Wir sehen ein Diagramm, in dem

141
00:09:20,940 --> 00:09:24,360
Ihnen dieser Informationsfluss ein wenig deutlicher erklärt wird.

142
00:09:24,360 --> 00:09:32,380
Ein Punkt, den ich gerade erwähnt habe, ist ein OAuth-Token oder das Zugriffstoken.

143
00:09:32,380 --> 00:09:34,090
Was ist dieses Zugriffstoken?

144
00:09:34,090 --> 00:09:38,675
Das Zugriffstoken ist etwas, das der Autorisierungsserver für Sie ausgibt.

145
00:09:38,675 --> 00:09:40,620
Welcher Autorisierungsserver?

146
00:09:40,620 --> 00:09:44,100
Dies ist der OAuth 2-Autorisierungsserver des Drittanbieters, der

147
00:09:44,100 --> 00:09:46,668
Facebook-Server, in diesem Beispiel.

148
00:09:46,668 --> 00:09:51,130
Sie sind also Express-Server-Anwendung.

149
00:09:51,130 --> 00:09:54,485
Jetzt möchten Sie als Front-End-Benutzer

150
00:09:54,485 --> 00:09:58,070
auf etwas von der Express-Serveranwendung zugreifen.

151
00:09:58,070 --> 00:10:02,150
Die Express-Server-Anwendung wird Ihnen mitteilen, dass Sie

152
00:10:02,150 --> 00:10:06,666
sich von Facebook authentifizieren und dann Zugriffstoken von Facebook erhalten.

153
00:10:06,666 --> 00:10:09,770
Dieses Zugriffstoken wird an

154
00:10:09,770 --> 00:10:16,330
den Front-End-Benutzer von Facebook ausgegeben, wenn sich der Benutzer in seinem Facebook-Konto anmeldet.

155
00:10:16,330 --> 00:10:21,155
Jetzt wird dieses Zugriffstoken im Namen der Client-Anwendung,

156
00:10:21,155 --> 00:10:25,060
Express-Server, ausgegeben, die sich bereits bei Facebook registriert hat.

157
00:10:25,060 --> 00:10:30,485
Damit der Benutzer auf Facebook zugreifen kann, um sein Zugriffstoken zu erhalten,

158
00:10:30,485 --> 00:10:36,580
benötigt der Benutzer die Client-ID der Client-Anwendung oder der Express-Anwendung.

159
00:10:36,580 --> 00:10:39,755
Diese Client-ID ist also in

160
00:10:39,755 --> 00:10:44,460
die Front-End-Anwendung eingebettet, die dieser Express-Server für Sie bereitstellt. Der

161
00:10:44,460 --> 00:10:47,915
Express-Server stellt also eine Website bereit, auf die Sie zugreifen,

162
00:10:47,915 --> 00:10:50,820
dann enthält diese Website Code,

163
00:10:50,820 --> 00:10:56,597
in dem die Client-ID dieses Express-Servers bereits eingebettet ist.

164
00:10:56,597 --> 00:11:00,110
Eine weitere Information, die ich erwähnte, ist ein Kundengeheimnis.

165
00:11:00,110 --> 00:11:03,855
Nun, in dem Authentifizierungsfluss, über den ich sprechen werde,

166
00:11:03,855 --> 00:11:07,640
wird das Clientgeheimnis niemandem offenbart.

167
00:11:07,640 --> 00:11:11,700
Das Clientgeheimnis wird nur auf der Express-Serverseite angezeigt.

168
00:11:11,700 --> 00:11:15,335
Wenn der Express-Server versucht, sich zu authentifizieren und

169
00:11:15,335 --> 00:11:20,600
Zugriff auf das Profil des Benutzers von Facebook zu erhalten,

170
00:11:20,600 --> 00:11:23,795
die Client-Anwendung,

171
00:11:23,795 --> 00:11:27,490
sendet der Express-Server sowohl die Client-ID als auch das Client-Geheimnis,

172
00:11:27,490 --> 00:11:32,555
zusammen mit dem Zugriffstoken, das der Benutzer an Facebook zur Verfügung stellt.

173
00:11:32,555 --> 00:11:34,988
Und Facebook wiederum

174
00:11:34,988 --> 00:11:38,945
autorisiert ihre Client-Anwendung, auf

175
00:11:38,945 --> 00:11:43,935
den Ressourcenserver zuzugreifen, um die Profildaten des Benutzers zu erhalten.

176
00:11:43,935 --> 00:11:50,390
Und sobald die Profildaten des Nutzers vom Facebook-Ressourcenserver abgerufen werden,

177
00:11:50,390 --> 00:11:54,530
wird mein Express-Server ein Konto

178
00:11:54,530 --> 00:11:59,383
für diesen bestimmten Benutzer erstellen, der sie mit seinem Facebook-Konto angemeldet hat.

179
00:11:59,383 --> 00:12:05,995
Geben Sie anschließend dem Benutzer ein JSON-Web-Token an,

180
00:12:05,995 --> 00:12:09,190
das der Benutzer dann verwenden kann, um auf

181
00:12:09,190 --> 00:12:12,530
die Ressourcen zuzugreifen, die auf dem Express-Server gespeichert sind.

182
00:12:12,530 --> 00:12:15,040
Also, noch einmal, um das zusammenzufassen,

183
00:12:15,040 --> 00:12:20,387
habe ich hier ein Diagramm, um Ihnen das etwas genauer zu erklären.

184
00:12:20,387 --> 00:12:22,000
Darüber hinaus

185
00:12:22,000 --> 00:12:24,225
gibt es auch ein Aktualisierungstoken.

186
00:12:24,225 --> 00:12:29,910
Wenn ein Zugriffstoken vom Facebook OAuth 2-Server ausgegeben wird,

187
00:12:29,910 --> 00:12:31,875
hat das Zugriffstoken eine begrenzte Lebensdauer.

188
00:12:31,875 --> 00:12:34,750
Danach wird das Zugriffstoken ungültig.

189
00:12:34,750 --> 00:12:39,203
Das Zugriffstoken muss also vertraulich behandelt werden.

190
00:12:39,203 --> 00:12:43,285
All dieser Austausch von Token zwischen den verschiedenen Sites

191
00:12:43,285 --> 00:12:48,040
wird also in einer verschlüsselten Angelegenheit unter Verwendung des HTTPS-Protokolls durchgeführt.

192
00:12:48,040 --> 00:12:50,980
Stellen Sie also sicher, dass Sie beim Senden Ihres Zugriffstoken von

193
00:12:50,980 --> 00:12:56,838
Ihrer Benutzerfront-End-Anwendung an den Express-Server

194
00:12:56,838 --> 00:13:02,146
nur das Zugriffstoken über HTTPS und nicht über HTTP senden.

195
00:13:02,146 --> 00:13:04,930
Dies ist sehr wichtig, weil Sie nicht

196
00:13:04,930 --> 00:13:08,110
möchten, dass Ihr Zugriffstoken jemandem offenbart wird

197
00:13:08,110 --> 00:13:10,960
, weil jeder, der eines Ihrer Zugriffstoken erhalten kann, vorgeben kann,

198
00:13:10,960 --> 00:13:15,130
seine Clientanwendung zu sein und dann Zugriff auf Ihr Benutzerprofil zu erhalten.

199
00:13:15,130 --> 00:13:16,820
Das ist also sehr wichtig.

200
00:13:16,820 --> 00:13:20,005
Da das Zugriffstoken jetzt eine begrenzte Lebensdauer hat,

201
00:13:20,005 --> 00:13:22,495
gibt es auch ein entsprechendes Aktualisierungstoken,

202
00:13:22,495 --> 00:13:27,550
das verwendet werden kann, um ein abgelaufenes Zugriffstoken zu aktualisieren.

203
00:13:27,550 --> 00:13:30,790
Nun, in der Art von Fluss, den wir

204
00:13:30,790 --> 00:13:35,500
mit unserer Anwendung in der Übung verwenden

205
00:13:35,500 --> 00:13:38,285
werden, können wir das Aktualisierungstoken nicht verwenden.

206
00:13:38,285 --> 00:13:41,620
Jedes Mal, wenn der Benutzer

207
00:13:41,620 --> 00:13:46,070
den Express-Server autorisieren möchte, um die Profilinformationen von Facebook abzurufen,

208
00:13:46,070 --> 00:13:48,470
muss der Benutzer explizit

209
00:13:48,470 --> 00:13:52,736
ein neues Zugriffstoken bereitstellen, das von Facebook erhalten wird.

210
00:13:52,736 --> 00:13:56,665
Der eine Teil, den ich gerade kurz erwähnt habe,

211
00:13:56,665 --> 00:13:58,221
aber ich habe nicht ausgearbeitet,

212
00:13:58,221 --> 00:14:01,920
ist, wie funktioniert die Client-Anwendung, der Express-Server,

213
00:14:01,920 --> 00:14:07,260
die Waage, wie registriert sie sich beim OAuth 2-Dienstanbieter?

214
00:14:07,260 --> 00:14:11,440
Jetzt bieten viele der OAuth 2-Dienstanbieter

215
00:14:11,440 --> 00:14:16,705
eine Möglichkeit, eine App auf ihrer Website zu registrieren.

216
00:14:16,705 --> 00:14:20,485
So

217
00:14:20,485 --> 00:14:25,875
registriert sich eine Client-Anwendung, die Express-Server in unserem Beispiel, als Client-Anwendung auf dem OAuth-Dienstanbieter.

218
00:14:25,875 --> 00:14:27,460
Wie Sie in der Übung sehen werden, ist der

219
00:14:27,460 --> 00:14:31,795
allererste Schritt, den wir tun werden, um sich mit

220
00:14:31,795 --> 00:14:37,795
unserem Konto bei Facebook anzumelden und dann eine App auf Facebook-Seite zu erstellen.

221
00:14:37,795 --> 00:14:44,020
Wenn Sie das tun, wird Facebook Ihnen eine Client-App-ID und ein Clientgeheimnis ausgeben.

222
00:14:44,020 --> 00:14:47,830
Dieses Verfahren gilt für viele andere OAuth-Dienstanbieter, da

223
00:14:47,830 --> 00:14:51,960
dies der allgemeine Ablauf ist, über den das OAuth 2-Protokoll spricht.

224
00:14:51,960 --> 00:14:57,130
Daher sind die Client-App-ID und das Client-Geheimnis nützlich für uns, um

225
00:14:57,130 --> 00:15:02,320
unsere Identität gegenüber

226
00:15:02,320 --> 00:15:08,960
dem OAuth Server beweisen zu können, wenn wir ein Zugriffstoken übergeben, das wir vom Benutzer erhalten.

227
00:15:08,960 --> 00:15:11,500
Jetzt gibt es auch eine Umleitungs-URL, die Sie

228
00:15:11,500 --> 00:15:14,650
registrieren müssen, wenn Sie die Client-Anwendung registrieren,

229
00:15:14,650 --> 00:15:18,520
und Sie werden sehen, wie ich das in den Schritten ausführen, die ich die

230
00:15:18,520 --> 00:15:23,410
App auf der Facebook-Website registriere.

231
00:15:23,410 --> 00:15:26,380
Nun, um den Informationsfluss zusammenzufassen

232
00:15:26,380 --> 00:15:29,765
, über den wir im früheren Fall kurz gesprochen haben,

233
00:15:29,765 --> 00:15:31,855
lassen Sie mich an dieser Stelle beginnen.

234
00:15:31,855 --> 00:15:35,295
Der erste Punkt, den Sie betrachten müssen, ist der Ressourcenbesitzer.

235
00:15:35,295 --> 00:15:39,355
Der Ressourcenbesitzer hier ist also der Benutzer, der

236
00:15:39,355 --> 00:15:43,660
sein Social-Media-Konto verwenden wird.

237
00:15:43,660 --> 00:15:45,625
Facebook

238
00:15:45,625 --> 00:15:49,490
hat in diesem Beispiel die Authentifizierung für den Benutzer.

239
00:15:49,490 --> 00:15:54,515
Der Ressourcenbesitzer ist also derjenige, der das Profil über die Ressource hat.

240
00:15:54,515 --> 00:15:57,760
Und diese Profilinformationen für jeden Facebook-Account

241
00:15:57,760 --> 00:16:00,535
wurden sie auf dem Facebook-Server gespeichert.

242
00:16:00,535 --> 00:16:05,067
Und so stellt der Facebook-Server hier den Ressourcenserver zur Verfügung.

243
00:16:05,067 --> 00:16:08,410
Das ist also der OAuth Service Provider, den Sie auf

244
00:16:08,410 --> 00:16:12,691
der rechten Seite dieses Bildes hier sehen.

245
00:16:12,691 --> 00:16:17,320
Stellen Sie sich also vor, der Facebook-Server auf der rechten Seite, diese Client-Anwendung,

246
00:16:17,320 --> 00:16:18,928
die den Rest API-Server hat,

247
00:16:18,928 --> 00:16:20,477
den Express-Server, den wir implementiert haben,

248
00:16:20,477 --> 00:16:22,270
ist in diesem Fall eine Client-Anwendung,

249
00:16:22,270 --> 00:16:24,700
und der Ressourcenbesitzer ist der Benutzer.

250
00:16:24,700 --> 00:16:28,780
URL-Front-End-Benutzer, die

251
00:16:28,780 --> 00:16:33,510
Sie autorisieren, zu Facebook zu gehen, um die Anmeldeinformationen des Benutzers zu überprüfen.

252
00:16:33,510 --> 00:16:39,245
Wenn Sie also auf Informationen auf der Clientseite zugreifen möchten,

253
00:16:39,245 --> 00:16:44,355
müssen Sie zuerst

254
00:16:44,355 --> 00:16:47,730
diese Client-Anwendung autorisieren, um

255
00:16:47,730 --> 00:16:51,673
Zugriff auf Ihre Profilinformationen zu erhalten.

256
00:16:51,673 --> 00:16:52,855
Also die Client-Anwendung,

257
00:16:52,855 --> 00:16:55,120
wenn sie als Web-App fungiert,

258
00:16:55,120 --> 00:17:00,095
wird es eine entsprechende Schaltfläche darin bereitstellen, die sich mit Facebook einloggen sagt.

259
00:17:00,095 --> 00:17:01,740
Und wenn Sie also auf die Schaltfläche klicken, wird

260
00:17:01,740 --> 00:17:04,780
im Wesentlichen der erste Schritt initiiert.

261
00:17:04,780 --> 00:17:07,375
Die Benutzerautorisierungsanforderung wird initiiert.

262
00:17:07,375 --> 00:17:09,270
Ihre Client-Anwendung,

263
00:17:09,270 --> 00:17:10,910
über den Benutzeragent,

264
00:17:10,910 --> 00:17:17,409
ist der Benutzeragent im Grunde die Client-Anwendung, die Front-End-Anwendung.

265
00:17:17,409 --> 00:17:22,725
Es könnte die Angular-App sein, die wir entwickelt haben oder diese mobile App,

266
00:17:22,725 --> 00:17:25,950
ob es Ionic ist oder ob es

267
00:17:25,950 --> 00:17:30,120
eine NativeScript-App ist, die wir in den Kursen früher in

268
00:17:30,120 --> 00:17:37,807
der Spezialisierung entwickelt haben, oder sogar eine native App wie eine iOS-App oder eine Android-App.

269
00:17:37,807 --> 00:17:39,060
All diese fungieren als User-Agent.

270
00:17:39,060 --> 00:17:42,360
Also der User-Agent,

271
00:17:42,360 --> 00:17:45,420
sie verwenden einen Autorisierungsanforderungsprozess durch

272
00:17:45,420 --> 00:17:48,360
den User-Agent an den Autorisierungsserver

273
00:17:48,360 --> 00:17:50,500
, der der Facebook-Server ist.

274
00:17:50,500 --> 00:17:52,235
Wenn das nun übergeben wird,

275
00:18:01,065 --> 00:18:03,690
muss der Ressourcenbesitzer oder der Benutzer, der versucht, Zugriff auf sein Profil dieser Client-Anwendung zu gewähren, Facebook autorisieren, um

276
00:18:03,690 --> 00:18:06,600
diese Informationen mit der Client-Anwendung teilen zu können.

277
00:18:06,600 --> 00:18:11,250
In dem impliziten Flow Grant-Ansatz, den wir in

278
00:18:11,250 --> 00:18:16,025
unserem Beispiel hier und auch in der folgenden Übung verwenden,

279
00:18:16,025 --> 00:18:18,390
ist der implizite Flow Grant-Ansatz

280
00:18:18,390 --> 00:18:22,875
der am besten geeignete Ansatz, wenn Sie eine Web-App mit

281
00:18:22,875 --> 00:18:26,563
einem Framework wie Angular oder der hybriden mobilen App

282
00:18:26,563 --> 00:18:30,925
mit Ionic oder einem NativeScript oder sogar eine native App.

283
00:18:30,925 --> 00:18:34,320
Der implizite Flow Grant-Ansatz ist viel einfachere Art,

284
00:18:34,320 --> 00:18:39,170
die OAuth 2 für solche Anwendungen zu betreiben.

285
00:18:39,170 --> 00:18:43,930
Dann klickt der Ressourcenbesitzer auf die Anmeldeschaltfläche,

286
00:18:43,930 --> 00:18:49,710
dann fordert der Autorisierungsserver den Ressourcenbesitzer mit den Informationen auf, die besagen:

287
00:18:49,710 --> 00:18:54,330
„Diese Client-Anwendung möchte auf Ihre Profilinformationen zugreifen.

288
00:18:54,330 --> 00:18:55,725
Genehmigen Sie es?“

289
00:18:55,725 --> 00:18:58,965
Und so wird dies von Facebook aufgetaucht werden,

290
00:18:58,965 --> 00:19:01,860
und dann werden Sie auf eine Schaltfläche klicken, die sagt: „Ja,

291
00:19:01,860 --> 00:19:05,278
ich autorisieren diese Client-Anwendung, um in meinem Namen zuzugreifen.“

292
00:19:05,278 --> 00:19:06,645
An diesem Punkt

293
00:19:11,190 --> 00:19:13,380
generiert der Autorisierungsserver auf Facebook, der OAuth 2-Autorisierungsserver auf Facebook, ein Zugriffstoken.

294
00:19:13,380 --> 00:19:15,105
Um dieses Zugriffstoken zu generieren,

295
00:19:15,105 --> 00:19:20,405
verwendet es die Client-ID für diese Client-Anwendung,

296
00:19:20,405 --> 00:19:22,535
die Express-Server-Anwendung, die wir registrieren.

297
00:19:22,535 --> 00:19:28,165
Daher sollte die Client-ID Teil des Benutzeragenten sein, den dieser Benutzer verwendet.

298
00:19:28,165 --> 00:19:33,093
Diese Client-ID wird also in die Angular-App,

299
00:19:33,093 --> 00:19:38,585
die Ionic oder die NativeScript-App oder sogar eine iOS- oder Android-App eingebettet.

300
00:19:38,585 --> 00:19:40,560
Die Client-ID wird dann vom

301
00:19:40,560 --> 00:19:43,410
User-Agent verwendet, um den Autorisierungsserver zu drehen und zu sagen:

302
00:19:43,410 --> 00:19:48,108
„Diese Client-App-Anwendung will Zugriff auf mein Profil,

303
00:19:48,108 --> 00:19:52,704
und ich bin bereit, Sie zu autorisieren, den Zugriff auf das Profil zu erlauben.“

304
00:19:52,704 --> 00:19:53,760
Zu diesem Zeitpunkt

305
00:19:53,760 --> 00:19:59,290
sendet der Autorisierungsserver in diesem Fall ein Zugriffstoken an den User-Agent.

306
00:19:59,290 --> 00:20:02,670
Denken Sie also daran, dass dieses Zugriffstoken in den Benutzeragenten kommt,

307
00:20:02,670 --> 00:20:09,180
d. h. die mobile App oder ihre Angular-App, die von uns implementiert wird.

308
00:20:09,180 --> 00:20:12,870
Dann wird dieser Benutzeragent dieses Zugriffstoken nehmen und

309
00:20:12,870 --> 00:20:18,479
dann dieses Zugriffstoken an diese Clientanwendung übergeben.

310
00:20:18,479 --> 00:20:20,310
Also die OAuth, um sich

311
00:20:20,310 --> 00:20:23,305
anzumelden, aber das Zugriffstoken wird an die Clientanwendung übergeben,

312
00:20:23,305 --> 00:20:25,200
der Express-Server in diesem Fall

313
00:20:25,200 --> 00:20:32,340
an einer bestimmten Route auf dem Router des Benutzers,

314
00:20:32,340 --> 00:20:37,465
die Authentifizierungsroute auf dem Clientanwendungsstandort.

315
00:20:37,465 --> 00:20:41,000
Nun, zuvor, sahen wir die Verwendung der lokalen Authentifizierung,

316
00:20:41,000 --> 00:20:45,985
wo wir eine Anfrage gesendet Schrägstrich Benutzerschrägstrich anmelden.

317
00:20:45,985 --> 00:20:48,250
Nun, damit dies in unserer App funktioniert,

318
00:20:48,250 --> 00:20:50,580
werden wir eine andere für Schrägstrich Benutzer einrichten,

319
00:20:50,580 --> 00:20:54,095
Schrägstrich Facebook, Schrägstrich und so weiter.

320
00:20:54,095 --> 00:21:02,500
Also eine andere URL, auf der wir dieses Zugriffstoken an den Express-Server zur Verfügung stellen.

321
00:21:02,500 --> 00:21:06,280
Wenn dieses Zugriffstoken nun vom Express-Server abgerufen

322
00:21:06,280 --> 00:21:09,630
wird, nimmt der Express-Server dieses Zugriffstoken

323
00:21:09,630 --> 00:21:14,240
und

324
00:21:14,240 --> 00:21:20,200
sendet dann zusammen mit seiner Client-ID und dem Clientgeheimnis diese Informationen an den Autorisierungsserver.

325
00:21:20,200 --> 00:21:25,140
Und der Autorisierungsserver erlaubt dann seiner Clientanwendung

326
00:21:25,140 --> 00:21:30,565
den Zugriff auf den Ressourcenserver, um die Profilinformationen zu erhalten.

327
00:21:30,565 --> 00:21:35,060
Und so werden die Profilinformationen in Schritt 6 zurückgesendet,

328
00:21:35,060 --> 00:21:37,890
in diesem Fall zurück an die Client-Anwendung.

329
00:21:37,890 --> 00:21:42,015
Wenn die Clientanwendung die Profilinformationen für den Benutzer

330
00:21:42,015 --> 00:21:46,380
abruft, erstellt die Clientanwendung ein neues Konto für

331
00:21:46,380 --> 00:21:51,785
den Benutzer auf jeder Site, wenn kein Konto vorhanden ist.

332
00:21:51,785 --> 00:21:56,090
Wenn sich dieser Benutzer bereits früher mit seiner Facebook-ID angemeldet hat, ist

333
00:21:56,090 --> 00:22:00,045
bereits ein Konto vorhanden, so dass die Client-Anwendung und der Rest API-Server

334
00:22:00,045 --> 00:22:05,485
einfach kreuzen, um zu sehen, dass dieses Benutzerkonto bereits existiert.

335
00:22:05,485 --> 00:22:06,865
Und zu diesem Zeitpunkt

336
00:22:06,865 --> 00:22:12,550
wird der Benutzer bei der Drittanbieter-Anmeldefunktion authentifiziert,

337
00:22:12,550 --> 00:22:18,321
die vom OAuth 2-Authentifizierungsdienst von Facebook bereitgestellt wird.

338
00:22:18,321 --> 00:22:23,275
An diesem Punkt generiert die Clientanwendung ein JSON-Web-Token,

339
00:22:23,275 --> 00:22:26,010
in dem Beispiel, das wir implementieren und trainieren,

340
00:22:26,010 --> 00:22:33,040
und übergeben dann dieses JSON-Web-Token zurück an den Benutzeragenten oder die Front-End-Anwendung

341
00:22:33,040 --> 00:22:35,845
oder die Angular-App oder die Ionic App

342
00:22:35,845 --> 00:22:38,590
oder die NativeScript-App.

343
00:22:38,590 --> 00:22:45,160
Dann wird das JSON-Web-Token anschließend vom Benutzer verwendet, um

344
00:22:45,160 --> 00:22:48,790
sich zu authentifizieren, wenn er auf

345
00:22:48,790 --> 00:22:53,145
Ressourcen zugreifen möchte, die auf dem Express-Server gespeichert sind.

346
00:22:53,145 --> 00:22:55,505
Sobald Sie also das JSON Web Token,

347
00:22:55,505 --> 00:23:00,975
alle nachfolgenden Operationen, erhalten haben, haben Sie bereits gesehen, wie Sie das mit JSON Web Token tun können.

348
00:23:00,975 --> 00:23:03,565
Sobald Sie also das JSON Web Token erhalten,

349
00:23:03,565 --> 00:23:05,070
ist Ihre Aufgabe erledigt,

350
00:23:05,070 --> 00:23:10,150
und Sie können dann mit dem normalen Vorgang von diesem Punkt an fortfahren.

351
00:23:10,150 --> 00:23:12,940
Wenn das JSON-Web-Token abläuft,

352
00:23:12,940 --> 00:23:17,618
müssen Sie den gesamten Prozess der erneuten Authentifizierung durchlaufen und

353
00:23:17,618 --> 00:23:22,990
anschließend den Benutzern den Zugriff auf Informationen auf Ihrer Website ermöglichen.

354
00:23:22,990 --> 00:23:29,710
Also, mit diesem schnellen Verständnis, wie OAuth 2-Operationen funktionieren

355
00:23:29,710 --> 00:23:33,385
, wieder, wie Sie sehen, gibt es hier viele Details.

356
00:23:33,385 --> 00:23:38,950
Aber zum Glück müssen wir uns nicht mit all diesen Details beschäftigen, weil wir

357
00:23:38,950 --> 00:23:46,285
ein Knotenmodul verwenden, das sich um viele dieser Details in unserem Namen kümmert.

358
00:23:46,285 --> 00:23:52,195
Da wir unseren Express-Server bereits für die Verwendung von Passport eingerichtet haben,

359
00:23:52,195 --> 00:24:00,980
können wir nun einen weiteren Knotenmodul-Code als Passport-Facebook-Token-Modul verwenden.

360
00:24:00,980 --> 00:24:04,595
Das Passport-Facebook-Token-Modul implementiert im Wesentlichen

361
00:24:04,595 --> 00:24:08,580
den impliziten Grant-Ansatz, über den ich früher gesprochen habe.

362
00:24:08,580 --> 00:24:11,320
Und dann können Sie

363
00:24:11,320 --> 00:24:18,160
eine neue Strategie in Ihrer Passport-Strategie innerhalb Ihrer Anwendung initialisieren.

364
00:24:18,160 --> 00:24:22,720
Damit das Passport-Facebook-Token-Modul Ihnen ermöglicht,

365
00:24:22,720 --> 00:24:31,090
eine neue Passport-Authentifizierungsstrategie für die Verwendung von Facebook-basierter OAuth 2-API einzurichten.

366
00:24:31,090 --> 00:24:36,085
Und so, um dieses Modul zu nutzen,

367
00:24:36,085 --> 00:24:41,615
installieren Sie dies, indem Sie sagen, Vergangenheit npm installieren Pass - Facebook-Token,

368
00:24:41,615 --> 00:24:44,980
minus sparen, und dann, wenn Sie das installiert,

369
00:24:44,980 --> 00:24:51,010
dann werden Sie eine Facebook-Strategie innerhalb Ihrer Anwendung konfigurieren, und danach

370
00:24:51,010 --> 00:24:57,810
nutzen Sie dies, um die Strategie zu konfigurieren , um Ihren Passport

371
00:24:57,810 --> 00:25:04,990
zu nutzen, wenn wir die OAuth 2-basierte Authentifizierung für unsere Anwendung nutzen.

372
00:25:04,990 --> 00:25:09,270
Mit diesem schnellen Verständnis von OAuth 2

373
00:25:09,270 --> 00:25:11,770
gehen wir zur Übung über,

374
00:25:11,770 --> 00:25:16,630
wo wir unseren Express-Server so konfigurieren werden, dass er tatsächlich

375
00:25:16,630 --> 00:25:20,920
diesen impliziten Grant-Ansatz nutzt, um uns zu ermöglichen

376
00:25:20,920 --> 00:25:25,450
, unsere Identität gegenüber dem Express-Server zu überprüfen und

377
00:25:25,450 --> 00:25:29,745
danach Zugang zu den Ressourcen, den Gerichten,

378
00:25:29,745 --> 00:25:38,180
die Werbeaktionen und die Informationen der Führer, die auf unserem Express-Server gespeichert sind.