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

2
00:00:04,557 --> 00:00:10,906
Ahora que hemos entendido acerca de OAuth 2 y cómo Facebook soporta OAuth 2,

3
00:00:10,906 --> 00:00:16,870
pasemos a este ejercicio donde configuraremos nuestra

4
00:00:16,870 --> 00:00:23,460
aplicación de servidor express para hacer uso de Facebook como el proveedor de OAuth 2 para nuestro servidor.

5
00:00:23,460 --> 00:00:26,820
Y al mismo tiempo para nuestra aplicación cliente.

6
00:00:26,820 --> 00:00:30,500
En este ejercicio vamos a confiar en el pasaporte que

7
00:00:30,500 --> 00:00:34,730
ya hemos configurado en nuestra aplicación express.

8
00:00:34,730 --> 00:00:39,890
Vamos a configurar una nueva estrategia para autenticar con Facebook

9
00:00:39,890 --> 00:00:43,600
usando ese módulo de nodo token de pasaporte de Facebook.

10
00:00:45,680 --> 00:00:51,629
Para empezar a realizar este ejercicio,

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

12
00:01:01,590 --> 00:01:07,640
Ahora, aquí es donde registrará la aplicación cliente, que es básicamente

13
00:01:07,640 --> 00:01:13,280
su servidor, el servidor adicional, actuando como la aplicación cliente para Facebook.

14
00:01:13,280 --> 00:01:16,380
Y luego registraremos una aplicación cliente allí.

15
00:01:16,380 --> 00:01:21,250
Y luego obtén un ID de aplicación y un secreto de aplicación de Facebook.

16
00:01:21,250 --> 00:01:24,950
Ahora, obviamente, no hace falta decir que necesitas tener una cuenta

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

18
00:01:27,160 --> 00:01:32,520
Si usted no tiene una cuenta de Facebook y no desea hacer este ejercicio,

19
00:01:32,520 --> 00:01:36,220
entonces no hay ningún daño en no hacer este ejercicio.

20
00:01:36,220 --> 00:01:39,110
Pero, por supuesto, para hacer este ejercicio de OAuth 2,

21
00:01:39,110 --> 00:01:45,210
necesita una cuenta de Facebook para configurar su proveedor de OAuth en Facebook.

22
00:01:45,210 --> 00:01:47,390
Así que al ir a este sitio,

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

24
00:01:52,510 --> 00:01:57,970
iniciar sesión para continuar si no está conectado desde su navegador.

25
00:01:57,970 --> 00:02:01,790
Ahora puede ver que ya he configurado algunas aplicaciones aquí y

26
00:02:01,790 --> 00:02:03,170
las he probado.

27
00:02:03,170 --> 00:02:07,990
Ahora, para crear una nueva aplicación, haga clic en Añadir nueva aplicación.

28
00:02:07,990 --> 00:02:13,140
Y luego puedes proporcionar el nombre de tu aplicación.

29
00:02:13,140 --> 00:02:20,990
Así que puedo decir Confusion3, y luego podemos proporcionar el correo electrónico de contacto.

30
00:02:20,990 --> 00:02:26,336
Y luego sigue el procedimiento para crear tu nueva aplicación aquí.

31
00:02:36,108 --> 00:02:40,925
Y una vez creada la aplicación, inmediatamente notará que

32
00:02:40,925 --> 00:02:45,290
hay un ID de aplicación que se ha creado para su aplicación.

33
00:02:45,290 --> 00:02:47,180
Y luego para esta aplicación en particular.

34
00:02:47,180 --> 00:02:50,680
Así que si vas al panel de control, verás

35
00:02:51,840 --> 00:02:56,640
dos piezas de información que realmente necesitas para seguir adelante.

36
00:02:56,640 --> 00:03:01,850
Uno es el ID de la aplicación, así que asegúrese de hacer una copia del ID de la aplicación.

37
00:03:01,850 --> 00:03:03,810
Y el segundo es el secreto de la aplicación.

38
00:03:03,810 --> 00:03:10,320
Por lo tanto, puede escribir el botón Mostrar aquí y luego obtendrá el secreto de la aplicación.

39
00:03:10,320 --> 00:03:14,350
Secreto aquí para que como puede ver, estos dos no son más que cadenas ASCII.

40
00:03:14,350 --> 00:03:18,980
Así que haga una copia de esto porque necesita configurar su servidor experto y

41
00:03:18,980 --> 00:03:23,200
también su aplicación cliente con estas dos piezas de información.

42
00:03:23,200 --> 00:03:25,870
Y una vez que lo consigas entonces

43
00:03:25,870 --> 00:03:29,105
podremos continuar con el resto del ejercicio.

44
00:03:29,105 --> 00:03:33,500
Tendrá que ir al panel de control de su aplicación.

45
00:03:33,500 --> 00:03:38,890
Y en la configuración, como puede ver, en la configuración básica aquí

46
00:03:38,890 --> 00:03:43,310
solo agrega una plataforma de sitio web aquí.

47
00:03:43,310 --> 00:03:52,650
Y luego proporcione la URL como https//localhost3443.

48
00:03:52,650 --> 00:03:58,168
Y guarde los cambios aquí en su aplicación aquí.

49
00:03:58,168 --> 00:04:03,910
Después de agregar en el sitio web aquí vaya a la configuración avanzada.

50
00:04:03,910 --> 00:04:09,000
Y luego haga clic en Sí para decir

51
00:04:09,000 --> 00:04:14,400
aplicación nativa o de escritorio aquí y decir que sí a eso y luego guardar los cambios.

52
00:04:15,590 --> 00:04:20,461
Y en la configuración básica de los dominios de la aplicación, escriba

53
00:04:20,461 --> 00:04:28,339
https://localhost:3443 y guarde los cambios.

54
00:04:29,640 --> 00:04:33,520
A continuación, vaya a las instrucciones de ejercicio para este ejercicio.

55
00:04:33,520 --> 00:04:36,580
Y verá que hay un archivo index.html que

56
00:04:36,580 --> 00:04:39,540
he proporcionado en los recursos del ejercicio.

57
00:04:39,540 --> 00:04:47,270
Descargue este archivo index.html y luego muévalo a su carpeta pública.

58
00:04:47,270 --> 00:04:49,941
Así que vamos a descargar este archivo index.html.

59
00:04:57,932 --> 00:05:05,548
A continuación, yendo a la carpeta ConfusionServer en la carpeta pública,

60
00:05:05,548 --> 00:05:11,125
verá que ya tengo un archivo index.html.

61
00:05:11,125 --> 00:05:16,039
Voy a reemplazar esto con el archivo index.html descargado

62
00:05:16,039 --> 00:05:17,774
que acabo de obtener.

63
00:05:17,774 --> 00:05:20,502
He guardado esto en mi escritorio.

64
00:05:20,502 --> 00:05:23,173
Así que solo voy a extraer este index.html y

65
00:05:23,173 --> 00:05:27,771
luego reemplazar el archivo index.html en la carpeta pública de mi ConfusionServer.

66
00:05:27,771 --> 00:05:31,227
A continuación, yendo al editor, abramos el archivo index.html.

67
00:05:31,227 --> 00:05:34,584
Y si lo abres verás que ya he configurado algún

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

69
00:05:35,112 --> 00:05:39,850
Este código JavaScript me apoderé de Facebook donde

70
00:05:39,850 --> 00:05:44,790
especifican cómo puedes configurar una aplicación Dev usando esto.

71
00:05:44,790 --> 00:05:51,030
Por lo tanto, he copiado esto de las instrucciones de Facebook.

72
00:05:51,030 --> 00:05:55,470
En particular, notará que en este archivo index.html,

73
00:05:55,470 --> 00:05:58,735
hay este campo AppID aquí.

74
00:05:58,735 --> 00:06:04,400
Va a reemplazar este campo AppID con el

75
00:06:04,400 --> 00:06:09,060
ID de cliente que obtuvo registrando su aplicación en Facebook.

76
00:06:09,060 --> 00:06:13,130
Entonces, aquí, estoy reemplazando el ID de este cliente

77
00:06:13,130 --> 00:06:18,430
con el ID de mi aplicación que he registrado en Facebook aquí.

78
00:06:18,430 --> 00:06:22,957
Y tienes que hacer el mismo paso con la aplicación

79
00:06:22,957 --> 00:06:27,750
que te registras en Facebook, con el ID de aplicación que obtienes de Facebook.

80
00:06:27,750 --> 00:06:30,812
Y luego guarde los cambios en index.html.

81
00:06:30,812 --> 00:06:36,980
Esta página index.html que tengo aquí creará

82
00:06:36,980 --> 00:06:42,290
un botón de inicio de sesión en la página index.html, que cuando se haga clic

83
00:06:42,290 --> 00:06:47,580
nos ayudará a iniciar sesión en Facebook y luego obtener un token de acceso de Facebook.

84
00:06:48,660 --> 00:06:51,260
A continuación, yendo a la carpeta ConfusionServer,

85
00:06:51,260 --> 00:06:55,280
instalaremos el módulo de nodo token de Facebook pasaporte.

86
00:06:55,280 --> 00:06:58,494
Entonces, en el mensaje, escriba npm instale

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 de nodo.

89
00:07:09,730 --> 00:07:17,000
Y como puede ver, estoy usando la versión 3.3.0 en este curso.

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

91
00:07:20,446 --> 00:07:25,162
Y en config.js voy a agregar

92
00:07:25,162 --> 00:07:34,440
una Propiedad llamada 'facebook' en mi archivo config.js.

93
00:07:34,440 --> 00:07:39,221
Y dentro de aquí,

94
00:07:39,221 --> 00:07:44,481
configuraré mi ClientID y

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

96
00:07:48,560 --> 00:07:54,150
Ahora, el ID del cliente será exactamente lo que obtienes de Facebook.

97
00:07:54,150 --> 00:08:00,304
Aquí, y el secreto del cliente como vio cuando registró su solicitud.

98
00:08:02,198 --> 00:08:05,221
Obtienes una segunda cadena allí, así que copia esa cadena y

99
00:08:05,221 --> 00:08:07,764
luego pégala en ClientSecret aquí.

100
00:08:07,764 --> 00:08:13,790
Ahora asegúrese de que esto se pegue como una cadena aquí.

101
00:08:13,790 --> 00:08:19,090
Del mismo modo, pegando el ClientSecret en mi archivo config.js.

102
00:08:19,090 --> 00:08:26,360
Por lo tanto, configurar esto aquí me ayudará a usar estos dos donde necesito en mi código.

103
00:08:26,360 --> 00:08:29,790
A continuación, como nos dimos cuenta, cada vez que el usuario

104
00:08:32,390 --> 00:08:37,770
inicia sesión y luego obtiene el token de acceso y lo pasa a nuestro servidor express.

105
00:08:37,770 --> 00:08:41,160
El servidor express va a usar ese token de acceso e ir y

106
00:08:41,160 --> 00:08:47,840
buscar la información del archivo del servidor de Facebook 0 debería.

107
00:08:47,840 --> 00:08:52,380
Y luego, una vez que alcance la información del perfil, entonces nuestro servidor express

108
00:08:52,380 --> 00:08:57,980
creará una nueva cuenta de usuario en nuestra aplicación.

109
00:08:57,980 --> 00:09:01,750
Y usa el ID de Facebook como índice en esta cuenta de uso.

110
00:09:01,750 --> 00:09:03,630
Entonces, para acomodar esto,

111
00:09:03,630 --> 00:09:08,467
iremos al archivo user.js donde hemos definido nuestro modelo.

112
00:09:08,467 --> 00:09:12,854
Entonces, además del nombre y el apellido,

113
00:09:12,854 --> 00:09:17,241
también agregaré un campo aquí llamado FacebookID,

114
00:09:17,241 --> 00:09:20,510
que es del tipo String aquí.

115
00:09:20,510 --> 00:09:24,548
FacebookID almacenará el FacebookID

116
00:09:24,548 --> 00:09:28,700
del usuario que ha pasado el token de acceso.

117
00:09:29,760 --> 00:09:34,002
En el siguiente paso, le mostraré cómo configurar esto.

118
00:09:34,002 --> 00:09:40,260
Luego configuramos nuestra estrategia de Facebook usando el token de Facebook de pasaporte..

119
00:09:40,260 --> 00:09:43,640
Cuando un usuario pasa el token de acceso,

120
00:09:43,640 --> 00:09:47,230
entonces va a buscar el perfil y luego configurar una cuenta para

121
00:09:47,230 --> 00:09:52,160
ese usuario en nuestro servidor local aquí, en nuestro servidor express aquí.

122
00:09:52,160 --> 00:09:56,410
Vamos a inicializar el nombre y el apellido y el FacebookID.

123
00:09:56,410 --> 00:10:01,760
Pero, por supuesto, esta cuenta en particular no tendrá una contraseña o

124
00:10:01,760 --> 00:10:04,140
más bien el hash instalado asociado con esto.

125
00:10:04,140 --> 00:10:09,150
Porque, si un usuario hace login usando esta cuenta, entonces tendrá que usar su

126
00:10:09,150 --> 00:10:14,400
parte de inicio de sesión de Facebook para iniciar sesión en nuestra aplicación.

127
00:10:14,400 --> 00:10:18,330
A continuación iremos a autenticar el archivo dark.js.

128
00:10:18,330 --> 00:10:23,138
Así que aquí hemos estado configurando todas nuestras diferentes

129
00:10:23,138 --> 00:10:25,507
estrategias de autenticación de pasaportes.

130
00:10:25,507 --> 00:10:30,880
Así que aquí, además de la estrategia jwt y

131
00:10:30,880 --> 00:10:37,175
la estrategia local que he configurado aquí,

132
00:10:37,175 --> 00:10:43,176
permítanme crear una FacebookTokenStrategy aquí.

133
00:10:43,176 --> 00:10:49,965
Y luego configure el token de contraseña-facebook-requerido.

134
00:10:52,494 --> 00:10:56,561
Y esto nos dará una nueva estrategia que podemos

135
00:10:56,561 --> 00:11:00,530
configurar en nuestro módulo de pasaportes aquí.

136
00:11:00,530 --> 00:11:04,573
Por lo tanto, yendo al código aquí, justo allí,

137
00:11:04,573 --> 00:11:07,761
al final de este archivo, voy a crear,

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
Y entonces aquí es donde especificaría la nueva FacebookTokenStrategy aquí.

141
00:11:29,610 --> 00:11:33,730
Y luego vamos a especificar los detalles de esta

142
00:11:33,730 --> 00:11:38,886
FacebookTokenStrategy, justo en este punto aquí.

143
00:11:38,886 --> 00:11:45,280
Entonces, en esta FacebookTokenStrategy, ¿cómo abordamos este problema?

144
00:11:45,280 --> 00:11:51,910
Permítanme simplemente envolver la palabra para que pueda ver el código completo.

145
00:11:51,910 --> 00:11:59,300
Así que para el FacebookTokenStrategy, vamos a empezar diciendo primero.

146
00:11:59,300 --> 00:12:04,794
La primera parte de FacebookTokenStrategy toma el ID de cliente.

147
00:12:08,542 --> 00:12:17,406
Que tenemos config en Config.facebook.clientid aquí,

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

149
00:12:22,302 --> 00:12:30,340
que también hemos configurado en, Nuestro archivo de configuración aquí.

150
00:12:30,340 --> 00:12:38,235
Así que vamos a proporcionar esto como el primer parámetro de esta estrategia aquí.

151
00:12:38,235 --> 00:12:43,985
Y luego el segundo parámetro, es donde desafía

152
00:12:43,985 --> 00:12:48,145
la función de devolución de llamada que entra en este punto.

153
00:12:48,145 --> 00:12:53,015
Entonces, la función de devolución de llamada aquí obtiene tres valores.

154
00:12:53,015 --> 00:12:57,100
Entonces obtiene AccessToken,

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

156
00:13:04,584 --> 00:13:07,760
devolución de llamada llamada llamada como se hace aquí.

157
00:13:07,760 --> 00:13:12,047
Así que estos son los cuatro parámetros que entran en la función de devolución de llamada que vamos

158
00:13:12,047 --> 00:13:13,447
a configurar en este punto.

159
00:13:13,447 --> 00:13:18,660
Así que déjame sangrar ese código para que sea un poco más claro de ver.

160
00:13:18,660 --> 00:13:25,592
Y dentro de esta función de devolución de llamada que configuro aquí,

161
00:13:25,592 --> 00:13:30,150
primero voy a decir user.findone.

162
00:13:30,150 --> 00:13:35,430
Así que vamos a tratar de ver si este usuario de Facebook

163
00:13:35,430 --> 00:13:40,470
en particular ha iniciado sesión anteriormente por lo que la cuenta ya

164
00:13:40,470 --> 00:13:46,381
estaría configurada, Con el FacebookID.

165
00:13:46,381 --> 00:13:49,051
Ahora, ¿dónde obtenemos el FacebookID?

166
00:13:49,051 --> 00:13:55,160
Observe que estamos obteniendo ese perfil para el usuario,

167
00:13:55,160 --> 00:13:59,630
viniendo aquí, para que pueda ver que este perfil viene como un parámetro.

168
00:13:59,630 --> 00:14:04,208
Este perfil contendrá una gran cantidad de información proveniente de Facebook que

169
00:14:04,208 --> 00:14:06,319
podemos utilizar dentro de nuestra aplicación.

170
00:14:06,319 --> 00:14:13,326
El AccessToken, por supuesto, es suministrado al servidor por el usuario.

171
00:14:13,326 --> 00:14:20,870
Por lo tanto, una vez que intentamos encontrar al menos un usuario con un ID de perfil de Facebook.

172
00:14:20,870 --> 00:14:26,200
Así que si este usuario existe entonces ya hemos encontrado que el usuario ha

173
00:14:26,200 --> 00:14:30,550
iniciado sesión previamente en nuestra cuenta usando el enfoque de Facebook.

174
00:14:30,550 --> 00:14:37,078
Por lo tanto, en este caso podemos seguir adelante de lo contrario crearemos un nuevo usuario.

175
00:14:37,078 --> 00:14:42,416
Entonces, la función de devolución de llamada aquí tendrá dos parámetros,

176
00:14:42,416 --> 00:14:44,557
el error y el usuario aquí.

177
00:14:49,621 --> 00:14:55,298
Y esta función de devolución de llamada como veremos,

178
00:14:55,298 --> 00:15:01,800
dentro de aquí vamos a comprobar si (err).

179
00:15:01,800 --> 00:15:07,072
Entonces, si esto causa un error, entonces, por supuesto,

180
00:15:07,072 --> 00:15:13,408
lo que tenemos que hacer es devolver hecho (err, false).

181
00:15:15,694 --> 00:15:20,663
Así que esto hecho como puede ver es la función de devolución de llamada que viene como

182
00:15:20,663 --> 00:15:23,577
el parámetro de esta función aquí, por lo que

183
00:15:23,577 --> 00:15:26,770
llamaremos al hecho con el error y falso.

184
00:15:26,770 --> 00:15:31,830
Si no es un error, entonces

185
00:15:31,830 --> 00:15:36,384
diremos si (! err

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

187
00:15:43,170 --> 00:15:47,880
Entonces, si el usuario no es nulo, por lo que significa que hemos encontrado un usuario en el sistema

188
00:15:47,880 --> 00:15:52,610
que no ha estado antes con ese FacebookID en particular, entonces para el usuario,

189
00:15:52,610 --> 00:15:59,750
todo lo que tenemos que hacer es devolver hecho (null,) ya que

190
00:15:59,750 --> 00:16:05,100
no hay error aquí, y luego devolveremos el valor de usuario para esto aquí abajo.

191
00:16:05,100 --> 00:16:08,560
Entonces, lo que significa que si el usuario ya ha iniciado sesión anteriormente usando

192
00:16:08,560 --> 00:16:13,350
el enfoque de Facebook, entonces el usuario ya habría sido creado.

193
00:16:13,350 --> 00:16:17,730
Y así, ese usuario será encontrado y luego simplemente pasamos de vuelta a ese usuario.

194
00:16:17,730 --> 00:16:25,010
Si no, vea la parte si no es la parte más interesante de este ejercicio.

195
00:16:25,010 --> 00:16:30,290
Si el usuario no existe, entonces necesitamos crear un nuevo usuario.

196
00:16:30,290 --> 00:16:33,959
Ahora para crear el nuevo usuario, diremos usuario,

197
00:16:38,653 --> 00:16:42,181
= nuevo usuario, y cuando creemos un nuevo usuario,

198
00:16:42,181 --> 00:16:45,832
recuerde que tenemos que pasar el nombre de usuario.

199
00:16:45,832 --> 00:16:50,970
El nombre de usuario se obtendría del perfil, y el perfil de Facebook que

200
00:16:50,970 --> 00:16:57,200
ha devuelto tendrá un campo llamado como DisplayName.

201
00:16:57,200 --> 00:17:02,050
Y ese es el campo que voy a usar para crear un nuevo usuario aquí.

202
00:17:02,050 --> 00:17:07,176
Así que crearemos un nuevo usuario con el nombre de usuario establecido

203
00:17:07,176 --> 00:17:13,455
igual al DisplayName, y después de crear el usuario,

204
00:17:13,455 --> 00:17:21,874
entonces diremos User.facebookID, = profile.id

205
00:17:21,874 --> 00:17:24,654
Así que vamos a guardar el ID de Facebook del usuario.

206
00:17:24,654 --> 00:17:28,902
Así que regrese este objeto de perfil aquí y

207
00:17:28,902 --> 00:17:33,979
luego ponga el ID de Facebook del usuario en el ID de perfil.

208
00:17:33,979 --> 00:17:38,204
Para que posteriormente, si el mismo usuario inicia sesión,

209
00:17:38,204 --> 00:17:43,265
esta búsqueda será capaz de encontrar a este usuario en nuestra base de datos.

210
00:17:43,265 --> 00:17:46,450
Y luego

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

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

213
00:17:58,857 --> 00:18:02,447
Así que el perfil tiene este objeto nombre en él,

214
00:18:02,447 --> 00:18:07,970
que tiene un nombre dado y un nombre de familia asociado con esto.

215
00:18:07,970 --> 00:18:10,994
Esto se devuelve desde el perfil de Facebook del usuario.

216
00:18:10,994 --> 00:18:16,165
Y también el user.lastname

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

218
00:18:22,762 --> 00:18:28,232
Y luego, una vez que hayamos configurado todos estos diremos user.save.

219
00:18:28,232 --> 00:18:31,310
Así que estamos guardando los cambios en el usuario y

220
00:18:31,310 --> 00:18:35,270
luego esto devolverá err y el usuario.

221
00:18:35,270 --> 00:18:39,090
Por lo tanto, devolverá un error si el usuario no se pudo crear, de

222
00:18:39,090 --> 00:18:42,960
lo contrario devolverá el usuario creado aquí.

223
00:18:42,960 --> 00:18:47,240
Entonces, en este caso diremos, si (err),

224
00:18:47,240 --> 00:18:51,745
entonces

225
00:18:51,745 --> 00:18:58,627
devolveremos hecho (err, false) porque no logramos crear el usuario. de

226
00:18:58,627 --> 00:19:03,824
lo contrario, el usuario se creó correctamente,

227
00:19:03,824 --> 00:19:08,615
por lo que devolveremos hecho (nulo, usuario).

228
00:19:08,615 --> 00:19:11,265
Entonces, no importa cuál sea el caso,

229
00:19:11,265 --> 00:19:15,965
si el usuario existe, entonces encontrará ese usuario y devolverá el valor.

230
00:19:15,965 --> 00:19:19,824
Si el usuario no existe, va a crear un nuevo usuario basado en

231
00:19:19,824 --> 00:19:22,431
el perfil de Facebook del usuario que hemos obtenido.

232
00:19:22,431 --> 00:19:28,772
Y luego agregue el nuevo usuario a nuestro sitio de servidor, a la base de datos.

233
00:19:28,772 --> 00:19:32,642
Así que esta es la estrategia que configuramos para

234
00:19:32,642 --> 00:19:37,532
nuestro pasaporte, la nueva FacebookTokenStrategy.

235
00:19:37,532 --> 00:19:40,552
Así que esto nos permitirá encontrar al usuario.

236
00:19:40,552 --> 00:19:45,571
Así que ahora que hemos configurado nuestra aplicación para

237
00:19:45,571 --> 00:19:50,499
crear un usuario o encontrar el usuario basado en el ID de Facebook.

238
00:19:50,499 --> 00:19:55,752
El último paso es, por supuesto, introducir

239
00:19:55,752 --> 00:20:00,851
una nueva ruta en el archivo users.js.

240
00:20:00,851 --> 00:20:05,284
Así que en el archivo users.js recordarás que teníamos la ruta de registro que

241
00:20:05,284 --> 00:20:09,950
permite al usuario registrarse en una cuenta local con el nombre de usuario y la contraseña.

242
00:20:09,950 --> 00:20:15,137
Y luego tiene el inicio de sesión que permite al usuario iniciar sesión usando el nombre de usuario y la

243
00:20:15,137 --> 00:20:15,730
contraseña.

244
00:20:15,730 --> 00:20:19,455
Pero ahora, vamos a usar Facebook para iniciar sesión en el usuario.

245
00:20:19,455 --> 00:20:25,601
Entonces, en este caso diremos, router.get,

246
00:20:25,601 --> 00:20:32,208
y el punto final será /facebook/token.

247
00:20:32,208 --> 00:20:37,260
Entonces, si el usuario envía una solicitud get a usuarios/facebook/token,

248
00:20:37,260 --> 00:20:41,550
entonces vamos a autenticar al usuario usando

249
00:20:41,550 --> 00:20:45,585
la autenticación basada en Facebook OAuth 2.

250
00:20:45,585 --> 00:20:50,470
Así que aquí, diremos passport.authenticate, y

251
00:20:50,470 --> 00:20:57,555
vamos a autenticar usando la estrategia facebook-token.

252
00:20:57,555 --> 00:21:04,076
Recordemos que ya habíamos configurado esto en nuestro archivo authenticate.js,

253
00:21:04,076 --> 00:21:10,908
así que configuraremos la estrategia de autenticar el pasaporte facebook-token y

254
00:21:10,908 --> 00:21:15,786
luego esa función de devolución de llamada que obtiene req, res aquí.

255
00:21:23,390 --> 00:21:30,081
Así que déjame, Alternar el ajuste de la palabra aquí,

256
00:21:30,081 --> 00:21:36,356
para que pueda ver que este es el router.get en este extremo aquí.

257
00:21:36,356 --> 00:21:44,890
Y luego aquí, configuraré esta aplicación.

258
00:21:44,890 --> 00:21:51,768
Entonces, en este punto, diríamos, si (req.user), ahora notamos que cuando llamamos a

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

260
00:21:57,168 --> 00:21:59,055
Esto, si tiene éxito,

261
00:21:59,055 --> 00:22:03,010
se habría cargado en el usuario en el objeto de solicitud.

262
00:22:03,010 --> 00:22:08,387
Entonces, cuando lleguemos a este punto aquí después de que se

263
00:22:08,387 --> 00:22:11,596
ejecute el software intermedio passport.authenticate facebook-token,

264
00:22:11,596 --> 00:22:16,291
tendría al usuario ya cargado en el objeto de solicitud.

265
00:22:16,291 --> 00:22:23,070
Así que si este es el caso, entonces, diremos, vamos a crear un token.

266
00:22:23,070 --> 00:22:27,709
Crearemos un token web JSON aquí, al igual que la forma en que

267
00:22:27,709 --> 00:22:32,371
creamos el token web JSON cuando el usuario inició sesión aquí.

268
00:22:32,371 --> 00:22:35,275
Por lo tanto, vamos a copiar eso aquí.

269
00:22:38,010 --> 00:22:41,586
Authenticate.getToken, por lo que esto nos dará el token web JSON.

270
00:22:41,586 --> 00:22:46,656
Por lo tanto, esencialmente, el usuario está enviando el token de acceso al

271
00:22:46,656 --> 00:22:50,634
servidor express, el servidor express usa el AccessToken para ir a Facebook y

272
00:22:50,634 --> 00:22:52,979
luego buscar el perfil del usuario.

273
00:22:52,979 --> 00:22:57,560
Y si el usuario no existe, crearemos un nuevo usuario con ese ID de Facebook.

274
00:22:57,560 --> 00:23:02,486
Y luego, después de eso, nuestro servidor express generará

275
00:23:02,486 --> 00:23:07,818
un token web JSON y luego devolverá el token web JSON a nuestro cliente.

276
00:23:07,818 --> 00:23:13,878
Todos los accesos posteriores de nuestro usuario tendrán que incluir este

277
00:23:13,878 --> 00:23:19,317
token web JSON que acabamos de devolver utilizando este enfoque.

278
00:23:19,317 --> 00:23:24,280
Así que en este punto ya no necesita el token de acceso de Facebook.

279
00:23:24,280 --> 00:23:29,287
Puede descartar el token de acceso de Facebook en este punto porque

280
00:23:29,287 --> 00:23:35,237
el token web JSON es el que mantiene activa la autenticación de los usuarios

281
00:23:35,237 --> 00:23:39,602
durante cualquier tiempo que este token web JSON esté activo.

282
00:23:39,602 --> 00:23:45,529
Ahora, además de esto, por supuesto, también tenemos que hacer estos pasos aquí.

283
00:23:45,529 --> 00:23:48,365
Así que voy a copiar esa parte aquí.

284
00:23:48,365 --> 00:23:53,336
porque voy a hacer exactamente lo mismo en este caso también,

285
00:23:53,336 --> 00:23:56,284
por lo que vamos a pegar en ese código aquí.

286
00:23:56,284 --> 00:24:00,485
Entonces diremos StatusCode = 200, tipo de encabezado de contenido, y

287
00:24:00,485 --> 00:24:06,120
luego diremos res.json que has iniciado sesión con éxito, y eso es todo.

288
00:24:06,120 --> 00:24:13,521
Entonces, con este enfoque, como puede ver, ahora usando una llamada a este punto final.

289
00:24:13,521 --> 00:24:17,498
La aplicación de usuario, el cliente en este caso,

290
00:24:17,498 --> 00:24:24,320
pasará el token de acceso de Facebook que acaba de obtener de Facebook.

291
00:24:24,320 --> 00:24:27,970
Y luego nuestro servidor express usará el token de acceso de Facebook para

292
00:24:27,970 --> 00:24:30,380
verificar al usuario en Facebook.

293
00:24:30,380 --> 00:24:35,580
Y luego, si Facebook reconoce que el usuario es un usuario legítimo,

294
00:24:35,580 --> 00:24:42,110
entonces nuestro servidor express devolverá un token JSON Wed a nuestro cliente.

295
00:24:42,110 --> 00:24:44,920
Y luego nuestro cliente se autentica y

296
00:24:44,920 --> 00:24:48,650
luego puede continuar con la realización de las otras operaciones

297
00:24:48,650 --> 00:24:53,460
usando el token JSON wed en el encabezado de todos los mensajes de solicitud.

298
00:24:53,460 --> 00:25:00,190
Posteriormente, al igual que hicimos con la estrategia de autenticación local, eso es todo.

299
00:25:00,190 --> 00:25:07,630
Así que hemos completado todas las actualizaciones de nuestra aplicación, vamos a guardar los cambios.

300
00:25:08,810 --> 00:25:14,940
Ir a nuestro terminal, vamos a poner en marcha el servidor aquí,

301
00:25:14,940 --> 00:25:19,710
así que vamos a decir npm start, y el servidor está en funcionamiento.

302
00:25:20,740 --> 00:25:26,320
Y noté que había escrito en el puerto P-A-S-S-S,

303
00:25:26,320 --> 00:25:28,790
y esto causó un error aquí.

304
00:25:28,790 --> 00:25:32,250
Así que note que lo fácil que es cometer errores.

305
00:25:32,250 --> 00:25:35,439
Así que déjame ir y corregir eso y luego volver y reiniciar mi servidor.

306
00:25:37,080 --> 00:25:40,280
Por lo tanto, cuando encuentre errores como estos, no entre en pánico.

307
00:25:40,280 --> 00:25:43,470
Mire a su alrededor para ver dónde está el problema y muy a menudo,

308
00:25:43,470 --> 00:25:47,580
será un problema simple como este que causará errores para usted.

309
00:25:48,970 --> 00:25:54,160
De nuevo, volviendo al users.js y

310
00:25:54,160 --> 00:25:57,930
ves que en el archivo authenticate.js,

311
00:25:57,930 --> 00:26:02,270
he configurado este puerto que dice P-A-S-S-S.

312
00:26:02,270 --> 00:26:06,100
Entonces, en el archivo authenticate.js, déjame arreglar eso a passsport y

313
00:26:06,100 --> 00:26:08,702
luego guardar los cambios y luego reiniciar mi servidor.

314
00:26:09,770 --> 00:26:16,340
Ahora, reiniciando mi servidor, Así que mi servidor está ahora en funcionamiento.

315
00:26:17,400 --> 00:26:20,160
En este punto, vaya a un navegador.

316
00:26:20,160 --> 00:26:26,212
Y en el navegador, escriba https://localhost3443.

317
00:26:29,625 --> 00:26:37,350
Si tiene esta página almacenada en caché aquí, es posible que desee eliminar la caché.

318
00:26:37,350 --> 00:26:41,417
O simplemente escriba localhost: 3343/index.html, y

319
00:26:41,417 --> 00:26:45,829
luego inmediatamente notará que en este index.html,

320
00:26:45,829 --> 00:26:49,640
verá este botón llamado botón Iniciar sesión.

321
00:26:49,640 --> 00:26:54,280
Así que vamos a hacer clic en este botón de inicio de sesión para iniciar sesión en Facebook.

322
00:26:54,280 --> 00:26:59,880
Vamos a iniciar sesión y luego se le ocurrirá este mensaje aquí.

323
00:26:59,880 --> 00:27:03,365
Lo cual si ya has iniciado sesión en Facebook

324
00:27:03,365 --> 00:27:07,840
antes, te pedirá permiso para continuar como usuario.

325
00:27:07,840 --> 00:27:12,440
Si no, entonces te pedirá que inicies sesión en Facebook con y

326
00:27:12,440 --> 00:27:14,030
luego te permitirá continuar.

327
00:27:14,030 --> 00:27:17,000
Desde que acababa de iniciar sesión en Facebook un poco antes, así que

328
00:27:17,000 --> 00:27:19,020
puedo simplemente hacer clic en Continuar.

329
00:27:19,020 --> 00:27:24,955
Ahora, abra la consola JavaScript de desarrolladores en la parte inferior aquí.

330
00:27:24,955 --> 00:27:31,810
Y en la consola de JavaScript, ves un montón de mensajes impresos aquí.

331
00:27:31,810 --> 00:27:33,070
Y luego, en particular,

332
00:27:33,070 --> 00:27:37,720
abra este objeto que verá en la consola de JavaScript.

333
00:27:37,720 --> 00:27:43,081
Y dentro de este objeto, verá esta respuesta alt aquí.

334
00:27:43,081 --> 00:27:49,370
Y ahí dentro, verá una herramienta de acceso presente allí.

335
00:27:49,370 --> 00:27:55,320
Ahora, esta es una respuesta que se obtiene de Facebook o

336
00:27:55,320 --> 00:28:00,610
al servidor de autenticación por nuestra aplicación aquí.

337
00:28:00,610 --> 00:28:03,060
Y simplemente voy a copiar esto,

338
00:28:03,060 --> 00:28:07,010
porque este es el token de acceso que Facebook nos ha proporcionado.

339
00:28:07,010 --> 00:28:13,710
Ahora, necesito dar este token de acceso a mi servidor express

340
00:28:13,710 --> 00:28:19,990
para que vaya y verifique mi perfil, y luego me permita iniciar sesión en esa aplicación.

341
00:28:19,990 --> 00:28:22,860
Así que estoy haciendo esto de una manera apretada

342
00:28:22,860 --> 00:28:27,560
aquí simplemente porque quería mostrarte cómo entra el token de acceso aquí.

343
00:28:27,560 --> 00:28:30,940
Y copiamos el token de acceso, luego tomaré esto y

344
00:28:30,940 --> 00:28:36,820
usaré Postman para enviar este token de acceso a mi servidor Express.

345
00:28:36,820 --> 00:28:42,330
Ahora, cuando diseña una aplicación web como Angular, o

346
00:28:42,330 --> 00:28:48,840
la aplicación Ionic, o la aplicación NativeScript, no necesita realizar todos estos pasos.

347
00:28:48,840 --> 00:28:53,634
Ahora, básicamente cuando el token de acceso se devuelve a su aplicación web,

348
00:28:53,634 --> 00:28:58,086
la aplicación Angular o la aplicación Ionic, o la aplicación

349
00:28:58,086 --> 00:29:01,868
NativeScript, simplemente capturará este token de acceso allí.

350
00:29:01,868 --> 00:29:06,791
Y luego pasará este token de acceso al

351
00:29:06,791 --> 00:29:12,770
servidor Express usando XMLHttpRequest para obtener la información.

352
00:29:12,770 --> 00:29:16,410
Pero ya que quería ilustrar manualmente los pasos.

353
00:29:16,410 --> 00:29:21,319
Entonces, configuré este index.html con un

354
00:29:21,319 --> 00:29:24,640
código JavaScript simple que Facebook me proporciona.

355
00:29:26,420 --> 00:29:30,792
Para poder recuperar este token de autorización que obtuvimos de

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

357
00:29:31,454 --> 00:29:34,662
Así que permítanme copiar este token de autorización.

358
00:29:34,662 --> 00:29:39,110
Ahora, iremos a Postman, y luego intentaremos

359
00:29:39,110 --> 00:29:45,340
ver cómo podemos obtener el token web JSON de nuestro servidor Express.

360
00:29:45,340 --> 00:29:49,220
Ahora, yendo a Postman, desde Postman,

361
00:29:49,220 --> 00:29:54,525
permítanme ahora hacer una solicitud GET a

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

363
00:30:03,195 --> 00:30:07,855
Y cuando envío esta solicitud a ese punto,

364
00:30:07,855 --> 00:30:13,115
la otra configuración que necesito hacer aquí es que,

365
00:30:13,115 --> 00:30:18,080
necesito pasar este token de acceso que acabo de obtener.

366
00:30:18,080 --> 00:30:21,970
Ahora, para pasar un token de acceso en el encabezado,

367
00:30:21,970 --> 00:30:26,370
puedo pasarlo como un encabezado de autorización escribiendo autorización.

368
00:30:26,370 --> 00:30:33,660
Pero tenga en cuenta que el valor debe escribirse como Beta con una B mayúscula en este caso,

369
00:30:33,660 --> 00:30:41,350
y luego pegue ese token de acceso que obtuvimos de Facebook aquí.

370
00:30:41,350 --> 00:30:44,840
Tenga en cuenta la B mayúscula aquí, y

371
00:30:44,840 --> 00:30:48,990
luego puede pasar esto a nuestro servidor.

372
00:30:50,090 --> 00:30:53,970
Y luego, tras la respuesta de nuestro servidor,

373
00:30:53,970 --> 00:30:59,810
vería que habría obtenido el token web JSON de nuestro sitio de servidor.

374
00:30:59,810 --> 00:31:05,472
Entonces, esta es una forma de obtener el token web JSON intercambiando su

375
00:31:05,472 --> 00:31:10,000
token de acceso de Facebook que acaba de obtener con su servidor Express.

376
00:31:10,000 --> 00:31:16,330
Y su servidor Express a su vez irá y

377
00:31:16,330 --> 00:31:19,960
obtendrá su información de perfil de Facebook, y

378
00:31:19,960 --> 00:31:23,720
luego creará una cuenta específicamente para usted, y

379
00:31:23,720 --> 00:31:28,260
luego le devolverá el token web JSON si todo tiene éxito.

380
00:31:28,260 --> 00:31:33,290
Otra forma de pasar esta información es en el encabezado,

381
00:31:33,290 --> 00:31:40,480
escriba access_token como la clave.

382
00:31:40,480 --> 00:31:46,268
Y en el valor, solo escribe el

383
00:31:46,268 --> 00:31:52,020
token de acceso como este aquí, y luego puedes enviar la solicitud Y lo mismo.

384
00:31:52,020 --> 00:31:55,878
Volverá a devolver el token web JSON por usted.

385
00:31:55,878 --> 00:31:59,410
Y luego capturaría el token web JSON y luego continuaría con el resto

386
00:31:59,410 --> 00:32:05,300
de los accesos a su servidor express usando este token web JSON.

387
00:32:05,300 --> 00:32:10,010
Un tercer enfoque es incluir esto en

388
00:32:10,010 --> 00:32:15,410
su propia URL como parámetro de consulta.

389
00:32:15,410 --> 00:32:23,827
El tercer enfoque es decir token? access_token= y

390
00:32:23,827 --> 00:32:32,290
luego pegue el token web JSON en ese parámetro de consulta.

391
00:32:32,290 --> 00:32:37,140
No use las comillas aquí, solo el token web JSON en sí.

392
00:32:37,140 --> 00:32:40,810
Y luego envíe la solicitud a su servidor.

393
00:32:40,810 --> 00:32:47,680
Y luego, incluso entonces, su servidor devolverá el token web JSON correspondiente.

394
00:32:47,680 --> 00:32:52,450
Así que ve tres maneras diferentes que puede analizar en su token de acceso de Facebook a

395
00:32:52,450 --> 00:32:57,350
su servidor y luego obtener el token web JSON de su servidor.

396
00:32:57,350 --> 00:33:01,660
Y después de esto, el resto de estos pasos proceden igual que antes.

397
00:33:02,970 --> 00:33:09,400
Ahora para convencerte de que en realidad se ha creado una nueva cuenta con el

398
00:33:09,400 --> 00:33:13,720
perfil de Facebook para este usuario en particular, vamos a la terminal.

399
00:33:15,080 --> 00:33:20,240
En la terminal, en una nueva ventana de terminal, comenzaré la ondulación mongo aquí.

400
00:33:20,240 --> 00:33:25,050
Así que en la ondulación mongo, déjame decir, usa confusión.

401
00:33:25,050 --> 00:33:31,560
Y luego diré, db.users.find () .pretty (),

402
00:33:31,560 --> 00:33:36,570
y luego imprimiré todos los usuarios que están registrados en mi sistema.

403
00:33:36,570 --> 00:33:40,540
Usted nota que los tres usuarios que habíamos configurado en los ejercicios anteriores

404
00:33:40,540 --> 00:33:41,410
están todos allí.

405
00:33:43,350 --> 00:33:48,130
Observe además un cuarto usuario que acaba de ser agregado en.

406
00:33:48,130 --> 00:33:53,580
Y tenga en cuenta que para este usuario en particular, aún no tenemos el hash en la fuente,

407
00:33:53,580 --> 00:33:57,650
sino que el FacebookID de ese usuario está configurado, y

408
00:33:57,650 --> 00:34:02,660
el nombre de usuario está configurado para ser ese valor, y el nombre de usuario está configurado allí.

409
00:34:02,660 --> 00:34:05,580
Y también el apellido debería haberse configurado aquí, pero

410
00:34:05,580 --> 00:34:08,990
creo que hay un pequeño error en mi código.

411
00:34:08,990 --> 00:34:16,910
Así que iré y comprobaré la parte de apellido de ella allí.

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

413
00:34:20,110 --> 00:34:23,130
Déjame ver si cometí un error aquí.

414
00:34:23,130 --> 00:34:24,580
Ahí vamos.

415
00:34:24,580 --> 00:34:28,340
Escribí en F-A-M-I-L-Y Nombre.

416
00:34:28,340 --> 00:34:31,980
Ya ves, ni siquiera yo estoy cometiendo errores.

417
00:34:31,980 --> 00:34:36,277
Entonces esto debería ser FamilyName aquí,

418
00:34:36,277 --> 00:34:42,730
user.lastname profile.Name.FamilyName aquí.

419
00:34:42,730 --> 00:34:46,520
Así que permítanme guardar los cambios, y ahora el código debería funcionar correctamente.

420
00:34:47,710 --> 00:34:49,950
De nuevo volviendo a la terminal,

421
00:34:49,950 --> 00:34:54,460
ahora ves que se ha creado un nuevo usuario con el perfil de Facebook aquí.

422
00:34:54,460 --> 00:34:59,130
Ahora, cualquier vez posterior que intenté autenticarme usando Facebook

423
00:34:59,130 --> 00:35:00,520
es el mismo proceso.

424
00:35:00,520 --> 00:35:03,000
Obtuve el token de acceso de Facebook y

425
00:35:03,000 --> 00:35:06,160
luego analizé el token de acceso a mi servidor express.

426
00:35:06,160 --> 00:35:10,790
Mi servidor express irá a Facebook, buscará el perfil y

427
00:35:10,790 --> 00:35:14,020
luego comprobará si el usuario ya existe.

428
00:35:14,020 --> 00:35:18,660
Y en el inicio de sesión posterior que hago usando Facebook,

429
00:35:18,660 --> 00:35:22,460
me gustaría encontrar que este usuario en particular ya existe en el sistema. Por

430
00:35:22,460 --> 00:35:26,540
lo tanto, simplemente continuará hacia adelante y el usuario será autenticado y

431
00:35:26,540 --> 00:35:31,730
luego el servidor adicional emitirá un token web JSON a su

432
00:35:31,730 --> 00:35:37,385
cliente y podemos continuar desde ese punto en adelante como antes.

433
00:35:37,385 --> 00:35:42,395
Así que verá, configurar la autenticación basada en OAuth 2 usando un

434
00:35:42,395 --> 00:35:48,123
proveedor de servicios OAuth 2 como Facebook no es tan difícil siempre que tengamos el

435
00:35:48,123 --> 00:35:54,135
módulo basado en la estrategia de autenticación de Facebook pasaporte apropiado.

436
00:35:54,135 --> 00:35:59,060
Al igual que el token de Facebook pasaporte que ya se ocupa de gran parte

437
00:35:59,060 --> 00:36:04,253
del trabajo en nuestro nombre y luego nos permite configurar nuestro servidor express

438
00:36:04,253 --> 00:36:09,750
para manejar la autenticación de terceros basada en OAuth 2 de Facebook.

439
00:36:09,750 --> 00:36:12,730
Con esto, completamos este ejercicio.

440
00:36:12,730 --> 00:36:16,490
En este ejercicio, hemos aprendido cómo hacer toda la autenticación OAuth 2

441
00:36:16,490 --> 00:36:20,590
usando Facebook como la autenticación OAuth 2 proporcionada.

442
00:36:20,590 --> 00:36:25,263
Este es un buen momento para guardar los cambios que has hecho en

443
00:36:25,263 --> 00:36:29,521
tu repositorio de Git con el pasaporte de mensajes Facebook.

444
00:36:29,521 --> 00:36:35,380
[ MÚSICA]