1
00:00:03,620 --> 00:00:09,015
Je suis sûr que vous avez un ou plusieurs comptes de médias sociaux.

2
00:00:09,015 --> 00:00:13,920
Que ce soit Facebook, Twitter, YouTube, Google, GitHub,

3
00:00:13,920 --> 00:00:19,760
ou bien d'autres fournisseurs de services de ce type, où vous avez enregistré votre téléphone et votre compte.

4
00:00:19,760 --> 00:00:22,545
Maintenant, ces fournisseurs de services à leur tour,

5
00:00:22,545 --> 00:00:27,480
sont prêts à fournir des services d'authentification en votre nom.

6
00:00:27,480 --> 00:00:32,880
Ainsi, par exemple, vous voyez la prolifération d'un certain nombre de sites Web

7
00:00:32,880 --> 00:00:37,440
et d'applications mobiles où vous êtes autorisé à vous connecter à

8
00:00:37,440 --> 00:00:40,260
l'aide de vos comptes de médias sociaux.

9
00:00:40,260 --> 00:00:42,805
Maintenant, comment ça marche réellement ?

10
00:00:42,805 --> 00:00:47,270
Beaucoup de ces fournisseurs de comptes de médias sociaux agissent

11
00:00:47,270 --> 00:00:53,945
en tant que fournisseurs de services d'authentification utilisant un protocole appelé OAuth.

12
00:00:53,945 --> 00:01:00,660
Nous allons examiner OAuth et comment il permet à ces fournisseurs d'authentification tiers de

13
00:01:00,660 --> 00:01:04,995
fournir une authentification en votre nom

14
00:01:04,995 --> 00:01:14,183
et vous permettre de vous connecter à d'autres services à l'aide de leurs comptes de médias sociaux.

15
00:01:14,183 --> 00:01:18,510
Je suis sûr que vous avez peut-être entendu parler de OAuth 1 et OAuth 2,

16
00:01:18,510 --> 00:01:21,370
et peut-être entendu des gens dire

17
00:01:21,370 --> 00:01:24,669
que Facebook fournit l'authentification basée sur OAuth 2,

18
00:01:24,669 --> 00:01:28,450
ou Google fournit l'authentification basée sur OAuth 2 et ainsi de suite.

19
00:01:28,450 --> 00:01:29,800
Je suis sûr que vous devez vous demander,

20
00:01:29,800 --> 00:01:35,240
ce que ces OAuth1 et OAuth 2 sont censés être exactement ?

21
00:01:35,240 --> 00:01:40,090
Maintenant, OAuth1 et OAuth 2 sont des frameworks

22
00:01:40,090 --> 00:01:42,920
d'autorisation basés sur des standards ouverts.

23
00:01:42,920 --> 00:01:46,110
Et ceux-ci peuvent être utilisés sur Internet pour authentifier

24
00:01:46,110 --> 00:01:50,375
votre identité sur de nombreux sites Web ou applications mobiles.

25
00:01:50,375 --> 00:01:52,475
Maintenant, lorsque vous utilisez ces services,

26
00:01:52,475 --> 00:01:56,470
vous dépendrez de l'un des comptes de médias sociaux comme 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, et bien d'autres,

29
00:02:02,380 --> 00:02:06,915
qui fournissent ces services d'authentification à d'autres utilisateurs.

30
00:02:06,915 --> 00:02:10,465
Ces fournisseurs de services d'authentification promettent

31
00:02:10,465 --> 00:02:15,310
aux utilisateurs de ces services d'authentification qu'ils authentifieront l'identité

32
00:02:15,310 --> 00:02:18,535
de l'utilisateur en fonction de leur soumission de

33
00:02:18,535 --> 00:02:24,100
leurs informations d'identification pour ces services de médias sociaux.

34
00:02:24,100 --> 00:02:28,630
Maintenant, il existe un service complémentaire OpenID.

35
00:02:28,630 --> 00:02:34,220
Mais, bien sûr, pas lié à OAuth mais fournit un type de service similaire.

36
00:02:34,220 --> 00:02:38,005
Mais la plupart des fournisseurs de services de médias sociaux standard,

37
00:02:38,005 --> 00:02:39,835
comme vous le verrez ci-dessous,

38
00:02:39,835 --> 00:02:44,290
fournissent des services basés sur OAuth 2 ces jours-ci.

39
00:02:44,290 --> 00:02:48,760
Maintenant, comme je l'ai mentionné, OAuth1 et OAuth 2 sont des protocoles d'authentification,

40
00:02:48,760 --> 00:02:53,010
et OAuth 1 a été le premier protocole à être né.

41
00:02:53,010 --> 00:02:55,165
Cela a été développé à partir de Twitter,

42
00:02:55,165 --> 00:02:58,725
Blaine Cook étant la personne derrière elle,

43
00:02:58,725 --> 00:03:04,330
et cela est documenté dans Internet Engineering Task Force, RFC 5849.

44
00:03:04,330 --> 00:03:08,235
Donc, si vous voulez lire les détails gorieux de la façon dont ces protocoles fonctionnent,

45
00:03:08,235 --> 00:03:11,350
c'est l'endroit pour le trouver. Le

46
00:03:11,350 --> 00:03:18,430
protocole OAuth 2 a évolué à partir d'OAuth 1 pour le rendre plus simple

47
00:03:18,430 --> 00:03:23,420
et pour fournir un moyen plus simple de développement client.

48
00:03:23,420 --> 00:03:29,050
Et cela est documenté dans IETF RFC 6749 et par la suite,

49
00:03:29,050 --> 00:03:35,975
une autre utilisation de jeton de porteur est apparue dans IETF RFC 6750.

50
00:03:35,975 --> 00:03:38,155
Maintenant, de notre point de vue,

51
00:03:38,155 --> 00:03:42,926
nous ne voulons pas vraiment entrer dans les détails de la façon dont ces protocoles fonctionnent réellement.

52
00:03:42,926 --> 00:03:45,640
Au lieu de cela, tout ce qui nous intéresse, c'est,

53
00:03:45,640 --> 00:03:51,505
comment les utiliser pour l'authentification des utilisateurs dans notre application Web,

54
00:03:51,505 --> 00:03:53,460
ou dans notre application mobile,

55
00:03:53,460 --> 00:03:56,215
quand nous devons authentifier l'utilisateur sur

56
00:03:56,215 --> 00:03:59,965
le serveur Express sur lequel nous avons construit jusqu'à présent ?

57
00:03:59,965 --> 00:04:04,330
Maintenant, nous allons principalement nous concentrer sur OAuth 2,

58
00:04:04,330 --> 00:04:05,710
parce que dans l'exercice,

59
00:04:05,710 --> 00:04:10,960
nous allons examiner l'utilisation de Facebook en tant que fournisseur de services d'authentification OAuth 2

60
00:04:10,960 --> 00:04:13,870
, et ici, nous devons comprendre

61
00:04:13,870 --> 00:04:19,810
quelques termes pour voir comment fonctionne exactement ce protocole OAuth 2.

62
00:04:19,810 --> 00:04:25,065
Au moins, les détails nus de la façon dont le protocole lui-même fonctionne.

63
00:04:25,065 --> 00:04:26,995
Maintenant, dans le cas d'OAuth 2,

64
00:04:26,995 --> 00:04:30,440
nous parlons toujours d'une propriété de ressource.

65
00:04:30,440 --> 00:04:32,200
Maintenant, dans ce cas,

66
00:04:32,200 --> 00:04:34,810
la ressource à laquelle je fais référence n'est pas

67
00:04:34,810 --> 00:04:37,870
la ressource qui est stockée sur le serveur Express.

68
00:04:37,870 --> 00:04:39,655
Au lieu de cela, la ressource à laquelle nous faisons référence ici,

69
00:04:39,655 --> 00:04:42,055
est l'identité de l'utilisateur.

70
00:04:42,055 --> 00:04:45,760
Maintenant, tout serveur, comme le serveur Express que nous avons construit,

71
00:04:45,760 --> 00:04:48,310
veut avoir accès à cette ressource,

72
00:04:48,310 --> 00:04:50,000
c'est votre identité.

73
00:04:50,000 --> 00:04:51,760
Où est votre identité ?

74
00:04:51,760 --> 00:04:54,160
Votre identité est stockée sur l'un de

75
00:04:54,160 --> 00:04:58,457
ces fournisseurs de services d'authentification de médias sociaux comme Facebook et ainsi de suite,

76
00:04:58,457 --> 00:05:03,140
car vous avez déjà créé un compte sur ces sites de médias sociaux.

77
00:05:03,140 --> 00:05:06,920
Ainsi, vos informations, vos informations d'identité ou

78
00:05:06,920 --> 00:05:11,020
vos informations de profil sont stockées sur Facebook, par exemple.

79
00:05:11,020 --> 00:05:15,550
Maintenant, votre serveur Express veut accéder à votre identité et

80
00:05:15,550 --> 00:05:20,650
vérifier que c'est vraiment vous qui essayez d'accéder au serveur Express.

81
00:05:20,650 --> 00:05:22,000
Ainsi, dans ce cas,

82
00:05:22,000 --> 00:05:24,690
le serveur Express que nous avons développé,

83
00:05:24,690 --> 00:05:27,390
agit comme l'application cliente.

84
00:05:27,390 --> 00:05:29,170
Donc, c'est là que l'application cliente,

85
00:05:29,170 --> 00:05:33,265
qui est le site Web ou l'application mobile qui

86
00:05:33,265 --> 00:05:38,905
veut accéder au serveur de ressources afin d'obtenir les informations vous concernant.

87
00:05:38,905 --> 00:05:41,530
Qu' est-ce qu'un serveur de ressources dont nous parlons ?

88
00:05:41,530 --> 00:05:45,730
Il s'agit du serveur d'authentification OAuth Facebook,

89
00:05:45,730 --> 00:05:49,870
qui fournit également vos informations de profil sur demande.

90
00:05:49,870 --> 00:05:54,490
Maintenant, bien sûr, vous ne continuerez pas de distribuer au hasard les informations de votre profil.

91
00:05:54,490 --> 00:06:00,370
Au lieu de cela, vous souhaitez être en mesure de vérifier que vous fournissez l'accès aux

92
00:06:00,370 --> 00:06:08,250
informations de votre profil à un fournisseur de services authentifié ou à un serveur authentifié.

93
00:06:08,250 --> 00:06:12,610
Maintenant, c'est là que votre application cliente ou le serveur Express ici,

94
00:06:12,610 --> 00:06:18,535
par exemple, s'inscrira sur Facebook avec un compte disant que j'exploite une application,

95
00:06:18,535 --> 00:06:25,780
et je veux m'inscrire en tant que source potentielle qui peut

96
00:06:25,780 --> 00:06:29,680
vous approcher pour authentifier les utilisateurs lorsqu'ils donnent

97
00:06:29,680 --> 00:06:33,859
accès à leur profil qui est stocké sur votre site.

98
00:06:33,859 --> 00:06:35,335
Ainsi, le serveur Express,

99
00:06:35,335 --> 00:06:37,645
dans ce cas agissant comme l'application cliente,

100
00:06:37,645 --> 00:06:45,790
va s'enregistrer sur Facebook et obtenir un ClientID et un secret client de Facebook.

101
00:06:45,790 --> 00:06:48,955
Maintenant, lorsque le serveur Express s'inscrit sur Facebook,

102
00:06:48,955 --> 00:06:52,240
vous devez avoir un compte sur Facebook,

103
00:06:52,240 --> 00:06:53,950
un compte authentifié sur Facebook,

104
00:06:53,950 --> 00:06:59,030
que vous utiliserez pour configurer cette application sur Facebook.

105
00:06:59,030 --> 00:07:01,450
Ainsi, une fois que vous vous

106
00:07:01,450 --> 00:07:06,680
inscrivez, vous aurez accès à un ID client et à un secret client.

107
00:07:06,680 --> 00:07:08,650
Maintenant, le serveur de ressources,

108
00:07:08,650 --> 00:07:12,310
comme je l'ai mentionné, est le serveur qui héberge les données protégées.

109
00:07:12,310 --> 00:07:18,665
Données protégées signifiant le profil de l'utilisateur qui souhaite accéder au serveur Express.

110
00:07:18,665 --> 00:07:22,300
Ainsi, le serveur Express veut accéder à ce serveur

111
00:07:22,300 --> 00:07:28,415
de ressources et obtenir les données de profil de l'utilisateur qui veut accéder au serveur Express.

112
00:07:28,415 --> 00:07:31,265
Donc, vous voyez la relation ici.

113
00:07:31,265 --> 00:07:33,355
Donc, quand je parle d'une application cliente,

114
00:07:33,355 --> 00:07:36,535
je ne parle pas de leur application frontale,

115
00:07:36,535 --> 00:07:40,000
mais de leur serveur Express qui essaie de vous fournir

116
00:07:40,000 --> 00:07:44,190
l'accès aux ressources qu'il a sur son site.

117
00:07:44,190 --> 00:07:45,635
Mais le serveur Express,

118
00:07:45,635 --> 00:07:48,940
afin de vous permettre d'y accéder,

119
00:07:48,940 --> 00:07:53,200
aura besoin d'accéder à votre serveur de ressources Facebook qui

120
00:07:53,200 --> 00:07:58,655
vous authentifiera et fournira vos informations de profil au serveur Express.

121
00:07:58,655 --> 00:08:01,375
Donc, le serveur de ressources dont je parle ici,

122
00:08:01,375 --> 00:08:06,190
est le serveur d'authentification OAuth 2 de Facebook

123
00:08:06,190 --> 00:08:11,681
plus le serveur de ressources qui vous donne accès aux informations de profil de l'utilisateur.

124
00:08:11,681 --> 00:08:16,180
Et le serveur d'autorisation est le serveur qui

125
00:08:16,180 --> 00:08:19,210
autorisera quelqu'un à accéder

126
00:08:19,210 --> 00:08:22,825
au serveur de ressources afin de récupérer les informations de profil.

127
00:08:22,825 --> 00:08:27,375
Maintenant, l'utilisateur est celui qui a les informations de profil sur le serveur de ressources.

128
00:08:27,375 --> 00:08:30,610
L' utilisateur doit autoriser le serveur Express à accéder

129
00:08:30,610 --> 00:08:34,035
à ce serveur de ressources pour récupérer les informations de profil.

130
00:08:34,035 --> 00:08:37,000
Mais si l'utilisateur doit autoriser le serveur Express,

131
00:08:37,000 --> 00:08:40,045
l'utilisateur doit se connecter au compte Facebook,

132
00:08:40,045 --> 00:08:45,115
puis obtenir des informations de Facebook appelé comme un jeton d'accès,

133
00:08:45,115 --> 00:08:48,995
que l'utilisateur transmettra ensuite au serveur Express.

134
00:08:48,995 --> 00:08:54,750
Maintenant, lorsque le jeton d'accès est obtenu à partir de Facebook via le protocole OAuth 2,

135
00:08:54,750 --> 00:08:58,090
le jeton d'accès sera émis en termes

136
00:08:58,090 --> 00:09:01,675
d'autorisation de cette application cliente ou du serveur Express,

137
00:09:01,675 --> 00:09:04,885
qui est déjà enregistré sur Facebook en disant que

138
00:09:04,885 --> 00:09:08,020
ce serveur client j'autoriserai à

139
00:09:08,020 --> 00:09:15,265
accéder leurs informations de profil de leur fournisseur de services OAuth Facebook.

140
00:09:15,265 --> 00:09:18,290
Donc, encore une fois, c'est un peu déroutant.

141
00:09:18,290 --> 00:09:20,940
Nous verrons un diagramme où ce flux d'

142
00:09:20,940 --> 00:09:24,360
informations vous est expliqué un peu plus clairement.

143
00:09:24,360 --> 00:09:32,380
Un point que je viens de mentionner concerne un jeton OAuth ou le jeton d'accès.

144
00:09:32,380 --> 00:09:34,090
Quel est ce jeton d'accès ?

145
00:09:34,090 --> 00:09:38,675
Le jeton d'accès est quelque chose que le serveur d'autorisation émet pour vous.

146
00:09:38,675 --> 00:09:40,620
Quel serveur d'autorisation ?

147
00:09:40,620 --> 00:09:44,100
Il s'agit du serveur d'autorisation OAuth 2 tiers, le

148
00:09:44,100 --> 00:09:46,668
serveur Facebook, dans cet exemple.

149
00:09:46,668 --> 00:09:51,130
C' est donc une application serveur Express.

150
00:09:51,130 --> 00:09:54,485
Maintenant, vous, en tant qu'utilisateur frontal,

151
00:09:54,485 --> 00:09:58,070
voulez accéder à quelque chose à partir de l'application serveur Express.

152
00:09:58,070 --> 00:10:02,150
L' application serveur Express vous dira que vous

153
00:10:02,150 --> 00:10:06,666
vous authentifiez à partir de Facebook, puis obtenir le jeton d'accès de Facebook.

154
00:10:06,666 --> 00:10:09,770
Ce jeton d'accès est émis à

155
00:10:09,770 --> 00:10:16,330
l'utilisateur frontal à partir de Facebook lorsque l'utilisateur se connecte à son compte Facebook.

156
00:10:16,330 --> 00:10:21,155
Maintenant, ce jeton d'accès est émis dans le nom de l'application cliente, le

157
00:10:21,155 --> 00:10:25,060
serveur Express, qui a déjà enregistré sur Facebook.

158
00:10:25,060 --> 00:10:30,485
Ainsi, pour que l'utilisateur accède à Facebook pour obtenir son jeton d'accès,

159
00:10:30,485 --> 00:10:36,580
l'utilisateur a besoin de l'ID client de l'application cliente ou de l'application Express.

160
00:10:36,580 --> 00:10:39,755
Cet ID client est donc intégré dans

161
00:10:39,755 --> 00:10:44,460
l'application frontale que ce serveur Express vous servira.

162
00:10:44,460 --> 00:10:47,915
Donc, le serveur Express sert un site Web auquel vous accédez,

163
00:10:47,915 --> 00:10:50,820
alors ce site Web contiendra

164
00:10:50,820 --> 00:10:56,597
le code dans lequel l'ID client de ce serveur Express est déjà intégré.

165
00:10:56,597 --> 00:11:00,110
Une autre information que j'ai mentionnée est un secret client.

166
00:11:00,110 --> 00:11:03,855
Maintenant, dans le flux d'authentification dont je vais parler,

167
00:11:03,855 --> 00:11:07,640
le secret du client ne sera jamais révélé à personne.

168
00:11:07,640 --> 00:11:11,700
Le secret client sera uniquement sur le côté serveur Express.

169
00:11:11,700 --> 00:11:15,335
Lorsque le serveur Express tente d'authentifier et

170
00:11:15,335 --> 00:11:20,600
d'obtenir l'accès au profil de l'utilisateur à partir de Facebook,

171
00:11:20,600 --> 00:11:23,795
l'application cliente, le serveur Express

172
00:11:23,795 --> 00:11:27,490
enverra à la fois l'ID client et le secret client,

173
00:11:27,490 --> 00:11:32,555
ainsi que le jeton d'accès que l'utilisateur lui fournit à Facebook.

174
00:11:32,555 --> 00:11:34,988
Et Facebook, à son tour,

175
00:11:34,988 --> 00:11:38,945
autorise leur application cliente à accéder

176
00:11:38,945 --> 00:11:43,935
au serveur de ressources afin d'obtenir les données de profil de l'utilisateur.

177
00:11:43,935 --> 00:11:50,390
Et une fois que les données de profil de l'utilisateur sont obtenues à partir du serveur de ressources Facebook,

178
00:11:50,390 --> 00:11:54,530
mon serveur Express va créer un compte

179
00:11:54,530 --> 00:11:59,383
pour cet utilisateur particulier qui l'a connecté avec son compte Facebook.

180
00:11:59,383 --> 00:12:05,995
Puis, par la suite, fournissez un jeton web JSON à

181
00:12:05,995 --> 00:12:09,190
l'utilisateur,

182
00:12:09,190 --> 00:12:12,530
que l'utilisateur peut ensuite utiliser pour accéder aux ressources stockées sur le serveur Express.

183
00:12:12,530 --> 00:12:15,040
Donc, encore une fois, pour résumer cela,

184
00:12:15,040 --> 00:12:20,387
j'ai un diagramme ici pour vous expliquer cela un peu plus en détail.

185
00:12:20,387 --> 00:12:22,000
En plus de cela,

186
00:12:22,000 --> 00:12:24,225
il y a aussi un jeton d'actualisation.

187
00:12:24,225 --> 00:12:29,910
Lorsqu' un jeton d'accès est émis par le serveur Facebook OAuth 2,

188
00:12:29,910 --> 00:12:31,875
le jeton d'accès a une durée de vie limitée.

189
00:12:31,875 --> 00:12:34,750
Après cela, le jeton d'accès deviendra invalide.

190
00:12:34,750 --> 00:12:39,203
Donc, le jeton d'accès doit rester confidentiel.

191
00:12:39,203 --> 00:12:43,285
Donc, tout cet échange de jetons entre les différents sites

192
00:12:43,285 --> 00:12:48,040
se fera dans une matière cryptée en utilisant le protocole HTTPS.

193
00:12:48,040 --> 00:12:50,980
Assurez-vous donc que lorsque vous envoyez votre jeton d'accès de

194
00:12:50,980 --> 00:12:56,838
votre application frontale utilisateur au serveur Express,

195
00:12:56,838 --> 00:13:02,146
vous n'envoyez le jeton d'accès que via HTTPS, et non HTTP.

196
00:13:02,146 --> 00:13:04,930
Ceci est très important parce que vous ne

197
00:13:04,930 --> 00:13:08,110
voulez pas que votre jeton d'accès soit révélé à quiconque parce que

198
00:13:08,110 --> 00:13:10,960
quiconque peut obtenir un de votre jeton d'accès peut prétendre être

199
00:13:10,960 --> 00:13:15,130
son application cliente et ensuite accéder à votre profil utilisateur.

200
00:13:15,130 --> 00:13:16,820
C' est donc très important.

201
00:13:16,820 --> 00:13:20,005
Maintenant, puisque le jeton d'accès a une durée de vie limitée,

202
00:13:20,005 --> 00:13:22,495
il existe également un jeton d'actualisation correspondant,

203
00:13:22,495 --> 00:13:27,550
qui peut être utilisé pour actualiser un jeton d'accès expiré.

204
00:13:27,550 --> 00:13:30,790
Maintenant, dans le type de flux que nous allons

205
00:13:30,790 --> 00:13:35,500
utiliser avec notre application dans l'exercice,

206
00:13:35,500 --> 00:13:38,285
nous ne serons pas en mesure d'utiliser le jeton d'actualisation.

207
00:13:38,285 --> 00:13:41,620
Chaque fois que l'utilisateur veut autoriser

208
00:13:41,620 --> 00:13:46,070
le serveur Express à aller chercher les informations de profil de Facebook,

209
00:13:46,070 --> 00:13:48,470
l'utilisateur devra fournir explicitement

210
00:13:48,470 --> 00:13:52,736
un nouveau jeton d'accès obtenu à partir de Facebook.

211
00:13:52,736 --> 00:13:56,665
La seule partie que je viens de mentionner brièvement,

212
00:13:56,665 --> 00:13:58,221
mais je n'ai pas élaboré,

213
00:13:58,221 --> 00:14:01,920
est comment l'application cliente, le serveur Express,

214
00:14:01,920 --> 00:14:07,260
les échelles, comment s'inscrivez-vous au fournisseur de services OAuth 2 ?

215
00:14:07,260 --> 00:14:11,440
Maintenant, c'est là que de nombreux fournisseurs de services OAuth 2

216
00:14:11,440 --> 00:14:16,705
fournissent un moyen d'enregistrer une application sur leur site.

217
00:14:16,705 --> 00:14:18,050
Ainsi, une application cliente,

218
00:14:18,050 --> 00:14:20,485
les serveurs Express dans notre exemple,

219
00:14:20,485 --> 00:14:25,875
s'enregistrera en tant qu'application cliente sur le fournisseur de services OAuth.

220
00:14:25,875 --> 00:14:27,460
Ainsi, comme vous le verrez dans l'exercice,

221
00:14:27,460 --> 00:14:31,795
la toute première étape que nous ferons est de vous connecter à Facebook avec

222
00:14:31,795 --> 00:14:37,795
notre compte et de créer une application sur le site Facebook.

223
00:14:37,795 --> 00:14:44,020
Lorsque vous faites cela, Facebook vous enverra un ID d'application client et un secret client.

224
00:14:44,020 --> 00:14:47,830
Cette procédure s'applique à de nombreux autres fournisseurs de services OAuth car il s'

225
00:14:47,830 --> 00:14:51,960
agit du flux général dont parle le protocole OAuth 2.

226
00:14:51,960 --> 00:14:57,130
Ainsi, l'ID de l'application client et le secret client sont utiles pour que nous puissions

227
00:14:57,130 --> 00:15:02,320
prouver notre identité

228
00:15:02,320 --> 00:15:08,960
au serveur OAuth lorsque nous transmettons un jeton d'accès que nous obtenons de l'utilisateur.

229
00:15:08,960 --> 00:15:11,500
Maintenant, il y a aussi une URL de redirection que vous devez

230
00:15:11,500 --> 00:15:14,650
enregistrer lorsque vous enregistrez l'application cliente,

231
00:15:14,650 --> 00:15:18,520
et vous me verrez effectuer cela dans les étapes que j'enregistre

232
00:15:18,520 --> 00:15:23,410
l'application sur le site Facebook.

233
00:15:23,410 --> 00:15:26,380
Maintenant, pour résumer le flux d'information

234
00:15:26,380 --> 00:15:29,765
dont nous venons de parler brièvement dans un cas antérieur,

235
00:15:29,765 --> 00:15:31,855
permettez-moi de commencer par là.

236
00:15:31,855 --> 00:15:35,295
Le premier point à examiner est le propriétaire de la ressource.

237
00:15:35,295 --> 00:15:39,355
Donc, le propriétaire de la ressource ici

238
00:15:39,355 --> 00:15:43,660
est l'utilisateur qui va utiliser son compte de médias sociaux.

239
00:15:43,660 --> 00:15:45,625
Facebook, dans cet exemple,

240
00:15:45,625 --> 00:15:49,490
a l'authentification pour l'utilisateur.

241
00:15:49,490 --> 00:15:54,515
Ainsi, le propriétaire de la ressource est celui qui a le profil sur la ressource.

242
00:15:54,515 --> 00:15:57,760
Et ces informations de profil pour chaque compte Facebook,

243
00:15:57,760 --> 00:16:00,535
ils ont été stockés sur le serveur Facebook.

244
00:16:00,535 --> 00:16:05,067
Et donc le serveur Facebook fournit le serveur de ressources ici.

245
00:16:05,067 --> 00:16:08,410
C' est donc le fournisseur de services OAuth que vous voyez sur

246
00:16:08,410 --> 00:16:12,691
le côté droit de cette image ici.

247
00:16:12,691 --> 00:16:17,320
Imaginez donc que le serveur Facebook sur le côté droit, cette application cliente,

248
00:16:17,320 --> 00:16:18,928
qui a le serveur API de repos,

249
00:16:18,928 --> 00:16:20,477
le serveur Express que nous avons implémenté,

250
00:16:20,477 --> 00:16:22,270
est une application cliente dans ce cas,

251
00:16:22,270 --> 00:16:24,700
et le propriétaire de la ressource est l'utilisateur.

252
00:16:24,700 --> 00:16:28,780
URL utilisateur frontal, qui va

253
00:16:28,780 --> 00:16:33,510
vous autoriser à aller sur Facebook pour vérifier les informations d'identification de cet utilisateur.

254
00:16:33,510 --> 00:16:39,245
Donc, lorsque vous voulez accéder aux informations du côté client,

255
00:16:39,245 --> 00:16:44,355
vous devez d'abord aller

256
00:16:44,355 --> 00:16:47,730
autoriser cette application cliente pour pouvoir

257
00:16:47,730 --> 00:16:51,673
accéder aux informations de votre profil.

258
00:16:51,673 --> 00:16:52,855
Donc, l'application cliente,

259
00:16:52,855 --> 00:16:55,120
si elle agit comme une application web,

260
00:16:55,120 --> 00:17:00,095
il fournira un bouton approprié là-dedans disant se connecter en utilisant Facebook.

261
00:17:00,095 --> 00:17:01,740
Et donc, lorsque vous cliquez sur le bouton,

262
00:17:01,740 --> 00:17:04,780
essentiellement, la première étape est initiée.

263
00:17:04,780 --> 00:17:07,375
La demande d'autorisation utilisateur est lancée.

264
00:17:07,375 --> 00:17:09,270
Ainsi, votre application cliente,

265
00:17:09,270 --> 00:17:10,910
par l'intermédiaire de

266
00:17:10,910 --> 00:17:17,409
l'agent utilisateur, l'agent utilisateur est essentiellement l'application cliente, l'application frontale.

267
00:17:17,409 --> 00:17:22,725
Il pourrait

268
00:17:22,725 --> 00:17:25,950
s'agir de l'application Angular que nous avons développée ou de cette application mobile, que ce soit Ionic ou qu'il s'agisse

269
00:17:25,950 --> 00:17:30,120
d'une application NativeScript que nous avons développée dans les cours précédents dans

270
00:17:30,120 --> 00:17:37,807
la spécialisation ou même d'une application native comme une application iOS ou une application Android.

271
00:17:37,807 --> 00:17:39,060
Tous ces éléments agissent en tant qu'agent utilisateur.

272
00:17:39,060 --> 00:17:42,360
Ainsi, l'agent utilisateur,

273
00:17:42,360 --> 00:17:45,420
ils utilisent un processus de demande d'autorisation via

274
00:17:45,420 --> 00:17:48,360
l'agent utilisateur au serveur d'autorisation,

275
00:17:48,360 --> 00:17:50,500
qui est le serveur Facebook.

276
00:17:50,500 --> 00:17:52,235
Maintenant, lorsque cela sera transmis,

277
00:17:52,235 --> 00:17:55,796
le propriétaire de la ressource ou l'utilisateur,

278
00:17:55,796 --> 00:18:01,065
qui essaie de donner accès à son profil à cette application cliente,

279
00:18:01,065 --> 00:18:03,690
devra autoriser Facebook

280
00:18:03,690 --> 00:18:06,600
à partager cette information avec l'application cliente.

281
00:18:06,600 --> 00:18:11,250
Dans l'approche implicite de subvention de flux que nous utilisons dans

282
00:18:11,250 --> 00:18:16,025
notre exemple ici et aussi dans l'exercice qui suit,

283
00:18:16,025 --> 00:18:18,390
l'approche implicite de subvention de flux est

284
00:18:18,390 --> 00:18:22,875
l'approche la plus appropriée lorsque vous implémentez une application web en utilisant

285
00:18:22,875 --> 00:18:26,563
un framework comme Angular ou l'application mobile hybride

286
00:18:26,563 --> 00:18:30,925
avec Ionic ou un NativeScript ou même une application native.

287
00:18:30,925 --> 00:18:34,320
L' approche implicite de subvention de flux est beaucoup plus simple

288
00:18:34,320 --> 00:18:39,170
d'utiliser l'OAuth 2 pour ce type d'applications.

289
00:18:39,170 --> 00:18:43,930
Ainsi, le propriétaire de la ressource clique sur le bouton de connexion,

290
00:18:43,930 --> 00:18:49,710
puis le serveur d'autorisation invitera le propriétaire de la ressource avec les informations indiquant :

291
00:18:49,710 --> 00:18:54,330
« Cette application cliente veut accéder aux informations de votre profil.

292
00:18:54,330 --> 00:18:55,725
Est-ce que vous l'autorisez ? »

293
00:18:55,725 --> 00:18:58,965
Et donc cela sera apparu par Facebook,

294
00:18:58,965 --> 00:19:01,860
et puis vous cliquez sur un bouton là disant, « Oui,

295
00:19:01,860 --> 00:19:05,278
j'autorise cette application client à y accéder en mon nom. »

296
00:19:05,278 --> 00:19:06,645
Donc, sur ce point,

297
00:19:06,645 --> 00:19:08,680
le serveur d'autorisation sur Facebook,

298
00:19:08,680 --> 00:19:11,190
le serveur d'autorisation OAuth 2 sur Facebook,

299
00:19:11,190 --> 00:19:13,380
va générer un jeton d'accès.

300
00:19:13,380 --> 00:19:15,105
Pour générer ce jeton d'accès,

301
00:19:15,105 --> 00:19:20,405
il utilisera l'ID client de cette application cliente,

302
00:19:20,405 --> 00:19:22,535
l'application serveur Express que nous enregistrons.

303
00:19:22,535 --> 00:19:28,165
L' ID client doit donc faire partie de l'agent utilisateur utilisé par cet utilisateur.

304
00:19:28,165 --> 00:19:33,093
Cet ID client sera donc intégré à l'application Angular, à

305
00:19:33,093 --> 00:19:38,585
l'application Ionic ou NativeScript ou même à une application iOS ou Android.

306
00:19:38,585 --> 00:19:40,560
Ainsi, l'ID client sera alors utilisé par

307
00:19:40,560 --> 00:19:43,410
l'agent utilisateur pour tourner le serveur d'autorisation en disant :

308
00:19:43,410 --> 00:19:48,108
« Cette application cliente veut accéder à mon profil,

309
00:19:48,108 --> 00:19:52,704
et je suis prêt à vous autoriser à autoriser l'accès au profil. »

310
00:19:52,704 --> 00:19:53,760
Ainsi, à ce stade,

311
00:19:53,760 --> 00:19:59,290
le serveur d'autorisation enverra un jeton d'accès à l'agent utilisateur dans ce cas.

312
00:19:59,290 --> 00:20:02,670
Donc, rappelez-vous, ce jeton d'accès entre dans l'agent utilisateur,

313
00:20:02,670 --> 00:20:09,180
qui est l'application mobile ou leur application Angular qui est implémentée par nous.

314
00:20:09,180 --> 00:20:12,870
Ensuite, cet agent utilisateur prendra ce jeton d'accès

315
00:20:12,870 --> 00:20:18,479
, puis passera ce jeton d'accès à cette application cliente.

316
00:20:18,479 --> 00:20:20,310
Donc, le OAuth pour se connecter,

317
00:20:20,310 --> 00:20:23,305
mais le jeton d'accès sera transmis à l'application cliente,

318
00:20:23,305 --> 00:20:25,200
le serveur Express dans ce cas,

319
00:20:25,200 --> 00:20:32,340
à une route particulière sur le routeur de l'utilisateur,

320
00:20:32,340 --> 00:20:37,465
la route d'authentification sur le site d'application cliente.

321
00:20:37,465 --> 00:20:41,000
Maintenant, précédemment, nous avons vu l'utilisation de l'authentification locale,

322
00:20:41,000 --> 00:20:45,985
où nous avons envoyé une demande de barre oblique utilisateur se connecter.

323
00:20:45,985 --> 00:20:48,250
Maintenant, pour que cela fonctionne dans notre application,

324
00:20:48,250 --> 00:20:50,580
nous allons en configurer un autre sur les utilisateurs barre oblique, barre

325
00:20:50,580 --> 00:20:54,095
oblique Facebook, jeton barre oblique, et ainsi de suite.

326
00:20:54,095 --> 00:21:02,500
Donc, une autre URL sur laquelle nous fournissons ce jeton d'accès sur le serveur Express.

327
00:21:02,500 --> 00:21:06,280
Maintenant, lorsque ce jeton d'accès est obtenu par le serveur

328
00:21:06,280 --> 00:21:09,630
Express, le serveur Express prendra ce jeton d'accès,

329
00:21:09,630 --> 00:21:14,240
puis avec son ID client et le secret client,

330
00:21:14,240 --> 00:21:20,200
il enverra ces informations au serveur d'autorisation.

331
00:21:20,200 --> 00:21:25,140
Et le serveur d'autorisation permettra alors à son application cliente

332
00:21:25,140 --> 00:21:30,565
d'accéder au serveur de ressources afin d'obtenir les informations de profil.

333
00:21:30,565 --> 00:21:35,060
Ainsi, les informations de profil seront renvoyées à l'étape numéro six,

334
00:21:35,060 --> 00:21:37,890
à l'application client dans ce cas.

335
00:21:37,890 --> 00:21:42,015
Ainsi, lorsque l'application cliente obtient les informations de profil pour l'utilisateur,

336
00:21:42,015 --> 00:21:46,380
l'application cliente crée un nouveau compte pour

337
00:21:46,380 --> 00:21:51,785
l'utilisateur sur chaque site si aucun compte n'existe.

338
00:21:51,785 --> 00:21:56,090
Si cet utilisateur s'est déjà connecté plus tôt à l'aide de son identifiant Facebook,

339
00:21:56,090 --> 00:22:00,045
un compte existe déjà, de sorte que l'application cliente et le serveur de l'API

340
00:22:00,045 --> 00:22:05,485
Rest vérifieront simplement que ce compte d'utilisateur existe déjà.

341
00:22:05,485 --> 00:22:06,865
Et, à ce stade,

342
00:22:06,865 --> 00:22:12,550
l'utilisateur est authentifié à la fonctionnalité de connexion tiers

343
00:22:12,550 --> 00:22:18,321
fournie par le service d'authentification OAuth 2 de Facebook.

344
00:22:18,321 --> 00:22:23,275
À ce stade, l'application cliente va générer un jeton Web JSON,

345
00:22:23,275 --> 00:22:26,010
dans l'exemple que nous allons implémenter et exercer,

346
00:22:26,010 --> 00:22:33,040
puis transmettre ce jeton Web JSON à l'agent utilisateur ou à l'application frontale, ou à l'application

347
00:22:33,040 --> 00:22:35,845
Angular, ou à l'application Ionic,

348
00:22:35,845 --> 00:22:38,590
ou à l'application NativeScript.

349
00:22:38,590 --> 00:22:45,160
Ensuite, le jeton Web JSON sera utilisé par l'utilisateur

350
00:22:45,160 --> 00:22:48,790
afin de s'authentifier chaque fois qu'il ou elle veut

351
00:22:48,790 --> 00:22:53,145
accéder aux ressources stockées sur le serveur Express.

352
00:22:53,145 --> 00:22:55,505
Ainsi, une fois que vous avez obtenu le jeton Web JSON,

353
00:22:55,505 --> 00:23:00,975
toutes les opérations suivantes, vous avez déjà vu comment le faire avec JSON Web Token.

354
00:23:00,975 --> 00:23:03,565
Ainsi, une fois que vous avez obtenu le jeton Web JSON

355
00:23:03,565 --> 00:23:05,070
, votre travail est terminé,

356
00:23:05,070 --> 00:23:10,150
puis vous pouvez poursuivre l'opération normale à partir de ce moment.

357
00:23:10,150 --> 00:23:12,940
Maintenant, lorsque le jeton Web JSON expire,

358
00:23:12,940 --> 00:23:17,618
vous devez passer par l'ensemble du processus de réauthentification et,

359
00:23:17,618 --> 00:23:22,990
par la suite, permettre aux utilisateurs d'accéder aux informations de votre site.

360
00:23:22,990 --> 00:23:29,710
Donc, avec cette compréhension rapide du fonctionnement des opérations OAuth 2,

361
00:23:29,710 --> 00:23:33,385
encore une fois, comme vous le voyez, il y a beaucoup de détails ici.

362
00:23:33,385 --> 00:23:38,950
Mais, heureusement, nous n'avons pas à traiter tous ces détails parce que nous allons

363
00:23:38,950 --> 00:23:46,285
utiliser un module de noeud qui s'occupe de beaucoup de ces détails en notre nom.

364
00:23:46,285 --> 00:23:52,195
Puisque nous avons déjà configuré notre serveur Express pour utiliser Passport,

365
00:23:52,195 --> 00:24:00,980
nous pouvons maintenant utiliser un autre code de module de nœud comme module Passport-Facebook-Token.

366
00:24:00,980 --> 00:24:04,595
Le module Passport-Facebook-Token implémente essentiellement

367
00:24:04,595 --> 00:24:08,580
l'approche implicite de subvention dont j'ai parlé plus tôt.

368
00:24:08,580 --> 00:24:11,320
Ensuite, vous pouvez initialiser

369
00:24:11,320 --> 00:24:18,160
une nouvelle stratégie dans votre stratégie Passport, dans votre application.

370
00:24:18,160 --> 00:24:22,720
De plus, le module Passport-Facebook-Token vous permet de configurer

371
00:24:22,720 --> 00:24:31,090
une nouvelle stratégie d'authentification Passport pour utiliser l'API OAuth 2 basée sur Facebook.

372
00:24:31,090 --> 00:24:36,085
Et donc pour utiliser ce module,

373
00:24:36,085 --> 00:24:41,615
vous installez ceci en disant passé npm installer passeport- facebook-jeton,

374
00:24:41,615 --> 00:24:44,980
moins moins enregistrer, et puis une fois que vous avez installé cela,

375
00:24:44,980 --> 00:24:51,010
vous allez configurer une stratégie Facebook dans votre application, et, par la suite,

376
00:24:51,010 --> 00:24:57,810
faire usage de cela pour configurer la stratégie pour

377
00:24:57,810 --> 00:25:04,990
utiliser votre passeport si nous utilisons l'authentification basée sur OAuth 2 pour notre application.

378
00:25:04,990 --> 00:25:09,270
Avec cette compréhension rapide de OAuth 2,

379
00:25:09,270 --> 00:25:11,770
passons à l'exercice,

380
00:25:11,770 --> 00:25:16,630
où nous allons configurer notre serveur Express pour utiliser effectivement

381
00:25:16,630 --> 00:25:20,920
cette approche implicite de subvention pour nous permettre de

382
00:25:20,920 --> 00:25:25,450
vérifier notre identité sur le serveur Express et,

383
00:25:25,450 --> 00:25:29,745
par la suite, d'accéder aux ressources, aux plats,

384
00:25:29,745 --> 00:25:38,180
les promotions et les informations des leaders qui sont stockées sur notre serveur Express.