1
00:00:00,000 --> 00:00:04,557
[MUSIC]

2
00:00:04,557 --> 00:00:10,906
Ora che abbiamo capito su OAuth 2 e su come Facebook supporta OAuth 2,

3
00:00:10,906 --> 00:00:16,870
passiamo a questo esercizio in cui configureremo la nostra

4
00:00:16,870 --> 00:00:23,460
applicazione server espresso per utilizzare Facebook come provider OAuth 2 per il nostro server.

5
00:00:23,460 --> 00:00:26,820
E allo stesso tempo per la nostra applicazione client.

6
00:00:26,820 --> 00:00:30,500
In questo esercizio ci baseremo sul passaporto che

7
00:00:30,500 --> 00:00:34,730
abbiamo già configurato nella nostra applicazione espressa.

8
00:00:34,730 --> 00:00:39,890
Configureremo una nuova strategia per l'autenticazione con Facebook

9
00:00:39,890 --> 00:00:43,600
utilizzando quel modulo del nodo token Facebook passaporto.

10
00:00:45,680 --> 00:00:51,629
Per iniziare a questo esercizio,

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

12
00:01:01,590 --> 00:01:07,640
Ora, questo è dove registrerai l'applicazione client, che è fondamentalmente

13
00:01:07,640 --> 00:01:13,280
il tuo server, il server aggiuntivo, che funge da applicazione client per Facebook.

14
00:01:13,280 --> 00:01:16,380
E poi registreremo un'applicazione client lì.

15
00:01:16,380 --> 00:01:21,250
E poi ottieni un ID app e un segreto app da Facebook.

16
00:01:21,250 --> 00:01:24,950
Ora ovviamente va da sé che è necessario avere un account Facebook

17
00:01:24,950 --> 00:01:27,160
per essere in grado di configurarlo.

18
00:01:27,160 --> 00:01:32,520
Se non hai un account Facebook e non vuoi fare questo esercizio,

19
00:01:32,520 --> 00:01:36,220
allora non c'è nulla di male nel non fare questo esercizio.

20
00:01:36,220 --> 00:01:39,110
Ma ovviamente per fare questo esercizio OAuth 2,

21
00:01:39,110 --> 00:01:45,210
hai bisogno di un account Facebook per configurare il tuo provider OAuth su Facebook.

22
00:01:45,210 --> 00:01:47,390
Così andando su questo sito,

23
00:01:47,390 --> 00:01:52,510
developers.facebook.com/apps, si noterà che sarà necessario

24
00:01:52,510 --> 00:01:57,970
effettuare il login per continuare se non si è connessi dal browser.

25
00:01:57,970 --> 00:02:01,790
Ora puoi vedere che ho già configurato alcune app qui e

26
00:02:01,790 --> 00:02:03,170
le ho testate.

27
00:02:03,170 --> 00:02:07,990
Ora, per creare una nuova app, fare clic su Aggiungi nuova app.

28
00:02:07,990 --> 00:02:13,140
E poi puoi fornire il nome per la tua app.

29
00:02:13,140 --> 00:02:20,990
Quindi posso dire Confusion3, e poi possiamo fornire l'e-mail di contatto.

30
00:02:20,990 --> 00:02:26,336
Quindi segui la procedura per creare la tua nuova app qui.

31
00:02:36,108 --> 00:02:40,925
E una volta creata l'app, noterai immediatamente che

32
00:02:40,925 --> 00:02:45,290
c'è un ID app che è stato creato per la tua app.

33
00:02:45,290 --> 00:02:47,180
E poi per questa particolare applicazione.

34
00:02:47,180 --> 00:02:50,680
Quindi, se stai andando al cruscotto, vedrai

35
00:02:51,840 --> 00:02:56,640
due pezzi di informazioni che davvero ti servono per procedere ulteriormente.

36
00:02:56,640 --> 00:03:01,850
Uno è l'ID app, quindi assicurati di creare una copia dell'ID app.

37
00:03:01,850 --> 00:03:03,810
E il secondo è il segreto dell'app.

38
00:03:03,810 --> 00:03:10,320
Quindi, puoi digitare il pulsante Mostra qui e poi otterrai il segreto dell'app.

39
00:03:10,320 --> 00:03:14,350
Segreto qui così come puoi vedere questi due non sono altro che stringhe ASCII.

40
00:03:14,350 --> 00:03:18,980
Quindi fare una copia di questo perché è necessario configurare il server esperto e

41
00:03:18,980 --> 00:03:23,200
anche l'applicazione client con queste due informazioni.

42
00:03:23,200 --> 00:03:25,870
E una volta che l'avrai avuta,

43
00:03:25,870 --> 00:03:29,105
potremo procedere con il resto dell'esercizio.

44
00:03:29,105 --> 00:03:33,500
Dovrai accedere al dashboard della tua applicazione.

45
00:03:33,500 --> 00:03:38,890
E nelle impostazioni, come puoi vedere, nelle impostazioni di base qui

46
00:03:38,890 --> 00:03:43,310
aggiungi solo una piattaforma del sito web qui.

47
00:03:43,310 --> 00:03:52,650
E quindi fornire l'URL come https//localhost3443.

48
00:03:52,650 --> 00:03:58,168
E salva le modifiche qui alla tua applicazione qui.

49
00:03:58,168 --> 00:04:03,910
Dopo aver aggiunto nel sito web qui vai alle impostazioni avanzate.

50
00:04:03,910 --> 00:04:09,000
E poi fare clic su Sì per dire

51
00:04:09,000 --> 00:04:14,400
app nativa o desktop qui e dire sì a quello e quindi salvare le modifiche.

52
00:04:15,590 --> 00:04:20,461
E nell'impostazione di base nei domini dell'app, digita

53
00:04:20,461 --> 00:04:28,339
https://localhost:3443 e salva le modifiche.

54
00:04:29,640 --> 00:04:33,520
Quindi, vai alle istruzioni per l'esercizio per questo esercizio.

55
00:04:33,520 --> 00:04:36,580
E vedresti che c'è un file index.html che

56
00:04:36,580 --> 00:04:39,540
ho fornito nelle risorse di esercizio.

57
00:04:39,540 --> 00:04:47,270
Scaricare questo file index.html e quindi spostarlo nella cartella pubblica.

58
00:04:47,270 --> 00:04:49,941
Quindi cerchiamo di scaricare questo file index.html.

59
00:04:57,932 --> 00:05:05,548
Successivamente, andando alla cartella ConfusionServer nella cartella pubblica,

60
00:05:05,548 --> 00:05:11,125
vedi che ho già un file index.html.

61
00:05:11,125 --> 00:05:16,039
Ho intenzione di sostituire questo con il file index.html scaricato

62
00:05:16,039 --> 00:05:17,774
che ho appena ottenuto.

63
00:05:17,774 --> 00:05:20,502
Ho salvato questo sul mio desktop.

64
00:05:20,502 --> 00:05:23,173
Quindi ho intenzione di tirare questo index.html e

65
00:05:23,173 --> 00:05:27,771
quindi sostituire il file index.html nella cartella pubblica del mio ConfusionServer.

66
00:05:27,771 --> 00:05:31,227
Quindi, andando all'editor, apriamo il file index.html.

67
00:05:31,227 --> 00:05:34,584
E se lo apri vedrai che ho già configurato

68
00:05:34,584 --> 00:05:35,112
del codice JavaScript qui.

69
00:05:35,112 --> 00:05:39,850
Questo codice JavaScript che ho ottenuto da Facebook in cui

70
00:05:39,850 --> 00:05:44,790
specificano come è possibile configurare un'applicazione Dev usando questo.

71
00:05:44,790 --> 00:05:51,030
Quindi, l'ho copiato dalle istruzioni di Facebook.

72
00:05:51,030 --> 00:05:55,470
In particolare noterai che in questo file index.html,

73
00:05:55,470 --> 00:05:58,735
c'è questo campo AppID qui.

74
00:05:58,735 --> 00:06:04,400
Stai per sostituire questo campo AppID con l'

75
00:06:04,400 --> 00:06:09,060
ID client che hai ottenuto registrando la tua app su Facebook.

76
00:06:09,060 --> 00:06:13,130
Quindi, qui, sto sostituendo l'ID di questo client

77
00:06:13,130 --> 00:06:18,430
con l'ID della mia app che ho registrato su Facebook qui.

78
00:06:18,430 --> 00:06:22,957
E devi fare lo stesso passo con l'app

79
00:06:22,957 --> 00:06:27,750
che ti registri su Facebook, con l'ID app che ottieni da Facebook.

80
00:06:27,750 --> 00:06:30,812
E quindi salvare le modifiche a index.html.

81
00:06:30,812 --> 00:06:36,980
Questa pagina index.html che ho qui creerà

82
00:06:36,980 --> 00:06:42,290
un pulsante di accesso sulla pagina index.html, che quando cliccato

83
00:06:42,290 --> 00:06:47,580
ci aiuterà ad accedere a Facebook e quindi ottenere un token di accesso da Facebook.

84
00:06:48,660 --> 00:06:51,260
Successivamente, andando alla cartella ConfusionServer,

85
00:06:51,260 --> 00:06:55,280
installeremo il modulo del nodo token Facebook passaporto.

86
00:06:55,280 --> 00:06:58,494
Quindi al prompt digitare npm installa

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

88
00:07:05,003 --> 00:07:09,730
installa questo modulo nodo.

89
00:07:09,730 --> 00:07:17,000
E come puoi vedere sto usando la versione 3.3.0 in questo corso.

90
00:07:17,000 --> 00:07:20,446
Tornando all'editor, apri config.js.

91
00:07:20,446 --> 00:07:25,162
E in config.js aggiungerò

92
00:07:25,162 --> 00:07:34,440
una proprietà chiamata 'facebook' nel mio file config.js.

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

94
00:07:39,221 --> 00:07:44,481
configurerò il mio ClientID e

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

96
00:07:48,560 --> 00:07:54,150
Ora, il ClientID sarà esattamente ciò che si ottiene da Facebook.

97
00:07:54,150 --> 00:08:00,304
Qui, e il segreto del cliente come hai visto quando hai registrato la tua domanda.

98
00:08:02,198 --> 00:08:05,221
Ottieni una seconda stringa lì, quindi copia quella stringa e

99
00:08:05,221 --> 00:08:07,764
poi incollala nel ClientSecret qui.

100
00:08:07,764 --> 00:08:13,790
Ora assicurati che questo sia incollato come una stringa qui.

101
00:08:13,790 --> 00:08:19,090
Allo stesso modo, incollando ClientSecret nel mio file config.js.

102
00:08:19,090 --> 00:08:26,360
Quindi, configurarlo qui mi aiuterà a usare questi due dove ho bisogno nel mio codice.

103
00:08:26,360 --> 00:08:29,790
Successivamente, come ci siamo resi conto, ogni volta che l'utente

104
00:08:32,390 --> 00:08:37,770
accede e quindi ottiene il token di accesso e lo trasmette al nostro server express.

105
00:08:37,770 --> 00:08:41,160
Il server express sta per utilizzare quel token di accesso e andare a

106
00:08:41,160 --> 00:08:47,840
recuperare le informazioni sul file dal server Facebook 0 dovrebbe.

107
00:08:47,840 --> 00:08:52,380
E poi, una volta raggiunte le informazioni del profilo, allora il nostro server express

108
00:08:52,380 --> 00:08:57,980
creerà un nuovo account utente nella nostra applicazione.

109
00:08:57,980 --> 00:09:01,750
E usa l'ID di Facebook come indice in questo account di utilizzo.

110
00:09:01,750 --> 00:09:03,630
Quindi, per soddisfare questo,

111
00:09:03,630 --> 00:09:08,467
andremo nel file user.js in cui abbiamo definito il nostro modello.

112
00:09:08,467 --> 00:09:12,854
Quindi, oltre al nome e al cognome,

113
00:09:12,854 --> 00:09:17,241
aggiungerò anche un campo qui chiamato FaceBookID,

114
00:09:17,241 --> 00:09:20,510
che è del tipo String qui.

115
00:09:20,510 --> 00:09:24,548
FaceBookID memorizzerà il facebookID

116
00:09:24,548 --> 00:09:28,700
dell'utente che ha passato il token di accesso.

117
00:09:29,760 --> 00:09:34,002
Nel prossimo passo ti mostrerò come configurarlo.

118
00:09:34,002 --> 00:09:40,260
Quindi configuriamo la nostra strategia di Facebook utilizzando il token Facebook passaporto..

119
00:09:40,260 --> 00:09:43,640
Quando un utente passa il token di accesso,

120
00:09:43,640 --> 00:09:47,230
allora stai andando a recuperare il profilo e quindi impostare un account per

121
00:09:47,230 --> 00:09:52,160
quell'utente nel nostro server locale qui, nel nostro server espresso qui.

122
00:09:52,160 --> 00:09:56,410
Inizializzeremo il nome e il cognome e il FacebookID.

123
00:09:56,410 --> 00:10:01,760
Ma ovviamente questo particolare account non avrà una password o

124
00:10:01,760 --> 00:10:04,140
piuttosto l'hash installato associato a questo.

125
00:10:04,140 --> 00:10:09,150
Perché, se un utente effettua il login utilizzando questo account, allora dovrà utilizzare la loro

126
00:10:09,150 --> 00:10:14,400
parte di accesso di Facebook per accedere alla nostra applicazione.

127
00:10:14,400 --> 00:10:18,330
Successivamente andremo ad autenticare il file dark.js.

128
00:10:18,330 --> 00:10:23,138
Quindi questo dove abbiamo impostato tutte le nostre diverse

129
00:10:23,138 --> 00:10:25,507
strategie di autenticazione del passaporto.

130
00:10:25,507 --> 00:10:30,880
Quindi qui oltre alla strategia jwt e

131
00:10:30,880 --> 00:10:37,175
alla strategia locale che ho configurato qui,

132
00:10:37,175 --> 00:10:43,176
fammi creare un FaceBookTokenStrategy qui.

133
00:10:43,176 --> 00:10:49,965
E quindi impostare il token di richiedere-password-facebook-.

134
00:10:52,494 --> 00:10:56,561
E questo ci darà una nuova strategia che possiamo

135
00:10:56,561 --> 00:11:00,530
configurare nel nostro modulo passaporto qui.

136
00:11:00,530 --> 00:11:04,573
Quindi, andando giù nel codice qui, proprio lì,

137
00:11:04,573 --> 00:11:07,761
alla fine di questo file, creerò,

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

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

140
00:11:21,697 --> 00:11:28,380
E così questo è dove specificherei qui il nuovo FaceBookTokenStrategy.

141
00:11:29,610 --> 00:11:33,730
E poi specificheremo i dettagli di questo

142
00:11:33,730 --> 00:11:38,886
FacebookTokenStrategy, proprio a questo punto qui.

143
00:11:38,886 --> 00:11:45,280
Quindi, in questo FacebookTokenStrategy, come affrontiamo questo problema?

144
00:11:45,280 --> 00:11:51,910
Lasciami avvolgere la parola a capo in modo da poter vedere il codice completo.

145
00:11:51,910 --> 00:11:59,300
Quindi, per il FacebookTokenStrategy, inizieremo dicendo prima.

146
00:11:59,300 --> 00:12:04,794
La prima parte di FacebookTokenStrategy prende il ClientID.

147
00:12:08,542 --> 00:12:17,406
Che abbiamo config a config.facebook.clientID qui,

148
00:12:17,406 --> 00:12:22,302
e client, Segreto,

149
00:12:22,302 --> 00:12:30,340
che anche noi abbiamo configurato in, Il nostro file di configurazione qui.

150
00:12:30,340 --> 00:12:38,235
Quindi stiamo andando a fornire questo come il primo parametro di questa strategia qui.

151
00:12:38,235 --> 00:12:43,985
E poi il secondo parametro, è dove sfidando

152
00:12:43,985 --> 00:12:48,145
la funzione di callback che entra in questo punto.

153
00:12:48,145 --> 00:12:53,015
Quindi la funzione di callback qui ottiene tre valori.

154
00:12:53,015 --> 00:12:57,100
Quindi ottiene AccesToken,

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

156
00:13:04,584 --> 00:13:07,760
callback chiamato come fatto qui.

157
00:13:07,760 --> 00:13:12,047
Quindi questi sono i quattro parametri che entrano nella funzione di callback che

158
00:13:12,047 --> 00:13:13,447
configureremo a questo punto.

159
00:13:13,447 --> 00:13:18,660
Quindi fammi rientrare quel codice in modo che sia un po 'più chiaro da vedere.

160
00:13:18,660 --> 00:13:25,592
E all'interno di questa funzione di callback che

161
00:13:25,592 --> 00:13:30,150
configuro qui, dirò prima user.findone.

162
00:13:30,150 --> 00:13:35,430
Quindi cercheremo di vedere se questo particolare utente di Facebook

163
00:13:35,430 --> 00:13:40,470
ha effettuato l'accesso in precedenza in modo che l'account

164
00:13:40,470 --> 00:13:46,381
sarebbe già stato configurato, Con il FaceBookID.

165
00:13:46,381 --> 00:13:49,051
Ora dove otteniamo il FaceBookID?

166
00:13:49,051 --> 00:13:55,160
Si noti che stiamo ottenendo quel profilo per l'utente,

167
00:13:55,160 --> 00:13:59,630
arrivando qui, in modo da poter vedere che questo profilo sta arrivando come parametro.

168
00:13:59,630 --> 00:14:04,208
Questo profilo porterà un sacco di informazioni provenienti da Facebook che

169
00:14:04,208 --> 00:14:06,319
possiamo utilizzare all'interno della nostra applicazione.

170
00:14:06,319 --> 00:14:13,326
L' AccesStoken, ovviamente, viene fornito al server dall'utente.

171
00:14:13,326 --> 00:14:20,870
Quindi, una volta che cerchiamo di trovare almeno un utente con un ID profilo Facebook.

172
00:14:20,870 --> 00:14:26,200
Quindi, se questo utente esiste allora abbiamo già scoperto che l'utente ha precedentemente

173
00:14:26,200 --> 00:14:30,550
effettuato l'accesso al nostro account utilizzando l'approccio Facebook.

174
00:14:30,550 --> 00:14:37,078
Quindi, in questo caso possiamo procedere in avanti altrimenti creeremo un nuovo utente.

175
00:14:37,078 --> 00:14:42,416
Quindi, la funzione di callback qui avrà due parametri,

176
00:14:42,416 --> 00:14:44,557
l'err e l'utente qui.

177
00:14:49,621 --> 00:14:55,298
E questa funzione di callback come vedremo,

178
00:14:55,298 --> 00:15:01,800
ben dentro qui controlleremo per vedere se (err).

179
00:15:01,800 --> 00:15:07,072
Quindi, se questo causa un errore, allora ovviamente

180
00:15:07,072 --> 00:15:13,408
quello che dobbiamo fare è restituire fatto (err, false).

181
00:15:15,694 --> 00:15:20,663
Quindi questo fatto come puoi vedere è la funzione di callback che sta entrando come

182
00:15:20,663 --> 00:15:23,577
parametro di questa funzione qui, quindi

183
00:15:23,577 --> 00:15:26,770
chiameremo il fatto con err e false.

184
00:15:26,770 --> 00:15:31,830
Se non è un errore, allora

185
00:15:31,830 --> 00:15:36,384
diremo se (! Err

186
00:15:36,384 --> 00:15:41,950
&& utente! == null).

187
00:15:43,170 --> 00:15:47,880
Quindi, se l'utente non è nullo, quindi ciò significa che abbiamo trovato un utente nel sistema

188
00:15:47,880 --> 00:15:52,610
che non è stato prima con quel particolare FaceBookID, Quindi per l'utente,

189
00:15:52,610 --> 00:15:59,750
tutto ciò che dobbiamo fare è restituire fatto (null,) poiché non

190
00:15:59,750 --> 00:16:05,100
c'è nessun errore qui, e poi restituiremo il valore utente per questo quaggiù.

191
00:16:05,100 --> 00:16:08,560
Quindi, il che significa che se l'utente ha già effettuato

192
00:16:08,560 --> 00:16:13,350
l'accesso in precedenza utilizzando l'approccio Facebook, l'utente sarebbe già stato creato.

193
00:16:13,350 --> 00:16:17,730
E così, quell'utente verrà trovato e poi passeremo indietro quell'utente.

194
00:16:17,730 --> 00:16:25,010
In caso contrario, vedere se non parte è la parte più interessante di questo esercizio.

195
00:16:25,010 --> 00:16:30,290
Se l'utente non esiste, allora abbiamo bisogno di creare un nuovo utente.

196
00:16:30,290 --> 00:16:33,959
Ora per creare il nuovo utente, diremo utente,

197
00:16:38,653 --> 00:16:42,181
= nuovo utente, e quando creiamo un nuovo utente,

198
00:16:42,181 --> 00:16:45,832
ricordare che abbiamo bisogno di passare il nome utente.

199
00:16:45,832 --> 00:16:50,970
Il nome utente verrebbe ottenuto dal profilo e il profilo Facebook

200
00:16:50,970 --> 00:16:57,200
restituito avrà un campo chiamato come DisplayName.

201
00:16:57,200 --> 00:17:02,050
E così questo è il campo che userò per creare un nuovo utente qui.

202
00:17:02,050 --> 00:17:07,176
Quindi creeremo un nuovo utente con il nome utente impostato

203
00:17:07,176 --> 00:17:13,455
uguale al DisplayName, e dopo che l'utente è stato creato,

204
00:17:13,455 --> 00:17:21,874
allora diremo user.facebookID, = profile.id.

205
00:17:21,874 --> 00:17:24,654
Quindi stiamo andando a salvare l'ID Facebook dell'utente.

206
00:17:24,654 --> 00:17:28,902
Quindi ritorna in questo oggetto profilo qui,

207
00:17:28,902 --> 00:17:33,979
quindi metti l'ID Facebook dell'utente all'ID del profilo. In

208
00:17:33,979 --> 00:17:38,204
modo che successivamente, se lo stesso utente accede,

209
00:17:38,204 --> 00:17:43,265
questa ricerca sarà in grado di trovare questo utente nel nostro database.

210
00:17:43,265 --> 00:17:46,450
E poi

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

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

213
00:17:58,857 --> 00:18:02,447
Quindi il profilo ha questo oggetto nome su di esso,

214
00:18:02,447 --> 00:18:07,970
che ha un nome dato e un nome di famiglia associato a questo.

215
00:18:07,970 --> 00:18:10,994
Questo viene restituito dal profilo Facebook dell'utente.

216
00:18:10,994 --> 00:18:16,165
E anche l'user.lastname

217
00:18:16,165 --> 00:18:21,026
lo imposteremo su Profile.Name.FamilyName.

218
00:18:22,762 --> 00:18:28,232
E poi, una volta che abbiamo impostato tutti questi diremo user.save.

219
00:18:28,232 --> 00:18:31,310
Quindi stiamo salvando le modifiche all'utente e

220
00:18:31,310 --> 00:18:35,270
quindi questo restituirà err e l'utente.

221
00:18:35,270 --> 00:18:39,090
Quindi, restituirà un errore se l'utente non può essere creato,

222
00:18:39,090 --> 00:18:42,960
altrimenti restituirà l'utente creato qui.

223
00:18:42,960 --> 00:18:47,240
Quindi in questo caso diremo, se (err),

224
00:18:47,240 --> 00:18:51,745
allora restituirà fatto (err,

225
00:18:51,745 --> 00:18:58,627
false) perché non siamo riusciti a creare l'utente.

226
00:18:58,627 --> 00:19:03,824
altrimenti, l'utente è stato creato con successo,

227
00:19:03,824 --> 00:19:08,615
quindi restituiremo fatto (null, utente).

228
00:19:08,615 --> 00:19:11,265
Quindi, indipendentemente dal caso,

229
00:19:11,265 --> 00:19:15,965
se l'utente esiste, troverai quell'utente e restituirai il valore.

230
00:19:15,965 --> 00:19:19,824
Se l'utente non esiste, stai per creare un nuovo utente basato sul

231
00:19:19,824 --> 00:19:22,431
profilo Facebook dell'utente che abbiamo ottenuto.

232
00:19:22,431 --> 00:19:28,772
E poi aggiungere il nuovo utente nel nostro sito server, nel database.

233
00:19:28,772 --> 00:19:32,642
Quindi questa è la strategia che configuriamo per il

234
00:19:32,642 --> 00:19:37,532
nostro passaporto, il nuovo FacebookTokenStrategy.

235
00:19:37,532 --> 00:19:40,552
Quindi questo ci permetterà di trovare l'utente.

236
00:19:40,552 --> 00:19:45,571
Così ora che abbiamo configurato la nostra applicazione per

237
00:19:45,571 --> 00:19:50,499
creare un utente o trovare l'utente in base all'ID Facebook.

238
00:19:50,499 --> 00:19:55,752
L' ultimo passaggio è ovviamente quello di introdurre

239
00:19:55,752 --> 00:20:00,851
una nuova rotta nel file users.js.

240
00:20:00,851 --> 00:20:05,284
Quindi nel file users.js ricorderai che avevamo il percorso di registrazione che

241
00:20:05,284 --> 00:20:09,950
consente all'utente di registrarsi per l'account locale con il nome utente e la password.

242
00:20:09,950 --> 00:20:15,137
E poi hai il login che permette all'utente di accedere usando il nome utente e

243
00:20:15,137 --> 00:20:15,730
la password.

244
00:20:15,730 --> 00:20:19,455
Ma ora, useremo Facebook per accedere all'utente.

245
00:20:19,455 --> 00:20:25,601
Quindi in questo caso diremo, router.get,

246
00:20:25,601 --> 00:20:32,208
e l'endpoint sarà/facebook/token.

247
00:20:32,208 --> 00:20:37,260
Quindi, se l'utente invia una richiesta get agli utenti/facebook/token,

248
00:20:37,260 --> 00:20:41,550
allora stiamo per autenticare l'utente utilizzando

249
00:20:41,550 --> 00:20:45,585
l'autenticazione basata su Facebook OAuth 2.

250
00:20:45,585 --> 00:20:50,470
Quindi qui, diremo passport.authenticate, e

251
00:20:50,470 --> 00:20:57,555
stiamo andando ad autenticare utilizzando la strategia facebook-token.

252
00:20:57,555 --> 00:21:04,076
Ricordiamo che avevamo già configurato questo nel nostro file authenticate.js,

253
00:21:04,076 --> 00:21:10,908
quindi configureremo la strategia di autenticazione del passaporto facebook-token e

254
00:21:10,908 --> 00:21:15,786
quindi quella funzione di callback che ottiene req, res qui.

255
00:21:23,390 --> 00:21:30,081
Quindi lasciami, Attiva/disattiva la parola a capo qui,

256
00:21:30,081 --> 00:21:36,356
in modo da poter vedere che questo è il router.get su questo endpoint qui.

257
00:21:36,356 --> 00:21:44,890
E poi qui dentro, configurerò questa applicazione.

258
00:21:44,890 --> 00:21:51,768
Quindi, a questo punto, diremo, se (req.user), ora nota che quando chiamiamo

259
00:21:51,768 --> 00:21:57,168
passport.authenticate con la strategia facebook-token.

260
00:21:57,168 --> 00:21:59,055
Questo, se ha successo,

261
00:21:59,055 --> 00:22:03,010
sarebbe stato caricato nell'utente nell'oggetto richiesta.

262
00:22:03,010 --> 00:22:08,387
Quindi, quando arriviamo a questo punto qui dopo che il

263
00:22:08,387 --> 00:22:11,596
middware passport.authenticate facebook-token è stato eseguito,

264
00:22:11,596 --> 00:22:16,291
l'utente avrebbe già caricato nell'oggetto richiesta.

265
00:22:16,291 --> 00:22:23,070
Quindi, se questo è il caso, allora, diremo, creeremo un token.

266
00:22:23,070 --> 00:22:27,709
Creeremo un token web JSON qui, proprio come il modo in cui abbiamo

267
00:22:27,709 --> 00:22:32,371
creato il token web JSON quando l'utente ha effettuato l'accesso qui.

268
00:22:32,371 --> 00:22:35,275
Quindi, lo copieremo qui.

269
00:22:38,010 --> 00:22:41,586
Authenticate.getToken, quindi questo ci porterà il token web JSON.

270
00:22:41,586 --> 00:22:46,656
Quindi, in sostanza, l'utente sta inviando il token di accesso al

271
00:22:46,656 --> 00:22:50,634
server express, il server express utilizza AccesToken per andare su Facebook e

272
00:22:50,634 --> 00:22:52,979
quindi recuperare il profilo dell'utente.

273
00:22:52,979 --> 00:22:57,560
E se l'utente non esiste, creeremo un nuovo utente con quell'ID Facebook.

274
00:22:57,560 --> 00:23:02,486
E poi, dopo, il nostro server espresso genererà

275
00:23:02,486 --> 00:23:07,818
un token web JSON e quindi restituirà il token web JSON al nostro client.

276
00:23:07,818 --> 00:23:13,878
Tutti gli accessi successivi dal nostro utente dovranno includere questo

277
00:23:13,878 --> 00:23:19,317
token web JSON che abbiamo appena restituito utilizzando questo approccio.

278
00:23:19,317 --> 00:23:24,280
Quindi a questo punto non hai più bisogno del token di accesso di Facebook.

279
00:23:24,280 --> 00:23:29,287
È possibile scartare il token di accesso di Facebook a questo punto perché

280
00:23:29,287 --> 00:23:35,237
il token Web JSON è quello che mantiene attiva l'autenticazione degli utenti per

281
00:23:35,237 --> 00:23:39,602
qualsiasi durata in cui questo token Web JSON è attivo.

282
00:23:39,602 --> 00:23:45,529
Ora, oltre a questo, ovviamente dobbiamo anche fare questi passi qui.

283
00:23:45,529 --> 00:23:48,365
Quindi ho intenzione di copiare quella parte qui.

284
00:23:48,365 --> 00:23:53,336
perché farò esattamente la stessa cosa anche in questo caso,

285
00:23:53,336 --> 00:23:56,284
quindi incolleremo in quel codice qui.

286
00:23:56,284 --> 00:24:00,485
Quindi diremo statusCode = 200, tipo di intestazione del contenuto, e

287
00:24:00,485 --> 00:24:06,120
poi diremo res.json che hai effettuato l'accesso con successo, e il gioco è fatto.

288
00:24:06,120 --> 00:24:13,521
Quindi con questo approccio, come puoi vedere, ora usando una chiamata a questo endpoint.

289
00:24:13,521 --> 00:24:17,498
L' applicazione utente, il client in questo caso,

290
00:24:17,498 --> 00:24:24,320
passerà il token di accesso di Facebook che ha appena ottenuto da Facebook.

291
00:24:24,320 --> 00:24:27,970
E poi il nostro server espresso utilizzerà il token di accesso di Facebook per

292
00:24:27,970 --> 00:24:30,380
verificare l'utente su Facebook.

293
00:24:30,380 --> 00:24:35,580
E poi se l'utente viene riconosciuto da Facebook come utente legittimo, il

294
00:24:35,580 --> 00:24:42,110
nostro server espresso restituirà un token JSON wed al nostro cliente.

295
00:24:42,110 --> 00:24:44,920
E poi il nostro client viene autenticato e

296
00:24:44,920 --> 00:24:48,650
quindi può procedere avanti con l'esecuzione delle altre operazioni

297
00:24:48,650 --> 00:24:53,460
utilizzando il token JSON wed nell'intestazione di tutti i messaggi di richiesta.

298
00:24:53,460 --> 00:25:00,190
Successivamente, proprio come abbiamo fatto con la strategia di autenticazione locale, il gioco è fatto.

299
00:25:00,190 --> 00:25:07,630
Quindi abbiamo completato tutti gli aggiornamenti alla nostra applicazione, salviamo le modifiche.

300
00:25:08,810 --> 00:25:14,940
Andando al nostro terminale, avviamo il server qui,

301
00:25:14,940 --> 00:25:19,710
quindi diremo npm start, e il server è attivo e funzionante.

302
00:25:20,740 --> 00:25:26,320
E ho notato che avevo digitato nella porta P-A-S-S-S,

303
00:25:26,320 --> 00:25:28,790
e quindi questo ha causato un errore qui.

304
00:25:28,790 --> 00:25:32,250
Quindi nota che quanto è facile commettere errori.

305
00:25:32,250 --> 00:25:35,439
Quindi lasciami andare e correggerlo e poi tornare indietro e riavviare il mio server.

306
00:25:37,080 --> 00:25:40,280
Quindi, quando incontri errori come questi, non farti prendere dal panico.

307
00:25:40,280 --> 00:25:43,470
Guardati intorno per vedere dove si trova il problema e molto spesso,

308
00:25:43,470 --> 00:25:47,580
sarà un problema semplice come questo che causerà errori per te.

309
00:25:48,970 --> 00:25:54,160
Ancora una volta, tornando al users.js e

310
00:25:54,160 --> 00:25:57,930
si vede che nel file authenticate.js,

311
00:25:57,930 --> 00:26:02,270
ho configurato questa porta dicendo P-A-S-S-S.

312
00:26:02,270 --> 00:26:06,100
Quindi nel file authenticate.js, lasciami riparare questo a passsport e

313
00:26:06,100 --> 00:26:08,702
quindi salvare le modifiche e quindi riavviare il mio server.

314
00:26:09,770 --> 00:26:16,340
Ora, riavviando il mio server, quindi il mio server è ora attivo e funzionante.

315
00:26:17,400 --> 00:26:20,160
A questo punto, vai a un browser.

316
00:26:20,160 --> 00:26:26,212
E nel browser, digita https://localhost3443.

317
00:26:29,625 --> 00:26:37,350
Se ti capita di avere questa pagina memorizzata nella cache qui, potresti voler rimuovere la cache.

318
00:26:37,350 --> 00:26:41,417
O semplicemente digita localhost: 3343/index.html, e

319
00:26:41,417 --> 00:26:45,829
quindi noterai immediatamente che in questo index.html,

320
00:26:45,829 --> 00:26:49,640
vedrai questo pulsante chiamato pulsante Accedi.

321
00:26:49,640 --> 00:26:54,280
Quindi stiamo andando a fare clic su questo pulsante di accesso per accedere a Facebook.

322
00:26:54,280 --> 00:26:59,880
Accediamo e poi verrai con questo messaggio qui.

323
00:26:59,880 --> 00:27:03,365
Che se hai già effettuato l'accesso a Facebook in precedenza,

324
00:27:03,365 --> 00:27:07,840
ti chiederà il permesso di continuare come utente.

325
00:27:07,840 --> 00:27:12,440
In caso contrario, ti chiederà di accedere a Facebook con e

326
00:27:12,440 --> 00:27:14,030
quindi ti permetterà di continuare.

327
00:27:14,030 --> 00:27:17,000
Dal momento che avevo appena effettuato l'accesso a Facebook un po 'prima, quindi

328
00:27:17,000 --> 00:27:19,020
posso semplicemente fare clic su Continua.

329
00:27:19,020 --> 00:27:24,955
Ora, apri la console JavaScript degli sviluppatori in basso qui.

330
00:27:24,955 --> 00:27:31,810
E nella console JavaScript, vedi un sacco di messaggi stampati qui.

331
00:27:31,810 --> 00:27:33,070
E poi in particolare,

332
00:27:33,070 --> 00:27:37,720
apri questo oggetto che vedrai nella console JavaScript.

333
00:27:37,720 --> 00:27:43,081
E all'interno di questo oggetto, vedrai questa risposta alt qui.

334
00:27:43,081 --> 00:27:49,370
E lì dentro, vedrai uno strumento di accesso presente lì.

335
00:27:49,370 --> 00:27:55,320
Ora, questa è una risposta che si ottiene da Facebook o

336
00:27:55,320 --> 00:28:00,610
fuori al server di autenticazione dalla nostra applicazione qui.

337
00:28:00,610 --> 00:28:03,060
E ho intenzione di copiare semplicemente questo,

338
00:28:03,060 --> 00:28:07,010
perché questo è il token di accesso che Facebook ci ha fornito.

339
00:28:07,010 --> 00:28:13,710
Ora, ho bisogno di dare questo token di accesso al mio server express in modo

340
00:28:13,710 --> 00:28:19,990
che vada e verifichi il mio profilo, e quindi consentirmi di accedere a quell'applicazione.

341
00:28:19,990 --> 00:28:22,860
Quindi lo sto facendo in modo serrato

342
00:28:22,860 --> 00:28:27,560
qui semplicemente perché volevo mostrarti come il token di accesso entra qui.

343
00:28:27,560 --> 00:28:30,940
E copiamo il token di accesso, poi prenderò questo e

344
00:28:30,940 --> 00:28:36,820
userò Postman per inviare questo token di accesso al mio server Express.

345
00:28:36,820 --> 00:28:42,330
Ora, quando si progetta un'app Web come Angular

346
00:28:42,330 --> 00:28:48,840
, l'app Ionic o l'app NativeScript, non è necessario eseguire tutti questi passaggi.

347
00:28:48,840 --> 00:28:53,634
Ora, fondamentalmente quando il token di accesso viene restituito alla tua app Web,

348
00:28:53,634 --> 00:28:58,086
all'app Angular o all'app Ionic o all'app NativeScript,

349
00:28:58,086 --> 00:29:01,868
catturerai semplicemente questo token di accesso lì.

350
00:29:01,868 --> 00:29:06,791
E poi si passerà questo token di accesso al

351
00:29:06,791 --> 00:29:12,770
server Express utilizzando XMLHttpRequest per ottenere le informazioni.

352
00:29:12,770 --> 00:29:16,410
Ma dal momento che volevo illustrare manualmente i passaggi.

353
00:29:16,410 --> 00:29:21,319
Quindi, ho impostato questo index.html con un semplice

354
00:29:21,319 --> 00:29:24,640
codice JavaScript che Facebook fornisce per me.

355
00:29:26,420 --> 00:29:30,792
In modo che sarò in grado di recuperare questo token di autorizzazione che abbiamo ottenuto da

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

357
00:29:31,454 --> 00:29:34,662
Quindi fammi copiare questo token di autorizzazione.

358
00:29:34,662 --> 00:29:39,110
Ora, andremo a Postman, e poi provare a

359
00:29:39,110 --> 00:29:45,340
vedere come possiamo ottenere il token web JSON dal nostro server Express.

360
00:29:45,340 --> 00:29:49,220
Ora, andando a Postman, da Postman,

361
00:29:49,220 --> 00:29:54,525
lasciami ora fare una richiesta GET a

362
00:29:54,525 --> 00:30:03,195
localHost: 3443User'sfacebookToken.

363
00:30:03,195 --> 00:30:07,855
E quando invio questa richiesta a quel punto,

364
00:30:07,855 --> 00:30:13,115
l'altra configurazione che devo fare qui è che,

365
00:30:13,115 --> 00:30:18,080
ho bisogno di passare questo token di accesso che ho appena ottenuto.

366
00:30:18,080 --> 00:30:21,970
Ora, per passare un token di accesso nell'intestazione,

367
00:30:21,970 --> 00:30:26,370
posso passarlo come intestazione di autorizzazione digitando l'autorizzazione.

368
00:30:26,370 --> 00:30:33,660
Ma nota che il valore dovrebbe essere digitato come Beta con una B maiuscola in questo caso,

369
00:30:33,660 --> 00:30:41,350
e quindi incollare quel token di accesso che abbiamo ottenuto da Facebook qui.

370
00:30:41,350 --> 00:30:44,840
Nota la B maiuscola qui, e

371
00:30:44,840 --> 00:30:48,990
poi puoi passare in questo al nostro server.

372
00:30:50,090 --> 00:30:53,970
E poi dopo aver risposto dal nostro server,

373
00:30:53,970 --> 00:30:59,810
vedresti che avresti ottenuto il token web JSON dal nostro sito server.

374
00:30:59,810 --> 00:31:05,472
Quindi questo è un modo per ottenere il token web JSON scambiando il

375
00:31:05,472 --> 00:31:10,000
token di accesso da Facebook che hai appena ottenuto con il tuo server Express.

376
00:31:10,000 --> 00:31:16,330
E il tuo server Express a sua volta andrà a

377
00:31:16,330 --> 00:31:19,960
ottenere le informazioni del tuo profilo da Facebook,

378
00:31:19,960 --> 00:31:23,720
quindi creerà un account specifico per te,

379
00:31:23,720 --> 00:31:28,260
quindi ti restituirà il token web JSON se tutto ha successo.

380
00:31:28,260 --> 00:31:33,290
Un altro modo di passare queste informazioni è nell'intestazione,

381
00:31:33,290 --> 00:31:40,480
si digita access_token come chiave.

382
00:31:40,480 --> 00:31:46,268
E nel valore, digiti semplicemente il

383
00:31:46,268 --> 00:31:52,020
token di accesso come questo qui, e poi puoi inviare la richiesta e la stessa cosa.

384
00:31:52,020 --> 00:31:55,878
Restituirà di nuovo il token web JSON per te.

385
00:31:55,878 --> 00:31:59,410
E poi si acquisirebbe il token web JSON e quindi si continuerebbe con il resto

386
00:31:59,410 --> 00:32:05,300
degli accessi al server express utilizzando questo token web JSON.

387
00:32:05,300 --> 00:32:10,010
Un terzo approccio consiste nell'includere questo nell'

388
00:32:10,010 --> 00:32:15,410
URL stesso come parametro di query.

389
00:32:15,410 --> 00:32:23,827
Il terzo approccio è quello di dire token? access_token= e

390
00:32:23,827 --> 00:32:32,290
quindi incollare il token Web JSON in quel parametro di query.

391
00:32:32,290 --> 00:32:37,140
Non usare le virgolette qui, solo il token web JSON stesso.

392
00:32:37,140 --> 00:32:40,810
E poi invia la richiesta al tuo server.

393
00:32:40,810 --> 00:32:47,680
E poi anche allora il tuo server restituirà il token web JSON corrispondente.

394
00:32:47,680 --> 00:32:52,450
Quindi vedi tre diversi modi in cui puoi analizzare nel tuo token di accesso di Facebook

395
00:32:52,450 --> 00:32:57,350
sul tuo server e quindi ottenere il token web JSON dal tuo server.

396
00:32:57,350 --> 00:33:01,660
E dopo questo, il resto di questi passaggi procede proprio come prima.

397
00:33:02,970 --> 00:33:09,400
Ora per convincervi che in realtà è stato creato un nuovo account con il

398
00:33:09,400 --> 00:33:13,720
profilo Facebook per questo particolare utente, andiamo al terminale.

399
00:33:15,080 --> 00:33:20,240
Nel terminale, in una nuova finestra del terminale, inizierò l'ondulazione del mongo qui.

400
00:33:20,240 --> 00:33:25,050
Quindi nell'ondulazione del mongo, lasciami dire, usa Confusione.

401
00:33:25,050 --> 00:33:31,560
E poi dirò, db.users.find () .pretty (),

402
00:33:31,560 --> 00:33:36,570
e quindi stampare tutti gli utenti che sono registrati nel mio sistema.

403
00:33:36,570 --> 00:33:40,540
Si nota che i tre utenti che avevamo configurato negli esercizi precedenti

404
00:33:40,540 --> 00:33:41,410
sono tutti lì.

405
00:33:43,350 --> 00:33:48,130
Si noti inoltre un quarto utente che è stato appena aggiunto in.

406
00:33:48,130 --> 00:33:53,580
E nota che per questo particolare utente, non abbiamo ancora l'hash in origine,

407
00:33:53,580 --> 00:33:57,650
ma invece il FaceBookID di quell'utente è impostato, e

408
00:33:57,650 --> 00:34:02,660
il nome utente è impostato per essere quel valore, e il firstname è impostato lì.

409
00:34:02,660 --> 00:34:05,580
E anche il cognome avrebbe dovuto essere impostato qui, ma

410
00:34:05,580 --> 00:34:08,990
penso che ci sia un piccolo errore nel mio codice.

411
00:34:08,990 --> 00:34:16,910
Quindi andrò a controllare la parte del cognome di esso lì.

412
00:34:18,100 --> 00:34:20,110
Andare a authenticate.js.

413
00:34:20,110 --> 00:34:23,130
Vediamo se ho fatto un errore.

414
00:34:23,130 --> 00:34:24,580
Ci siamo.

415
00:34:24,580 --> 00:34:28,340
Ho digitato il nome F-A-M-I-L-Y.

416
00:34:28,340 --> 00:34:31,980
Quindi vedi, nemmeno io voglio commettere errori.

417
00:34:31,980 --> 00:34:36,277
Quindi questo dovrebbe essere FamilyName qui,

418
00:34:36,277 --> 00:34:42,730
user.lastname Profile.Name.FamilyName qui.

419
00:34:42,730 --> 00:34:46,520
Quindi lasciami salvare le modifiche e ora il codice dovrebbe funzionare correttamente.

420
00:34:47,710 --> 00:34:49,950
Tornando nuovamente al terminale,

421
00:34:49,950 --> 00:34:54,460
ora si vede che un nuovo utente è stato creato con il profilo Facebook qui.

422
00:34:54,460 --> 00:34:59,130
Ora ogni volta successiva che ho provato ad autenticarmi usando Facebook

423
00:34:59,130 --> 00:35:00,520
è lo stesso processo.

424
00:35:00,520 --> 00:35:03,000
Ho ottenuto il token di accesso da Facebook e

425
00:35:03,000 --> 00:35:06,160
quindi analizzato il token di accesso al mio server express.

426
00:35:06,160 --> 00:35:10,790
Il mio server express andrà quindi su Facebook, recupererà il profilo e

427
00:35:10,790 --> 00:35:14,020
quindi controllerà se l'utente esiste già.

428
00:35:14,020 --> 00:35:18,660
E nel successivo login che faccio usando Facebook,

429
00:35:18,660 --> 00:35:22,460
scoprirei che questo particolare utente è già esistente nel sistema.

430
00:35:22,460 --> 00:35:26,540
Quindi, procederà semplicemente in avanti e l'utente verrà autenticato e

431
00:35:26,540 --> 00:35:31,730
quindi il server aggiuntivo emetterà un token Web JSON al loro

432
00:35:31,730 --> 00:35:37,385
client e potremo procedere avanti da quel punto in poi proprio come prima.

433
00:35:37,385 --> 00:35:42,395
Quindi vedi, impostare l'autenticazione basata su OAuth 2 utilizzando un

434
00:35:42,395 --> 00:35:48,123
provider di servizi OAuth 2 come Facebook non è così difficile a condizione che entriamo in possesso

435
00:35:48,123 --> 00:35:54,135
del modulo basato sulla strategia di autenticazione Facebook del passaporto appropriato.

436
00:35:54,135 --> 00:35:59,060
Come il token Facebook del passaporto che si occupa già di gran parte

437
00:35:59,060 --> 00:36:04,253
del lavoro per nostro conto e quindi ci consente di configurare il nostro server espresso

438
00:36:04,253 --> 00:36:09,750
per gestire l'autenticazione di terze parti basata su OAuth 2 di Facebook.

439
00:36:09,750 --> 00:36:12,730
Con questo, completiamo questo esercizio.

440
00:36:12,730 --> 00:36:16,490
In questo esercizio, abbiamo imparato come eseguire tutte le autenticazione OAuth 2

441
00:36:16,490 --> 00:36:20,590
utilizzando Facebook come autenticazione OAuth 2 fornita.

442
00:36:20,590 --> 00:36:25,263
Questo è un buon momento per salvare le modifiche che hai fatto al

443
00:36:25,263 --> 00:36:29,521
tuo Git Repository con il messaggio passaporto Facebook.

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