1
00:00:00,000 --> 00:00:04,557
[MÚSICA]

2
00:00:04,557 --> 00:00:10,906
Agora que entendemos sobre OAuth 2 e como o Facebook suporta OAuth 2,

3
00:00:10,906 --> 00:00:16,870
vamos passar para este exercício onde configuramos nosso

4
00:00:16,870 --> 00:00:23,460
aplicativo de servidor expresso para fazer uso do Facebook como provedor OAuth 2 para o nosso servidor.

5
00:00:23,460 --> 00:00:26,820
E, ao mesmo tempo, para a nossa aplicação cliente.

6
00:00:26,820 --> 00:00:30,500
Neste exercício vamos contar com o passaporte que

7
00:00:30,500 --> 00:00:34,730
já configuramos em nossa aplicação expressa.

8
00:00:34,730 --> 00:00:39,890
Vamos configurar uma nova estratégia para autenticação com o Facebook

9
00:00:39,890 --> 00:00:43,600
usando esse módulo de nó de token do Facebook passaporte.

10
00:00:45,680 --> 00:00:51,629
Para começar este exercício,

11
00:00:51,629 --> 00:01:01,590
acesse https//developers.facebook.com/apps.

12
00:01:01,590 --> 00:01:07,640
Agora, aqui é onde você vai registrar o aplicativo cliente, que é basicamente o

13
00:01:07,640 --> 00:01:13,280
seu servidor, o servidor extra, agindo como o aplicativo cliente para o Facebook.

14
00:01:13,280 --> 00:01:16,380
E então vamos registrar um aplicativo cliente lá.

15
00:01:16,380 --> 00:01:21,250
E, em seguida, obtenha um ID de aplicativo e um segredo de aplicativo do Facebook.

16
00:01:21,250 --> 00:01:24,950
Agora, obviamente, é evidente que você precisa ter uma conta

17
00:01:24,950 --> 00:01:27,160
no Facebook para poder configurar isso.

18
00:01:27,160 --> 00:01:32,520
Se você não tem uma conta do Facebook e você não deseja fazer este exercício,

19
00:01:32,520 --> 00:01:36,220
então não há nenhum mal em não fazer este exercício.

20
00:01:36,220 --> 00:01:39,110
Mas, claro, para fazer este exercício OAuth 2,

21
00:01:39,110 --> 00:01:45,210
você precisa de uma conta do Facebook para configurar seu provedor OAuth no Facebook.

22
00:01:45,210 --> 00:01:47,390
Então, indo para este site,

23
00:01:47,390 --> 00:01:52,510
developers.facebook.com/apps, você notará que você precisará

24
00:01:52,510 --> 00:01:57,970
fazer login para continuar se você não estiver logado no seu navegador.

25
00:01:57,970 --> 00:02:01,790
Agora você pode ver que eu já configurei alguns aplicativos aqui e

26
00:02:01,790 --> 00:02:03,170
testei-os.

27
00:02:03,170 --> 00:02:07,990
Agora, para criar um novo aplicativo, clique em Adicionar novo aplicativo.

28
00:02:07,990 --> 00:02:13,140
E, em seguida, você pode fornecer o nome para o seu aplicativo.

29
00:02:13,140 --> 00:02:20,990
Então eu posso dizer Confusion3, e então podemos fornecer o e-mail de contato.

30
00:02:20,990 --> 00:02:26,336
E, em seguida, siga o procedimento para criar seu novo aplicativo aqui.

31
00:02:36,108 --> 00:02:40,925
E uma vez que o aplicativo é criado, você notará imediatamente que

32
00:02:40,925 --> 00:02:45,290
há um ID de aplicativo que foi criado para o seu aplicativo.

33
00:02:45,290 --> 00:02:47,180
E, em seguida, para este aplicativo em particular.

34
00:02:47,180 --> 00:02:50,680
Então, se você estiver indo para o painel, você verá

35
00:02:51,840 --> 00:02:56,640
duas informações que você realmente precisa para prosseguir.

36
00:02:56,640 --> 00:03:01,850
Um deles é o ID do aplicativo, portanto, certifique-se de fazer uma cópia do ID do aplicativo.

37
00:03:01,850 --> 00:03:03,810
E o segundo é o segredo do aplicativo.

38
00:03:03,810 --> 00:03:10,320
Então, você pode digitar no botão Mostrar aqui e, em seguida, você vai obter o segredo do aplicativo.

39
00:03:10,320 --> 00:03:14,350
Segredo aqui, como você pode ver, estes dois não são nada além de cordas ASCII.

40
00:03:14,350 --> 00:03:18,980
Então faça uma cópia disso porque você precisa configurar seu servidor especializado e

41
00:03:18,980 --> 00:03:23,200
também seu aplicativo cliente com essas duas informações.

42
00:03:23,200 --> 00:03:25,870
E uma vez que você se apossar disso, então

43
00:03:25,870 --> 00:03:29,105
podemos prosseguir com o resto do exercício.

44
00:03:29,105 --> 00:03:33,500
Você precisará acessar o painel do aplicativo.

45
00:03:33,500 --> 00:03:38,890
E nas configurações, como você pode ver, nas configurações básicas aqui

46
00:03:38,890 --> 00:03:43,310
você acabou de adicionar uma plataforma de site aqui.

47
00:03:43,310 --> 00:03:52,650
E, em seguida, forneça a URL como https//localhost3443.

48
00:03:52,650 --> 00:03:58,168
E salve as alterações aqui na sua aplicação aqui.

49
00:03:58,168 --> 00:04:03,910
Depois de adicionar no site aqui, vá para as configurações avançadas.

50
00:04:03,910 --> 00:04:09,000
E, em seguida, clique em Sim para dizer

51
00:04:09,000 --> 00:04:14,400
aplicativo nativo ou desktop aqui e dizer sim para isso e, em seguida, salvar as alterações.

52
00:04:15,590 --> 00:04:20,461
E na configuração básica nos domínios do aplicativo, digite

53
00:04:20,461 --> 00:04:28,339
https://localhost:3443 e salve as alterações.

54
00:04:29,640 --> 00:04:33,520
Em seguida, vá para as instruções de exercício para este exercício.

55
00:04:33,520 --> 00:04:36,580
E você veria que há um arquivo index.html que

56
00:04:36,580 --> 00:04:39,540
eu forneci nos recursos do exercício.

57
00:04:39,540 --> 00:04:47,270
Baixe este arquivo index.html e mova-o para sua pasta pública.

58
00:04:47,270 --> 00:04:49,941
Então, vamos baixar este arquivo index.html.

59
00:04:57,932 --> 00:05:05,548
Em seguida, indo para a pasta ConfusionServer na pasta pública,

60
00:05:05,548 --> 00:05:11,125
você vê que eu já tenho um arquivo index.html.

61
00:05:11,125 --> 00:05:16,039
Vou substituir isso pelo arquivo index.html baixado

62
00:05:16,039 --> 00:05:17,774
que acabei de obter.

63
00:05:17,774 --> 00:05:20,502
Eu salvei isso na minha área de trabalho.

64
00:05:20,502 --> 00:05:23,173
Então eu vou apenas puxar este index.html e

65
00:05:23,173 --> 00:05:27,771
, em seguida, substituir o arquivo index.html na pasta pública do meu ConfusionServer.

66
00:05:27,771 --> 00:05:31,227
Em seguida, indo para o editor, vamos abrir o arquivo index.html.

67
00:05:31,227 --> 00:05:34,584
E se você abri-lo você verá que eu já configurei algum

68
00:05:34,584 --> 00:05:35,112
código JavaScript aqui.

69
00:05:35,112 --> 00:05:39,850
Este código JavaScript eu peguei do Facebook onde eles

70
00:05:39,850 --> 00:05:44,790
especificam como você pode configurar um aplicativo de desenvolvimento usando isso.

71
00:05:44,790 --> 00:05:51,030
Então, eu copiei isso das instruções do Facebook.

72
00:05:51,030 --> 00:05:55,470
Em particular, você notará que neste arquivo index.html,

73
00:05:55,470 --> 00:05:58,735
há esse campo AppID aqui.

74
00:05:58,735 --> 00:06:04,400
Você vai substituir este campo AppID

75
00:06:04,400 --> 00:06:09,060
pelo ID do cliente que você obteve ao registrar seu aplicativo no Facebook.

76
00:06:09,060 --> 00:06:13,130
Então, aqui, eu estou substituindo o ID deste cliente

77
00:06:13,130 --> 00:06:18,430
pelo ID do meu aplicativo que eu registrei no Facebook aqui.

78
00:06:18,430 --> 00:06:22,957
E você precisa fazer o mesmo passo com o aplicativo

79
00:06:22,957 --> 00:06:27,750
que você registra no Facebook, com o ID do aplicativo que você obtém do Facebook.

80
00:06:27,750 --> 00:06:30,812
E, em seguida, salve as alterações em index.html.

81
00:06:30,812 --> 00:06:36,980
Esta página index.html que eu tenho aqui criará

82
00:06:36,980 --> 00:06:42,290
um botão de login na página index.html, que quando clicado

83
00:06:42,290 --> 00:06:47,580
nos ajudará a fazer login no Facebook e, em seguida, obter um token de acesso do Facebook.

84
00:06:48,660 --> 00:06:51,260
Em seguida, indo para a pasta ConfusionServer,

85
00:06:51,260 --> 00:06:55,280
vamos instalar o módulo de nó de token do Facebook passaporte.

86
00:06:55,280 --> 00:06:58,494
Então, no prompt, digite npm instalar

87
00:07:00,200 --> 00:07:05,003
Passport-Facebook-token e

88
00:07:05,003 --> 00:07:09,730
instale este módulo nó.

89
00:07:09,730 --> 00:07:17,000
E como você pode ver eu estou usando a versão 3.3.0 neste curso.

90
00:07:17,000 --> 00:07:20,446
Voltando ao editor, abra config.js.

91
00:07:20,446 --> 00:07:25,162
E em config.js eu vou adicionar em

92
00:07:25,162 --> 00:07:34,440
uma propriedade chamada 'facebook' no meu arquivo config.js.

93
00:07:34,440 --> 00:07:39,221
E aqui dentro,

94
00:07:39,221 --> 00:07:44,481
configurarei meu ClientID e

95
00:07:44,481 --> 00:07:48,560
o ClientSecret.

96
00:07:48,560 --> 00:07:54,150
Agora, o ClientID será exatamente o que você obtém do Facebook.

97
00:07:54,150 --> 00:08:00,304
Aqui, e o segredo do cliente como você viu quando você registrou seu pedido.

98
00:08:02,198 --> 00:08:05,221
Você obtém uma segunda string lá para copiar essa string e

99
00:08:05,221 --> 00:08:07,764
, em seguida, colá-la no ClientSecret aqui.

100
00:08:07,764 --> 00:08:13,790
Agora certifique-se de que isso é colado como uma string aqui.

101
00:08:13,790 --> 00:08:19,090
Da mesma forma, colando o ClientSecret no meu arquivo config.js.

102
00:08:19,090 --> 00:08:26,360
Então, configurar isso aqui vai me ajudar a usar esses dois onde eu preciso no meu código.

103
00:08:26,360 --> 00:08:29,790
Em seguida, como percebemos, sempre que o usuário

104
00:08:32,390 --> 00:08:37,770
fizer login e, em seguida, obtém o token de acesso e o passa para o nosso servidor expresso.

105
00:08:37,770 --> 00:08:41,160
O servidor expresso vai usar esse token de acesso e ir

106
00:08:41,160 --> 00:08:47,840
buscar as informações do arquivo do Facebook 0 deve servidor.

107
00:08:47,840 --> 00:08:52,380
E então, uma vez que alcança as informações do perfil, nosso servidor expresso

108
00:08:52,380 --> 00:08:57,980
criará uma nova conta de usuário em nosso aplicativo.

109
00:08:57,980 --> 00:09:01,750
E use o ID do Facebook como o índice nesta conta de uso.

110
00:09:01,750 --> 00:09:03,630
Então, para acomodar isso,

111
00:09:03,630 --> 00:09:08,467
vamos para o arquivo user.js onde temos definir nosso modelo.

112
00:09:08,467 --> 00:09:12,854
Então, além do primeiro nome e do sobrenome,

113
00:09:12,854 --> 00:09:17,241
eu também vou adicionar em um campo aqui chamado FacebookID,

114
00:09:17,241 --> 00:09:20,510
que é do tipo String aqui.

115
00:09:20,510 --> 00:09:24,548
O FacebookID armazenará o FacebookID

116
00:09:24,548 --> 00:09:28,700
do usuário que passou no token de acesso.

117
00:09:29,760 --> 00:09:34,002
Na próxima etapa, mostrarei como configurar isso.

118
00:09:34,002 --> 00:09:40,260
Em seguida, configuramos nossa estratégia do Facebook usando o token passaporte Facebook..

119
00:09:40,260 --> 00:09:43,640
Quando um usuário passa no token de acesso,

120
00:09:43,640 --> 00:09:47,230
então você vai buscar o perfil e, em seguida, configurar uma conta para

121
00:09:47,230 --> 00:09:52,160
esse usuário em nosso servidor local aqui, em nosso servidor expresso aqui.

122
00:09:52,160 --> 00:09:56,410
Iremos inicializar o primeiro nome e o sobrenome e o FacebookID.

123
00:09:56,410 --> 00:10:01,760
Mas é claro que esta conta em particular não terá uma senha ou

124
00:10:01,760 --> 00:10:04,140
melhor, o hash instalado associado a isso.

125
00:10:04,140 --> 00:10:09,150
Porque, se um usuário fizer login usando esta conta, então ele terá que usar sua

126
00:10:09,150 --> 00:10:14,400
parte de login no Facebook para fazer login em nosso aplicativo.

127
00:10:14,400 --> 00:10:18,330
Em seguida, vamos autenticar o arquivo dark.js.

128
00:10:18,330 --> 00:10:23,138
Então é aqui que temos estado a configurar todas as nossas diferentes

129
00:10:23,138 --> 00:10:25,507
estratégias de autenticação de passaporte.

130
00:10:25,507 --> 00:10:30,880
Então aqui, além da estratégia jwt e

131
00:10:30,880 --> 00:10:37,175
a estratégia local que eu configurei aqui,

132
00:10:37,175 --> 00:10:43,176
deixe-me criar um FacebookTokenStrategy aqui.

133
00:10:43,176 --> 00:10:49,965
E, em seguida, defina o token de requerer palavra-facebook-.

134
00:10:52,494 --> 00:10:56,561
E isso nos dará uma nova estratégia que podemos

135
00:10:56,561 --> 00:11:00,530
configurar em nosso módulo de passaporte aqui.

136
00:11:00,530 --> 00:11:04,573
Então, indo para o código aqui, bem ali,

137
00:11:04,573 --> 00:11:07,761
no final deste arquivo, vou criar,

138
00:11:12,878 --> 00:11:17,055
FacebookPassport como

139
00:11:17,055 --> 00:11:21,697
passsport.use ().

140
00:11:21,697 --> 00:11:28,380
E então este é o lugar onde eu iria especificar novo FacebookTokenStrategy aqui.

141
00:11:29,610 --> 00:11:33,730
E, em seguida, vamos especificar os detalhes deste

142
00:11:33,730 --> 00:11:38,886
FacebookTokenStrategy, neste ponto aqui.

143
00:11:38,886 --> 00:11:45,280
Então, neste FacebookTokenStrategy, como abordamos esse problema?

144
00:11:45,280 --> 00:11:51,910
Deixe-me apenas embrulhar a palavra envoltório para que você possa ver o código completo.

145
00:11:51,910 --> 00:11:59,300
Então, para o FacebookTokenStrategy, vamos começar dizendo primeiro.

146
00:11:59,300 --> 00:12:04,794
A primeira parte do FacebookTokenStrategy leva o ClientID.

147
00:12:08,542 --> 00:12:17,406
Que temos config em config.facebook.clientID aqui,

148
00:12:17,406 --> 00:12:22,302
e cliente, Secret,

149
00:12:22,302 --> 00:12:30,340
que também temos configurado em, Nosso arquivo de configuração aqui.

150
00:12:30,340 --> 00:12:38,235
Então vamos fornecer isso como o primeiro parâmetro para esta estratégia aqui.

151
00:12:38,235 --> 00:12:43,985
E, em seguida, o segundo parâmetro, é onde

152
00:12:43,985 --> 00:12:48,145
o desafiar a função de retorno de chamada que entra neste ponto.

153
00:12:48,145 --> 00:12:53,015
Então, a função de retorno de chamada aqui obtém três valores.

154
00:12:53,015 --> 00:12:57,100
Então ele recebe AccessStoken,

155
00:12:59,672 --> 00:13:04,584
RefreshToken, perfil e

156
00:13:04,584 --> 00:13:07,760
retorno de chamada chamado como feito aqui.

157
00:13:07,760 --> 00:13:12,047
Então estes são os quatro parâmetros que vêm para a função de retorno de chamada que vamos

158
00:13:12,047 --> 00:13:13,447
configurar neste ponto.

159
00:13:13,447 --> 00:13:18,660
Então deixe-me recuar esse código para que seja um pouco mais claro de ver.

160
00:13:18,660 --> 00:13:25,592
E dentro desta função callback que eu configurei aqui,

161
00:13:25,592 --> 00:13:30,150
eu vou primeiro dizer user.findone.

162
00:13:30,150 --> 00:13:35,430
Então, vamos tentar ver se este usuário do Facebook

163
00:13:35,430 --> 00:13:40,470
em particular fez login mais cedo para que a conta já

164
00:13:40,470 --> 00:13:46,381
estivesse configurada, Com o FaceBookID.

165
00:13:46,381 --> 00:13:49,051
Agora, onde obtemos o FacebookID?

166
00:13:49,051 --> 00:13:55,160
Observe que estamos recebendo esse perfil para o usuário,

167
00:13:55,160 --> 00:13:59,630
vindo aqui, para que você possa ver que este perfil está entrando como um parâmetro.

168
00:13:59,630 --> 00:14:04,208
Este perfil traz muita informação vinda do Facebook que

169
00:14:04,208 --> 00:14:06,319
podemos usar dentro de nossa aplicação.

170
00:14:06,319 --> 00:14:13,326
O AccessStoken, é claro, é fornecido ao servidor pelo usuário.

171
00:14:13,326 --> 00:14:20,870
Então, uma vez que tentamos encontrar pelo menos um usuário com um ID de perfil do Facebook.

172
00:14:20,870 --> 00:14:26,200
Então, se esse usuário existe, então já descobrimos que o usuário já

173
00:14:26,200 --> 00:14:30,550
fez login em nossa conta usando a abordagem do Facebook.

174
00:14:30,550 --> 00:14:37,078
Então, neste caso, podemos avançar caso contrário, criaremos um novo usuário.

175
00:14:37,078 --> 00:14:42,416
Então, a função de retorno de chamada aqui terá dois parâmetros,

176
00:14:42,416 --> 00:14:44,557
o err e o usuário aqui.

177
00:14:49,621 --> 00:14:55,298
E esta função de retorno de chamada como veremos,

178
00:14:55,298 --> 00:15:01,800
bem aqui dentro vamos verificar se (err).

179
00:15:01,800 --> 00:15:07,072
Então, se isso causar um erro, então, é claro,

180
00:15:07,072 --> 00:15:13,408
o que precisamos fazer é retornar feito (err, false).

181
00:15:15,694 --> 00:15:20,663
Então isso feito como você pode ver é a função de retorno de chamada que está vindo como

182
00:15:20,663 --> 00:15:23,577
o parâmetro para esta função aqui, então

183
00:15:23,577 --> 00:15:26,770
vamos chamar o feito com o err e false.

184
00:15:26,770 --> 00:15:31,830
Se não for um erro, então

185
00:15:31,830 --> 00:15:36,384
vamos dizer se (! err

186
00:15:36,384 --> 00:15:41,950
&& usuário! == nulo).

187
00:15:43,170 --> 00:15:47,880
Então, se o usuário não é nulo, então isso significa que temos encontrado um usuário no sistema

188
00:15:47,880 --> 00:15:52,610
que não foi anteriormente com esse FacebookID particular, Então, para o usuário,

189
00:15:52,610 --> 00:15:59,750
tudo o que precisamos fazer é retornar feito (null,) uma vez que não

190
00:15:59,750 --> 00:16:05,100
há nenhum erro aqui, e então vamos retornar o valor do usuário para isso aqui em baixo.

191
00:16:05,100 --> 00:16:08,560
Então, o que significa que, se o usuário já tiver feito login anteriormente usando

192
00:16:08,560 --> 00:16:13,350
a abordagem do Facebook, o usuário já teria sido criado.

193
00:16:13,350 --> 00:16:17,730
E assim, esse usuário será encontrado e, em seguida, nós apenas passar de volta esse usuário.

194
00:16:17,730 --> 00:16:25,010
Se não, veja a parte se não é a parte mais interessante deste exercício.

195
00:16:25,010 --> 00:16:30,290
Se o usuário não existe, então precisamos criar um novo usuário.

196
00:16:30,290 --> 00:16:33,959
Agora, para criar o novo usuário, vamos dizer usuário,

197
00:16:38,653 --> 00:16:42,181
= novo usuário, e quando criamos um novo usuário,

198
00:16:42,181 --> 00:16:45,832
lembre-se que precisamos passar o nome de usuário.

199
00:16:45,832 --> 00:16:50,970
O nome de usuário seria obtido a partir do perfil, e o perfil do Facebook que

200
00:16:50,970 --> 00:16:57,200
retornou terá um campo chamado como DisplayName.

201
00:16:57,200 --> 00:17:02,050
E então esse é o campo que vou usar para criar um novo usuário aqui.

202
00:17:02,050 --> 00:17:07,176
Então vamos criar um novo usuário com o nome de usuário definido

203
00:17:07,176 --> 00:17:13,455
igual ao DisplayName, e depois que o usuário é criado,

204
00:17:13,455 --> 00:17:21,874
então vamos dizer user.facebookId, = profile.id.

205
00:17:21,874 --> 00:17:24,654
Então vamos estar salvando o ID do Facebook do usuário.

206
00:17:24,654 --> 00:17:28,902
Então, retorne neste objeto de perfil aqui e, em

207
00:17:28,902 --> 00:17:33,979
seguida, coloque o ID do Facebook do usuário para o ID do perfil.

208
00:17:33,979 --> 00:17:38,204
Para que, posteriormente, se o mesmo usuário fizer login,

209
00:17:38,204 --> 00:17:43,265
essa pesquisa será capaz de encontrar esse usuário em nosso banco de dados.

210
00:17:43,265 --> 00:17:46,450
E então vamos

211
00:17:46,450 --> 00:17:50,863
dizer user.firstname

212
00:17:50,863 --> 00:17:57,242
= profile.name.givenName

213
00:17:58,857 --> 00:18:02,447
Então, o perfil tem esse objeto nome nele,

214
00:18:02,447 --> 00:18:07,970
que tem um nome e um nome de família associado a isso.

215
00:18:07,970 --> 00:18:10,994
Isso é retornado do perfil do usuário no Facebook.

216
00:18:10,994 --> 00:18:16,165
E também o user.lastname vamos

217
00:18:16,165 --> 00:18:21,026
defini-lo para profile.name.familyName.

218
00:18:22,762 --> 00:18:28,232
E então, uma vez que tenhamos configurado tudo isso, diremos user.save.

219
00:18:28,232 --> 00:18:31,310
Então, estamos salvando as alterações para o usuário e

220
00:18:31,310 --> 00:18:35,270
, em seguida, isso retornará err e o usuário.

221
00:18:35,270 --> 00:18:39,090
Então, ele retornará um erro se o usuário não puder ser criado,

222
00:18:39,090 --> 00:18:42,960
caso contrário ele retornará o usuário criado aqui.

223
00:18:42,960 --> 00:18:47,240
Então, neste caso, vamos dizer, se (err),

224
00:18:47,240 --> 00:18:51,745
então retornará feito (err,

225
00:18:51,745 --> 00:18:58,627
false) porque não conseguimos criar o usuário.

226
00:18:58,627 --> 00:19:03,824
senão, o usuário foi criado com sucesso,

227
00:19:03,824 --> 00:19:08,615
então retornaremos feito (null, usuário).

228
00:19:08,615 --> 00:19:11,265
Então, não importa qual é o caso,

229
00:19:11,265 --> 00:19:15,965
se o usuário existe, então você vai encontrar esse usuário e retornar o valor.

230
00:19:15,965 --> 00:19:19,824
Se o usuário não existir, você criará um novo usuário com base no

231
00:19:19,824 --> 00:19:22,431
perfil do usuário do Facebook que obtivemos.

232
00:19:22,431 --> 00:19:28,772
E, em seguida, adicione o novo usuário em nosso site de servidor, no banco de dados.

233
00:19:28,772 --> 00:19:32,642
Então esta é a estratégia que configuramos para o

234
00:19:32,642 --> 00:19:37,532
nosso passaporte, o novo FacebookTokenStrategy.

235
00:19:37,532 --> 00:19:40,552
Então isso nos permitirá encontrar o usuário.

236
00:19:40,552 --> 00:19:45,571
Então, agora que configuramos nosso aplicativo para

237
00:19:45,571 --> 00:19:50,499
criar um usuário ou encontrar o usuário com base na ID do Facebook.

238
00:19:50,499 --> 00:19:55,752
O último passo é, naturalmente, introduzir

239
00:19:55,752 --> 00:20:00,851
uma nova rota no arquivo users.js.

240
00:20:00,851 --> 00:20:05,284
Então, no arquivo users.js você vai lembrar que tivemos a rota de inscrição que

241
00:20:05,284 --> 00:20:09,950
permite ao usuário se inscrever para a conta local com o nome de usuário e senha.

242
00:20:09,950 --> 00:20:15,137
E então você tem o login que permite ao usuário fazer login usando o nome de usuário e

243
00:20:15,137 --> 00:20:15,730
senha.

244
00:20:15,730 --> 00:20:19,455
Mas agora, vamos usar o Facebook para fazer login no usuário.

245
00:20:19,455 --> 00:20:25,601
Então, neste caso, diremos, router.get,

246
00:20:25,601 --> 00:20:32,208
e o endpoint será /facebook/token.

247
00:20:32,208 --> 00:20:37,260
Então, se o usuário envia uma solicitação get para usuários/facebook/token,

248
00:20:37,260 --> 00:20:41,550
então vamos estar autenticando o usuário usando

249
00:20:41,550 --> 00:20:45,585
a autenticação baseada no Facebook OAuth 2.

250
00:20:45,585 --> 00:20:50,470
Então, aqui, vamos dizer passport.authenticate, e

251
00:20:50,470 --> 00:20:57,555
vamos estar autenticando usando a estratégia facebook-token.

252
00:20:57,555 --> 00:21:04,076
Lembre-se que já tínhamos configurado isso em nosso arquivo authenticate.js,

253
00:21:04,076 --> 00:21:10,908
então vamos configurar o passaporte autenticar facebook-token estratégia e,

254
00:21:10,908 --> 00:21:15,786
em seguida, essa função de retorno que recebe req, res aqui.

255
00:21:23,390 --> 00:21:30,081
Então deixe-me, Alterne o contorno de palavras aqui,

256
00:21:30,081 --> 00:21:36,356
para que você possa ver que este é o roteador.get neste endpoint aqui.

257
00:21:36,356 --> 00:21:44,890
E, em seguida, aqui, vou configurar este aplicativo.

258
00:21:44,890 --> 00:21:51,768
Então, neste ponto, diríamos, se (req.user), agora observe que quando chamamos

259
00:21:51,768 --> 00:21:57,168
passport.authenticate com a estratégia facebook-token.

260
00:21:57,168 --> 00:21:59,055
Isso, se for bem-sucedido,

261
00:21:59,055 --> 00:22:03,010
ele teria carregado no usuário no objeto de solicitação.

262
00:22:03,010 --> 00:22:08,387
Então, no momento em que chegamos a este ponto aqui após o

263
00:22:08,387 --> 00:22:11,596
facebook-token middware passport.authenticate é executado,

264
00:22:11,596 --> 00:22:16,291
você teria o usuário já carregado no objeto request.

265
00:22:16,291 --> 00:22:23,070
Então, se este for o caso, então, vamos dizer, vamos criar um token.

266
00:22:23,070 --> 00:22:27,709
Vamos criar um token web JSON aqui, assim como a forma como

267
00:22:27,709 --> 00:22:32,371
criamos o token web JSON quando o usuário logou aqui.

268
00:22:32,371 --> 00:22:35,275
Então, vamos copiar isso aqui.

269
00:22:38,010 --> 00:22:41,586
Authenticate.getToken, então isso nos dará o token da web JSON.

270
00:22:41,586 --> 00:22:46,656
Então, essencialmente, o usuário está enviando o token de acesso para o servidor express,

271
00:22:46,656 --> 00:22:50,634
o servidor express usa o AccessStoken para ir para o Facebook e

272
00:22:50,634 --> 00:22:52,979
, em seguida, buscar o perfil do usuário.

273
00:22:52,979 --> 00:22:57,560
E se o usuário não existir, criaremos um novo usuário com essa ID do Facebook.

274
00:22:57,560 --> 00:23:02,486
E depois disso, nosso servidor expresso gerará

275
00:23:02,486 --> 00:23:07,818
um token da web JSON e, em seguida, retornará o token da web JSON ao nosso cliente.

276
00:23:07,818 --> 00:23:13,878
Todos os acessos subsequentes de nosso usuário terão que incluir este

277
00:23:13,878 --> 00:23:19,317
token da web JSON que acabamos de retornar usando esta abordagem.

278
00:23:19,317 --> 00:23:24,280
Então, neste momento, você não precisa mais do token de acesso do Facebook.

279
00:23:24,280 --> 00:23:29,287
Você pode descartar o token de acesso do Facebook neste momento porque

280
00:23:29,287 --> 00:23:35,237
o token da Web JSON é aquele que mantém a autenticação de usuários ativa por

281
00:23:35,237 --> 00:23:39,602
qualquer duração que este token da Web JSON esteja ativo.

282
00:23:39,602 --> 00:23:45,529
Agora, além disso, é claro que também precisamos fazer esses passos aqui.

283
00:23:45,529 --> 00:23:48,365
Então, vou copiar essa parte aqui.

284
00:23:48,365 --> 00:23:53,336
porque eu vou fazer exatamente a mesma coisa neste caso também,

285
00:23:53,336 --> 00:23:56,284
então vamos colar nesse código aqui.

286
00:23:56,284 --> 00:24:00,485
Então, vamos dizer StatusCode = 200, tipo de cabeçalho de conteúdo e,

287
00:24:00,485 --> 00:24:06,120
em seguida, diremos res.json que você está logado com sucesso, e é isso.

288
00:24:06,120 --> 00:24:13,521
Então, com essa abordagem, como você pode ver, agora usando uma chamada para este endpoint.

289
00:24:13,521 --> 00:24:17,498
O aplicativo do usuário, o cliente neste caso,

290
00:24:17,498 --> 00:24:24,320
passará o token de acesso do Facebook que acabou de obter do Facebook.

291
00:24:24,320 --> 00:24:27,970
E então nosso servidor expresso usará o token de acesso do Facebook para

292
00:24:27,970 --> 00:24:30,380
verificar o usuário no Facebook.

293
00:24:30,380 --> 00:24:35,580
E, em seguida, se o usuário for reconhecido pelo Facebook como um usuário legítimo,

294
00:24:35,580 --> 00:24:42,110
então nosso servidor expresso retornará um token JSON Wed ao nosso cliente.

295
00:24:42,110 --> 00:24:44,920
E então nosso cliente é autenticado e

296
00:24:44,920 --> 00:24:48,650
, em seguida, pode prosseguir com a realização das outras operações

297
00:24:48,650 --> 00:24:53,460
usando o token JSON wed no cabeçalho de todas as mensagens de solicitação.

298
00:24:53,460 --> 00:25:00,190
Posteriormente, assim como fizemos com a estratégia de autenticação local, é isso.

299
00:25:00,190 --> 00:25:07,630
Então, concluímos todas as atualizações para o nosso aplicativo, vamos salvar as alterações.

300
00:25:08,810 --> 00:25:14,940
Indo para o nosso terminal, vamos iniciar o servidor aqui,

301
00:25:14,940 --> 00:25:19,710
então vamos dizer npm start, e o servidor está funcionando.

302
00:25:20,740 --> 00:25:26,320
E eu notei que eu tinha digitado na porta P-A-S-S-S,

303
00:25:26,320 --> 00:25:28,790
e isso causou um erro aqui.

304
00:25:28,790 --> 00:25:32,250
Portanto, note que como é fácil cometer erros.

305
00:25:32,250 --> 00:25:35,439
Então deixe-me corrigir isso e depois voltar e reiniciar meu servidor.

306
00:25:37,080 --> 00:25:40,280
Então, quando você encontrar erros como esses, não entre em pânico.

307
00:25:40,280 --> 00:25:43,470
Olhe ao redor para ver onde está o problema e, muitas

308
00:25:43,470 --> 00:25:47,580
vezes, será um problema simples como este que causará erros para você.

309
00:25:48,970 --> 00:25:54,160
Novamente, voltando para o users.js e

310
00:25:54,160 --> 00:25:57,930
você vê que no arquivo authenticate.js,

311
00:25:57,930 --> 00:26:02,270
configurei esta porta dizendo P-A-S-S-S.

312
00:26:02,270 --> 00:26:06,100
Então, no arquivo authenticate.js, deixe-me corrigir isso para passsport e,

313
00:26:06,100 --> 00:26:08,702
em seguida, salvar as alterações e, em seguida, reiniciar meu servidor.

314
00:26:09,770 --> 00:26:16,340
Agora, reiniciando meu servidor, então meu servidor está funcionando agora.

315
00:26:17,400 --> 00:26:20,160
Neste ponto, vá para um navegador.

316
00:26:20,160 --> 00:26:26,212
E no navegador, digite https://localhost3443.

317
00:26:29,625 --> 00:26:37,350
Se acontecer de você ter esta página em cache aqui, você pode querer remover o cache.

318
00:26:37,350 --> 00:26:41,417
Ou apenas digite localhost: 3343/index.html, e

319
00:26:41,417 --> 00:26:45,829
então você notará imediatamente que neste index.html,

320
00:26:45,829 --> 00:26:49,640
você verá este botão chamado botão Login.

321
00:26:49,640 --> 00:26:54,280
Então, vamos clicar neste botão de login para fazer login no Facebook.

322
00:26:54,280 --> 00:26:59,880
Vamos entrar e então você aparecerá com esta mensagem aqui.

323
00:26:59,880 --> 00:27:03,365
Se você já fez login no Facebook anteriormente,

324
00:27:03,365 --> 00:27:07,840
ele pedirá permissão para continuar como usuário.

325
00:27:07,840 --> 00:27:12,440
Se não, então ele vai pedir que você faça login no Facebook com e

326
00:27:12,440 --> 00:27:14,030
, em seguida, permitir que você continue.

327
00:27:14,030 --> 00:27:17,000
Desde que eu tinha acabado de entrar no Facebook um pouco mais cedo, então

328
00:27:17,000 --> 00:27:19,020
eu posso apenas clicar em Continuar.

329
00:27:19,020 --> 00:27:24,955
Agora, abra o console JavaScript desenvolvedores na parte inferior aqui.

330
00:27:24,955 --> 00:27:31,810
E no console JavaScript, você vê um monte de mensagens impressas aqui.

331
00:27:31,810 --> 00:27:33,070
E, em particular,

332
00:27:33,070 --> 00:27:37,720
abra este objeto que você verá no console JavaScript.

333
00:27:37,720 --> 00:27:43,081
E dentro deste objeto, você verá esta resposta alt aqui.

334
00:27:43,081 --> 00:27:49,370
E lá dentro, você verá uma ferramenta de acesso presente lá.

335
00:27:49,370 --> 00:27:55,320
Agora, esta é uma resposta que é obtida do Facebook ou

336
00:27:55,320 --> 00:28:00,610
para o servidor de autenticação por nossa aplicação aqui.

337
00:28:00,610 --> 00:28:03,060
E eu vou simplesmente copiar isso,

338
00:28:03,060 --> 00:28:07,010
porque este é o token de acesso que o Facebook nos forneceu.

339
00:28:07,010 --> 00:28:13,710
Agora, eu preciso dar esse token de acesso ao meu servidor expresso

340
00:28:13,710 --> 00:28:19,990
para que ele vá e verifique meu perfil, e então me permita fazer login nesse aplicativo.

341
00:28:19,990 --> 00:28:22,860
Então eu estou fazendo isso de uma maneira apertada

342
00:28:22,860 --> 00:28:27,560
aqui simplesmente porque eu queria mostrar a vocês como o token de acesso vem aqui.

343
00:28:27,560 --> 00:28:30,940
E nós copiamos o token de acesso, então eu vou pegar isso e

344
00:28:30,940 --> 00:28:36,820
usar o Postman para enviar esse token de acesso ao meu servidor Express.

345
00:28:36,820 --> 00:28:42,330
Agora, quando você cria um aplicativo web como Angular, ou

346
00:28:42,330 --> 00:28:48,840
o aplicativo Ionic, ou o aplicativo NativeScript, você não precisa fazer todas essas etapas.

347
00:28:48,840 --> 00:28:53,634
Agora, basicamente, quando o token de acesso é retornado ao seu aplicativo web,

348
00:28:53,634 --> 00:28:58,086
o aplicativo Angular, ou o aplicativo Ionic, ou o aplicativo NativeScript,

349
00:28:58,086 --> 00:29:01,868
você simplesmente capturará esse token de acesso lá.

350
00:29:01,868 --> 00:29:06,791
E então você passará esse token de acesso para o

351
00:29:06,791 --> 00:29:12,770
servidor Express usando o XMLHttpRequest para obter as informações.

352
00:29:12,770 --> 00:29:16,410
Mas desde que eu queria ilustrar manualmente os passos.

353
00:29:16,410 --> 00:29:21,319
Então, eu configurei este index.html com um

354
00:29:21,319 --> 00:29:24,640
código JavaScript simples que o Facebook fornece para mim.

355
00:29:26,420 --> 00:29:30,792
Para que eu possa recuperar este token de autorização que obtivemos do

356
00:29:30,792 --> 00:29:31,454
Facebook.

357
00:29:31,454 --> 00:29:34,662
Então deixe-me copiar este token de autorização.

358
00:29:34,662 --> 00:29:39,110
Agora, vamos para o Postman, e depois tentar

359
00:29:39,110 --> 00:29:45,340
ver como podemos obter o token web JSON do nosso servidor Express.

360
00:29:45,340 --> 00:29:49,220
Agora, indo para Postman, de Postman,

361
00:29:49,220 --> 00:29:54,525
deixe-me agora fazer uma solicitação GET para

362
00:29:54,525 --> 00:30:03,195
LocalHost: 3443sFaceBookToken do usuário.

363
00:30:03,195 --> 00:30:07,855
E quando eu enviar este pedido para esse ponto,

364
00:30:07,855 --> 00:30:13,115
a outra configuração que eu preciso fazer aqui é que,

365
00:30:13,115 --> 00:30:18,080
eu preciso passar neste token de acesso que eu acabei de obter.

366
00:30:18,080 --> 00:30:21,970
Agora, para passar um token de acesso no cabeçalho,

367
00:30:21,970 --> 00:30:26,370
posso passá-lo como um cabeçalho de autorização digitando autorização.

368
00:30:26,370 --> 00:30:33,660
Mas note que o valor deve ser digitado como Beta com um B maiúsculo neste caso

369
00:30:33,660 --> 00:30:41,350
e, em seguida, cole esse token de acesso que obtivemos do Facebook aqui.

370
00:30:41,350 --> 00:30:44,840
Observe o B maiúsculo aqui, e

371
00:30:44,840 --> 00:30:48,990
então você pode passar isso para o nosso servidor.

372
00:30:50,090 --> 00:30:53,970
E, em seguida, após a resposta do nosso servidor,

373
00:30:53,970 --> 00:30:59,810
você veria que você teria obtido o token da web JSON do nosso site do servidor.

374
00:30:59,810 --> 00:31:05,472
Então, esta é uma maneira que você obtém o token da web JSON trocando seu

375
00:31:05,472 --> 00:31:10,000
token de acesso do Facebook que você acabou de obter com seu servidor Express.

376
00:31:10,000 --> 00:31:16,330
E seu servidor Express, por sua vez, irá

377
00:31:16,330 --> 00:31:19,960
obter suas informações de perfil do Facebook e, em

378
00:31:19,960 --> 00:31:23,720
seguida, criar uma conta especificamente para você e,

379
00:31:23,720 --> 00:31:28,260
em seguida, retornar o token da web JSON se tudo for bem sucedido.

380
00:31:28,260 --> 00:31:33,290
Outra maneira de passar essas informações é no cabeçalho,

381
00:31:33,290 --> 00:31:40,480
você digita access_token como a chave.

382
00:31:40,480 --> 00:31:46,268
E no valor, basta digitar o

383
00:31:46,268 --> 00:31:52,020
token de acesso como este aqui, e então você pode enviar o pedido e a mesma coisa.

384
00:31:52,020 --> 00:31:55,878
Ele retornará o token da Web JSON para você.

385
00:31:55,878 --> 00:31:59,410
E então você capturaria o token da Web JSON e, em seguida, continuaria com

386
00:31:59,410 --> 00:32:05,300
o resto dos acessos ao seu servidor expresso usando este token da Web JSON.

387
00:32:05,300 --> 00:32:10,010
Uma terceira abordagem é incluir isso em

388
00:32:10,010 --> 00:32:15,410
sua URL propriamente dita como um parâmetro de consulta.

389
00:32:15,410 --> 00:32:23,827
A terceira abordagem é dizer token? access_token= e

390
00:32:23,827 --> 00:32:32,290
cole o token da Web JSON nesse parâmetro de consulta.

391
00:32:32,290 --> 00:32:37,140
Não use as aspas aqui, apenas o token da Web JSON em si.

392
00:32:37,140 --> 00:32:40,810
E, em seguida, envie o pedido para o seu servidor.

393
00:32:40,810 --> 00:32:47,680
E, em seguida, mesmo assim, seu servidor retornará o token web JSON correspondente.

394
00:32:47,680 --> 00:32:52,450
Assim, você vê três maneiras diferentes de analisar no Token de Acesso do Facebook para

395
00:32:52,450 --> 00:32:57,350
o servidor e, em seguida, obter o token da Web JSON do seu servidor.

396
00:32:57,350 --> 00:33:01,660
E depois disso, o resto desses passos prossegue como antes.

397
00:33:02,970 --> 00:33:09,400
Agora, para convencê-lo de que realmente uma nova conta foi criada com o

398
00:33:09,400 --> 00:33:13,720
perfil do Facebook para este usuário em particular, vamos para o terminal.

399
00:33:15,080 --> 00:33:20,240
No terminal, em uma nova janela do terminal, vou começar a ondulação mongo aqui.

400
00:33:20,240 --> 00:33:25,050
Então, na ondulação mongo, deixe-me dizer, use Confusão.

401
00:33:25,050 --> 00:33:31,560
E então eu vou dizer, db.users.find () .pretty ()

402
00:33:31,560 --> 00:33:36,570
e, em seguida, imprimir todos os usuários que estão registrados no meu sistema.

403
00:33:36,570 --> 00:33:40,540
Você percebe que os três usuários que configuramos nos exercícios anteriores

404
00:33:40,540 --> 00:33:41,410
estão todos lá.

405
00:33:43,350 --> 00:33:48,130
Observe, além disso, um quarto usuário que acabou de ser adicionado no.

406
00:33:48,130 --> 00:33:53,580
E note que para este usuário em particular, ainda não temos o hash na fonte,

407
00:33:53,580 --> 00:33:57,650
mas em vez disso o FacebookID desse usuário está configurado, e

408
00:33:57,650 --> 00:34:02,660
o nome de usuário é configurado para ser esse valor, e o nome de usuário é configurado lá.

409
00:34:02,660 --> 00:34:05,580
E também o sobrenome deveria ter sido criado aqui, mas

410
00:34:05,580 --> 00:34:08,990
eu acho que há um pequeno erro no meu código.

411
00:34:08,990 --> 00:34:16,910
Então eu vou verificar a parte do sobrenome lá.

412
00:34:18,100 --> 00:34:20,110
Indo para authenticate.js.

413
00:34:20,110 --> 00:34:23,130
Deixe-me ver se eu cometi um erro aqui.

414
00:34:23,130 --> 00:34:24,580
Lá vamos nós.

415
00:34:24,580 --> 00:34:28,340
Digitei o nome F-A-M-I-L-Y.

416
00:34:28,340 --> 00:34:31,980
Então, veja, nem eu sou sobre cometer erros.

417
00:34:31,980 --> 00:34:36,277
Então este deve ser FamilyName aqui,

418
00:34:36,277 --> 00:34:42,730
user.lastname profile.name.familyName aqui.

419
00:34:42,730 --> 00:34:46,520
Então deixe-me salvar as alterações, e agora o código deve funcionar corretamente.

420
00:34:47,710 --> 00:34:49,950
Voltando novamente para o terminal,

421
00:34:49,950 --> 00:34:54,460
agora você vê que um novo usuário foi criado com o perfil do Facebook aqui.

422
00:34:54,460 --> 00:34:59,130
Agora, qualquer vez subsequente que eu tentei me autenticar usando Facebook

423
00:34:59,130 --> 00:35:00,520
é o mesmo processo.

424
00:35:00,520 --> 00:35:03,000
Obtive o token de acesso do Facebook e

425
00:35:03,000 --> 00:35:06,160
, em seguida, analiso no token de acesso para o meu servidor expresso.

426
00:35:06,160 --> 00:35:10,790
Meu servidor expresso irá para o Facebook, buscar o perfil e,

427
00:35:10,790 --> 00:35:14,020
em seguida, verificar se o usuário já existe.

428
00:35:14,020 --> 00:35:18,660
E no login subsequente que eu faço usando o Facebook,

429
00:35:18,660 --> 00:35:22,460
eu descobriria que esse usuário em particular já existe no sistema.

430
00:35:22,460 --> 00:35:26,540
Então, ele vai simplesmente avançar e o usuário será autenticado e,

431
00:35:26,540 --> 00:35:31,730
em seguida, o servidor extra irá emitir um token web JSON para o seu

432
00:35:31,730 --> 00:35:37,385
cliente e podemos avançar a partir desse ponto como antes.

433
00:35:37,385 --> 00:35:42,395
Então você vê, configurar a autenticação baseada no OAuth 2 usando um

434
00:35:42,395 --> 00:35:48,123
provedor de serviços OAuth 2 como o Facebook não é tão difícil desde que tenhamos

435
00:35:48,123 --> 00:35:54,135
o módulo apropriado baseado na estratégia de autenticação do Facebook.

436
00:35:54,135 --> 00:35:59,060
Como passaporte Facebook token que já cuida de grande parte

437
00:35:59,060 --> 00:36:04,253
do trabalho em nosso nome e, em seguida, nos permite configurar nosso servidor expresso

438
00:36:04,253 --> 00:36:09,750
para lidar com autenticação de terceiros com base em OAuth 2 do Facebook.

439
00:36:09,750 --> 00:36:12,730
Com isso, completamos este exercício.

440
00:36:12,730 --> 00:36:16,490
Neste exercício, aprendemos como fazer toda a autenticação OAuth 2

441
00:36:16,490 --> 00:36:20,590
usando o Facebook como a autenticação OAuth 2 fornecida.

442
00:36:20,590 --> 00:36:25,263
Este é um bom momento para você salvar as alterações que você fez em

443
00:36:25,263 --> 00:36:29,521
seu Repositório Git com o passaporte de mensagem Facebook.

444
00:36:29,521 --> 00:36:35,380
[ MUSIC]