1
00:00:00,000 --> 00:00:04,557
[МУЗЫКА]

2
00:00:04,557 --> 00:00:10,906
Теперь, когда мы поняли о OAuth 2 и о том, как Facebook поддерживает OAuth 2,

3
00:00:10,906 --> 00:00:16,870
давайте перейдем к этому упражнению, где мы настроим наше

4
00:00:16,870 --> 00:00:23,460
приложение экспресс-сервера, чтобы использовать Facebook в качестве поставщика OAuth 2 для нашего сервера.

5
00:00:23,460 --> 00:00:26,820
И в то же время для нашего клиентского приложения.

6
00:00:26,820 --> 00:00:30,500
В этом упражнении мы будем полагаться на паспорт, который

7
00:00:30,500 --> 00:00:34,730
мы уже настроили в нашем экспресс-приложении.

8
00:00:34,730 --> 00:00:39,890
Мы настроим новую стратегию аутентификации с

9
00:00:39,890 --> 00:00:43,600
помощью Facebook, используя этот модуль токенов Facebook.

10
00:00:45,680 --> 00:00:51,629
Чтобы начать работу с этим упражнением,

11
00:00:51,629 --> 00:01:01,590
перейдите на страницу https//developers.facebook.com/apps.

12
00:01:01,590 --> 00:01:07,640
Теперь, здесь вы будете регистрировать клиентское приложение, которое в основном

13
00:01:07,640 --> 00:01:13,280
ваш сервер, дополнительный сервер, выступающий в качестве клиентского приложения для Facebook.

14
00:01:13,280 --> 00:01:16,380
И тогда мы зарегистрируем там клиентское приложение.

15
00:01:16,380 --> 00:01:21,250
А затем получить идентификатор приложения и секрет приложения от Facebook.

16
00:01:21,250 --> 00:01:24,950
Теперь, очевидно, это само собой разумеется, что вам нужно иметь учетную запись Facebook

17
00:01:24,950 --> 00:01:27,160
, чтобы иметь возможность настроить это.

18
00:01:27,160 --> 00:01:32,520
Если у вас нет учетной записи Facebook и вы не хотите делать это упражнение,

19
00:01:32,520 --> 00:01:36,220
то нет никакого вреда в том, чтобы не делать это упражнение.

20
00:01:36,220 --> 00:01:39,110
Но, конечно, для выполнения этого упражнения OAuth 2

21
00:01:39,110 --> 00:01:45,210
вам нужна учетная запись Facebook для настройки вашего поставщика OAuth на Facebook.

22
00:01:45,210 --> 00:01:47,390
Таким образом, перейдя на этот сайт,

23
00:01:47,390 --> 00:01:52,510
Developers.facebook.com/apps, вы заметите, что вам

24
00:01:52,510 --> 00:01:57,970
нужно будет войти в систему, чтобы продолжить, если вы не вошли в свой браузер.

25
00:01:57,970 --> 00:02:01,790
Теперь вы можете видеть, что я уже настроил несколько приложений здесь и

26
00:02:01,790 --> 00:02:03,170
протестировал их.

27
00:02:03,170 --> 00:02:07,990
Теперь, чтобы создать новое приложение, нажмите на Добавить новое приложение.

28
00:02:07,990 --> 00:02:13,140
А затем вы можете указать имя своего приложения.

29
00:02:13,140 --> 00:02:20,990
Так что я могу сказать Confusion3, а затем мы можем предоставить контактный адрес электронной почты.

30
00:02:20,990 --> 00:02:26,336
А затем следуйте процедуре, чтобы создать новое приложение здесь.

31
00:02:36,108 --> 00:02:40,925
И как только приложение будет создано, вы сразу заметите, что

32
00:02:40,925 --> 00:02:45,290
есть идентификатор приложения, который был создан для вашего приложения.

33
00:02:45,290 --> 00:02:47,180
А затем для этого конкретного приложения.

34
00:02:47,180 --> 00:02:50,680
Поэтому, если вы идете на панель мониторинга, вы увидите

35
00:02:51,840 --> 00:02:56,640
две части информации, которые вам действительно нужны, чтобы продолжить работу.

36
00:02:56,640 --> 00:03:01,850
Одним из них является идентификатор приложения, поэтому убедитесь, что вы делаете копию идентификатора приложения.

37
00:03:01,850 --> 00:03:03,810
А второй - это секрет приложения.

38
00:03:03,810 --> 00:03:10,320
Таким образом, вы можете ввести кнопку show здесь, а затем вы получите секрет приложения.

39
00:03:10,320 --> 00:03:14,350
Секрет здесь, так как вы можете видеть, что эти два - это не что иное, как строки ASCII.

40
00:03:14,350 --> 00:03:18,980
Поэтому сделайте копию этого, потому что вам нужно настроить свой экспертный сервер, а

41
00:03:18,980 --> 00:03:23,200
также клиентское приложение с этими двумя фрагментами информации.

42
00:03:23,200 --> 00:03:25,870
И как только ты получишь это,

43
00:03:25,870 --> 00:03:29,105
мы сможем продолжить остальную часть упражнения.

44
00:03:29,105 --> 00:03:33,500
Вам нужно будет перейти на панель мониторинга вашего приложения.

45
00:03:33,500 --> 00:03:38,890
А в настройках, как вы видите, в основных настройках здесь

46
00:03:38,890 --> 00:03:43,310
просто добавляете платформу сайта здесь.

47
00:03:43,310 --> 00:03:52,650
А затем укажите URL-адрес как https//localhost3443.

48
00:03:52,650 --> 00:03:58,168
И сохраните изменения здесь в вашем приложении здесь.

49
00:03:58,168 --> 00:04:03,910
После добавления на сайт здесь перейдите к дополнительным настройкам.

50
00:04:03,910 --> 00:04:09,000
А затем нажмите «Да», чтобы сказать родное или

51
00:04:09,000 --> 00:04:14,400
настольное приложение здесь и сказать «да», а затем сохранить изменения.

52
00:04:15,590 --> 00:04:20,461
А в базовом параметре в доменах приложения введите

53
00:04:20,461 --> 00:04:28,339
https://localhost:3443 и сохраните изменения.

54
00:04:29,640 --> 00:04:33,520
Далее перейдите к инструкциям по упражнению для этого упражнения.

55
00:04:33,520 --> 00:04:36,580
И вы увидите, что есть файл index.html, который

56
00:04:36,580 --> 00:04:39,540
я предоставил в ресурсах упражнений.

57
00:04:39,540 --> 00:04:47,270
Загрузите этот файл index.html, а затем переместите его в общую папку.

58
00:04:47,270 --> 00:04:49,941
Итак, давайте загрузите этот файл index.html.

59
00:04:57,932 --> 00:05:05,548
Затем, перейдя в папку ConfusionServer в общей папке,

60
00:05:05,548 --> 00:05:11,125
вы видите, что у меня уже есть файл index.html.

61
00:05:11,125 --> 00:05:16,039
Я собираюсь заменить это на загруженный файл index.html

62
00:05:16,039 --> 00:05:17,774
, который я только что получил.

63
00:05:17,774 --> 00:05:20,502
Я сохранил это на своем рабочем столе.

64
00:05:20,502 --> 00:05:23,173
Поэтому я просто собираюсь вытащить этот index.html, а

65
00:05:23,173 --> 00:05:27,771
затем заменить файл index.html в общей папке моего ConfusionServer.

66
00:05:27,771 --> 00:05:31,227
Далее, перейдя в редактор, давайте откроем файл index.html.

67
00:05:31,227 --> 00:05:34,584
И если вы откроете его, вы увидите, что я уже настроил

68
00:05:34,584 --> 00:05:35,112
код JavaScript здесь.

69
00:05:35,112 --> 00:05:39,850
Этот код JavaScript, который я получил от Facebook, где они

70
00:05:39,850 --> 00:05:44,790
указывают, как вы можете настроить приложение Dev, используя это.

71
00:05:44,790 --> 00:05:51,030
Итак, я скопировал это из инструкций Facebook.

72
00:05:51,030 --> 00:05:55,470
В частности, вы заметите, что в этом файле index.html

73
00:05:55,470 --> 00:05:58,735
есть это поле AppID.

74
00:05:58,735 --> 00:06:04,400
Вы собираетесь заменить это поле AppID на

75
00:06:04,400 --> 00:06:09,060
идентификатор клиента, который вы получили, зарегистрировав свое приложение на Facebook.

76
00:06:09,060 --> 00:06:13,130
Итак, здесь я заменяю идентификатор этого клиента

77
00:06:13,130 --> 00:06:18,430
на идентификатор моего приложения, которое я зарегистрировал на Facebook здесь.

78
00:06:18,430 --> 00:06:22,957
И вам нужно сделать тот же шаг с приложением,

79
00:06:22,957 --> 00:06:27,750
которое вы регистрируете на Facebook, с идентификатором приложения, который вы получаете из Facebook.

80
00:06:27,750 --> 00:06:30,812
А затем сохраните изменения в index.html.

81
00:06:30,812 --> 00:06:36,980
Эта страница index.html, которая у меня есть здесь, создаст

82
00:06:36,980 --> 00:06:42,290
кнопку входа на странице index.html, которая при нажатии

83
00:06:42,290 --> 00:06:47,580
поможет нам войти в Facebook, а затем получить токен доступа от Facebook.

84
00:06:48,660 --> 00:06:51,260
Далее, перейдя в папку ConfusionServer,

85
00:06:51,260 --> 00:06:55,280
мы установим модуль токенов паспорта Facebook.

86
00:06:55,280 --> 00:06:58,494
Таким образом, в командной строке введите npm установите

87
00:07:00,200 --> 00:07:05,003
Passport-Facebook-токен и

88
00:07:05,003 --> 00:07:09,730
установите этот модуль узла.

89
00:07:09,730 --> 00:07:17,000
И, как вы можете видеть, я использую версию 3.3.0 в этом курсе.

90
00:07:17,000 --> 00:07:20,446
Возвращаясь к редактору, откройте config.js.

91
00:07:20,446 --> 00:07:25,162
И в config.js я собираюсь добавить

92
00:07:25,162 --> 00:07:34,440
свойство под названием «facebook» в мой файл config.js.

93
00:07:34,440 --> 00:07:39,221
И внутри здесь я

94
00:07:39,221 --> 00:07:44,481
настрою свой ClientiD и

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

96
00:07:48,560 --> 00:07:54,150
Теперь ClientiD будет именно то, что вы получите от Facebook.

97
00:07:54,150 --> 00:08:00,304
Вот и секрет клиента, как вы видели, когда вы зарегистрировали свое заявление.

98
00:08:02,198 --> 00:08:05,221
Вы получаете вторую строку, поэтому скопируйте эту строку, а

99
00:08:05,221 --> 00:08:07,764
затем вставьте ее в ClientSecret здесь.

100
00:08:07,764 --> 00:08:13,790
Теперь убедитесь, что это вставлено как строка здесь.

101
00:08:13,790 --> 00:08:19,090
Аналогичным образом, вставка в ClientSecret в мой файл config.js.

102
00:08:19,090 --> 00:08:26,360
Таким образом, настройка этого здесь поможет мне использовать эти два, где мне нужно в моем коде.

103
00:08:26,360 --> 00:08:29,790
Далее, как мы поняли, всякий раз, когда

104
00:08:32,390 --> 00:08:37,770
пользователь входит в систему, а затем получает токен доступа и передает его на наш экспресс-сервер.

105
00:08:37,770 --> 00:08:41,160
Экспресс сервер будет использовать этот токен доступа и перейти и

106
00:08:41,160 --> 00:08:47,840
получить информацию о файле с сервера Facebook 0 должен.

107
00:08:47,840 --> 00:08:52,380
И затем, как только он получит информацию профиля, то наш экспресс-сервер

108
00:08:52,380 --> 00:08:57,980
создаст новую учетную запись пользователя в нашем приложении.

109
00:08:57,980 --> 00:09:01,750
И используйте идентификатор Facebook в качестве индекса в этой учетной записи.

110
00:09:01,750 --> 00:09:03,630
Поэтому, чтобы учесть это,

111
00:09:03,630 --> 00:09:08,467
мы перейдем в файл user.js, где мы определим нашу модель.

112
00:09:08,467 --> 00:09:12,854
Таким образом, в дополнение к имени и фамилии,

113
00:09:12,854 --> 00:09:17,241
я также добавлю в поле здесь под названием FacebookID,

114
00:09:17,241 --> 00:09:20,510
который имеет тип String здесь.

115
00:09:20,510 --> 00:09:24,548
FacebookID будет хранить идентификатор FacebookID

116
00:09:24,548 --> 00:09:28,700
пользователя, который прошел в токене доступа.

117
00:09:29,760 --> 00:09:34,002
На следующем шаге я покажу вам, как настроить это.

118
00:09:34,002 --> 00:09:40,260
Затем мы настраиваем нашу стратегию Facebook, используя паспорт токен Facebook..

119
00:09:40,260 --> 00:09:43,640
Когда пользователь передает токен доступа,

120
00:09:43,640 --> 00:09:47,230
то вы собираетесь получить профиль, а затем настроить учетную запись для

121
00:09:47,230 --> 00:09:52,160
этого пользователя на нашем локальном сервере здесь, на нашем экспресс-сервере здесь.

122
00:09:52,160 --> 00:09:56,410
Мы будем инициализировать имя и фамилию и FacebookID.

123
00:09:56,410 --> 00:10:01,760
Но, конечно, эта конкретная учетная запись не будет иметь пароля или,

124
00:10:01,760 --> 00:10:04,140
скорее, хэша, установленного с этим.

125
00:10:04,140 --> 00:10:09,150
Потому что, если пользователь делает вход с помощью этой учетной записи, то им придется использовать свою

126
00:10:09,150 --> 00:10:14,400
часть входа в Facebook для того, чтобы войти в наше приложение.

127
00:10:14,400 --> 00:10:18,330
Далее мы перейдем к аутентификации файла dark.js.

128
00:10:18,330 --> 00:10:23,138
Таким образом, здесь мы настраивали все наши различные

129
00:10:23,138 --> 00:10:25,507
стратегии аутентификации паспортов.

130
00:10:25,507 --> 00:10:30,880
Поэтому здесь в дополнение к стратегии jwt и

131
00:10:30,880 --> 00:10:37,175
локальной стратегии, которую я настроил здесь,

132
00:10:37,175 --> 00:10:43,176
позвольте мне создать FacebookTokenStrategy здесь.

133
00:10:43,176 --> 00:10:49,965
А затем установите требуемый пароле-facebook-токен.

134
00:10:52,494 --> 00:10:56,561
И это даст нам новую стратегию, которую мы можем

135
00:10:56,561 --> 00:11:00,530
настроить в нашем паспортном модуле здесь.

136
00:11:00,530 --> 00:11:04,573
Итак, спустившись в код здесь, прямо там,

137
00:11:04,573 --> 00:11:17,055
в конце этого файла, я создаю

138
00:11:17,055 --> 00:11:21,697
FacebookPassport.use ().

139
00:11:21,697 --> 00:11:28,380
И поэтому здесь я бы указал новую FacebookTokenStrategy здесь.

140
00:11:29,610 --> 00:11:33,730
И тогда мы уточним детали этой

141
00:11:33,730 --> 00:11:38,886
FacebookTokenStrategy, прямо в этот момент здесь.

142
00:11:38,886 --> 00:11:45,280
Итак, в этой FacebookTokenStrategy, как мы подходим к этой проблеме?

143
00:11:45,280 --> 00:11:51,910
Позвольте мне просто обернуть слово обернуть, чтобы вы могли увидеть полный код.

144
00:11:51,910 --> 00:11:59,300
Таким образом, для FacebookTokenStrategy, мы начнем, сказав сначала.

145
00:11:59,300 --> 00:12:04,794
Первая часть FacebookTokenStrategy принимает ClientiD.

146
00:12:08,542 --> 00:12:17,406
Который у нас есть конфигурация в Config.Facebook.clientid здесь,

147
00:12:17,406 --> 00:12:22,302
и клиент, Secret,

148
00:12:22,302 --> 00:12:30,340
который также мы настроили в, Наш файл конфигурации здесь.

149
00:12:30,340 --> 00:12:38,235
Таким образом, мы будем поставлять это в качестве первого параметра этой стратегии здесь.

150
00:12:38,235 --> 00:12:43,985
А затем второй параметр - это то, где игнорирование

151
00:12:43,985 --> 00:12:48,145
функции обратного вызова, которая приходит в этот момент.

152
00:12:48,145 --> 00:12:53,015
Таким образом, функция обратного вызова здесь получает три значения.

153
00:12:53,015 --> 00:12:57,100
Таким образом, он получает AccessToken,

154
00:12:59,672 --> 00:13:04,584
RefreshToken, профиль и

155
00:13:04,584 --> 00:13:07,760
обратный вызов, как это сделано здесь.

156
00:13:07,760 --> 00:13:12,047
Таким образом, это четыре параметра, которые приходят в функцию обратного вызова, которую мы будем

157
00:13:12,047 --> 00:13:13,447
настраивать на этом этапе.

158
00:13:13,447 --> 00:13:18,660
Поэтому позвольте мне отстукнуть этот код, чтобы он был немного более понятным.

159
00:13:18,660 --> 00:13:25,592
И внутри этой функции обратного вызова, которую я

160
00:13:25,592 --> 00:13:30,150
настраиваю здесь, я сначала скажу user.findone.

161
00:13:30,150 --> 00:13:35,430
Таким образом, мы попытаемся увидеть, если этот конкретный пользователь Facebook

162
00:13:35,430 --> 00:13:40,470
вошел в систему ранее, чтобы учетная запись уже была

163
00:13:40,470 --> 00:13:46,381
настроена, С FacebookID.

164
00:13:46,381 --> 00:13:49,051
Теперь где мы получим FacebookID?

165
00:13:49,051 --> 00:13:55,160
Обратите внимание, что мы получаем этот профиль для пользователя,

166
00:13:55,160 --> 00:13:59,630
приходя сюда, чтобы вы могли видеть, что этот профиль входит в качестве параметра.

167
00:13:59,630 --> 00:14:04,208
Этот профиль будет нести много информации, поступающей из Facebook, что мы

168
00:14:04,208 --> 00:14:06,319
можем использовать в нашем приложении.

169
00:14:06,319 --> 00:14:13,326
AccessToken, конечно, поставляется на сервер пользователем.

170
00:14:13,326 --> 00:14:20,870
Итак, как только мы попытаемся найти хотя бы одного пользователя с идентификатором профиля Facebook.

171
00:14:20,870 --> 00:14:26,200
Так что если этот пользователь существует, то мы уже обнаружили, что пользователь ранее

172
00:14:26,200 --> 00:14:30,550
вошел в нашу учетную запись, используя подход Facebook.

173
00:14:30,550 --> 00:14:37,078
Таким образом, в этом случае мы можем продолжить, иначе мы создадим нового пользователя.

174
00:14:37,078 --> 00:14:42,416
Таким образом, функция обратного вызова здесь будет иметь два

175
00:14:42,416 --> 00:14:44,557
параметра, err и пользователь здесь.

176
00:14:49,621 --> 00:14:55,298
И эта функция обратного вызова, как мы увидим,

177
00:14:55,298 --> 00:15:01,800
хорошо внутри здесь мы проверим, если (err).

178
00:15:01,800 --> 00:15:07,072
Поэтому, если это вызывает ошибку, то, конечно,

179
00:15:07,072 --> 00:15:13,408
нам нужно сделать возврат (err, false).

180
00:15:15,694 --> 00:15:20,663
Таким образом, это сделано, как вы можете видеть, это функция обратного вызова, которая приходит в качестве

181
00:15:20,663 --> 00:15:23,577
параметра этой функции здесь, поэтому

182
00:15:23,577 --> 00:15:26,770
мы будем вызывать сделано с err и false.

183
00:15:26,770 --> 00:15:31,830
Если это не ошибка, то

184
00:15:31,830 --> 00:15:36,384
мы скажем, если (! err

185
00:15:36,384 --> 00:15:41,950
&& пользователь! == null).

186
00:15:43,170 --> 00:15:47,880
Поэтому, если пользователь не является нулевым, так что это означает, что мы нашли пользователя в системе,

187
00:15:47,880 --> 00:15:52,610
который не был ранее с этим конкретным FacebookID, поэтому для пользователя

188
00:15:52,610 --> 00:15:59,750
все, что нам нужно сделать, это вернуть сделано (null,), так как

189
00:15:59,750 --> 00:16:05,100
здесь нет ошибки, а затем мы вернем значение пользователя для этого здесь.

190
00:16:05,100 --> 00:16:08,560
Таким образом, это означает, что если пользователь уже вошел в систему ранее, используя

191
00:16:08,560 --> 00:16:13,350
подход Facebook, то пользователь уже был бы создан.

192
00:16:13,350 --> 00:16:17,730
Итак, этот пользователь будет найден, а затем мы просто передадим обратно этого пользователя.

193
00:16:17,730 --> 00:16:25,010
Если нет, посмотрите, если не часть является более интересной частью этого упражнения.

194
00:16:25,010 --> 00:16:30,290
Если пользователь не существует, то нам нужно создать нового пользователя.

195
00:16:30,290 --> 00:16:33,959
Теперь, чтобы создать нового пользователя, мы скажем user,

196
00:16:38,653 --> 00:16:42,181
= new User, и когда мы создаем нового пользователя,

197
00:16:42,181 --> 00:16:45,832
напомним, что нам нужно передать имя пользователя.

198
00:16:45,832 --> 00:16:50,970
Имя пользователя будет получено из профиля, а

199
00:16:50,970 --> 00:16:57,200
возвращенный профиль Facebook будет иметь поле, называемое DisplayName.

200
00:16:57,200 --> 00:17:02,050
И это поле, которое я собираюсь использовать для создания нового пользователя здесь.

201
00:17:02,050 --> 00:17:07,176
Таким образом, мы создадим нового пользователя с именем пользователя, установленным

202
00:17:07,176 --> 00:17:13,455
равным DisplayName, и после того, как пользователь

203
00:17:13,455 --> 00:17:21,874
будет создан, то мы скажем user.facebookID, = profile.id.

204
00:17:21,874 --> 00:17:24,654
Таким образом, мы собираемся сохранить идентификатор Facebook пользователя.

205
00:17:24,654 --> 00:17:28,902
Поэтому вернитесь в этот объект профиля здесь, а

206
00:17:28,902 --> 00:17:33,979
затем поместите идентификатор Facebook пользователя в идентификатор профиля.

207
00:17:33,979 --> 00:17:38,204
Так что впоследствии, если тот же пользователь войдет в систему,

208
00:17:38,204 --> 00:17:43,265
этот поиск сможет найти этого пользователя в нашей базе данных.

209
00:17:43,265 --> 00:17:46,450
И тогда мы

210
00:17:46,450 --> 00:17:50,863
скажем user.firstname

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

212
00:17:58,857 --> 00:18:02,447
Таким образом, профиль имеет этот объект имени на нем,

213
00:18:02,447 --> 00:18:07,970
который имеет данное имя и фамилию, связанные с этим.

214
00:18:07,970 --> 00:18:10,994
Это возвращается из профиля пользователя в Facebook.

215
00:18:10,994 --> 00:18:16,165
А также user.lastname мы установим

216
00:18:16,165 --> 00:18:21,026
его в Profile.name.FamilyName.

217
00:18:22,762 --> 00:18:28,232
И затем, как только мы настроим все это, мы скажем user.save.

218
00:18:28,232 --> 00:18:31,310
Таким образом, мы сохраняем изменения для пользователя, а

219
00:18:31,310 --> 00:18:35,270
затем это вернет ошибку и пользователя.

220
00:18:35,270 --> 00:18:39,090
Таким образом, он вернет ошибку, если пользователь не может быть создан,

221
00:18:39,090 --> 00:18:42,960
иначе он вернет созданного пользователя здесь.

222
00:18:42,960 --> 00:18:47,240
Поэтому в этом случае мы скажем, если (err),

223
00:18:47,240 --> 00:18:51,745
то вернем done (err,

224
00:18:51,745 --> 00:18:58,627
false), потому что нам не удалось создать пользователя.

225
00:18:58,627 --> 00:19:03,824
else, пользователь был успешно создан,

226
00:19:03,824 --> 00:19:08,615
поэтому мы вернем done (null, user).

227
00:19:08,615 --> 00:19:11,265
Поэтому, независимо от того, в каком случае,

228
00:19:11,265 --> 00:19:15,965
если пользователь существует, вы найдете этого пользователя и вернете значение.

229
00:19:15,965 --> 00:19:19,824
Если пользователь не существует, вы собираетесь создать нового пользователя на основе

230
00:19:19,824 --> 00:19:22,431
полученного нами профиля Facebook.

231
00:19:22,431 --> 00:19:28,772
А затем добавьте нового пользователя на наш сайт сервера, в базу данных.

232
00:19:28,772 --> 00:19:32,642
Так что это стратегия, которую мы настраиваем для

233
00:19:32,642 --> 00:19:37,532
нашего паспорта, новый FacebookTokenStrategy.

234
00:19:37,532 --> 00:19:40,552
Таким образом, это позволит нам найти пользователя.

235
00:19:40,552 --> 00:19:45,571
Итак, теперь, когда мы настроили наше приложение, чтобы либо

236
00:19:45,571 --> 00:19:50,499
создать пользователя, либо найти пользователя на основе идентификатора Facebook.

237
00:19:50,499 --> 00:19:55,752
Последний шаг, конечно, заключается в том, чтобы ввести

238
00:19:55,752 --> 00:20:00,851
новый маршрут в файл users.js.

239
00:20:00,851 --> 00:20:05,284
Таким образом, в файле users.js вы вспомните, что у нас был маршрут регистрации, который

240
00:20:05,284 --> 00:20:09,950
позволяет пользователю зарегистрироваться для локальной учетной записи с именем пользователя и паролем.

241
00:20:09,950 --> 00:20:15,137
И тогда у вас есть логин, который позволяет пользователю войти в систему, используя имя пользователя и

242
00:20:15,137 --> 00:20:15,730
пароль.

243
00:20:15,730 --> 00:20:19,455
Но теперь мы будем использовать Facebook для входа в пользователя.

244
00:20:19,455 --> 00:20:25,601
Поэтому в этом случае мы скажем, router.get,

245
00:20:25,601 --> 00:20:32,208
а конечная точка будет /facebook/token.

246
00:20:32,208 --> 00:20:37,260
Поэтому, если пользователь отправляет запрос get пользователям/facebook/token,

247
00:20:37,260 --> 00:20:41,550
то мы собираемся аутентифицировать пользователя с помощью

248
00:20:41,550 --> 00:20:45,585
аутентификации на основе Facebook OAuth 2.

249
00:20:45,585 --> 00:20:50,470
Итак, здесь мы скажем passport.authenticate, и

250
00:20:50,470 --> 00:20:57,555
мы будем проводить аутентификацию с помощью стратегии facebook-token.

251
00:20:57,555 --> 00:21:04,076
Напомним, что мы уже настроили это в нашем файле authenticate.js,

252
00:21:04,076 --> 00:21:10,908
поэтому мы настроим стратегию аутентификации facebook-token, а

253
00:21:10,908 --> 00:21:15,786
затем эту функцию обратного вызова, которая получает req, res здесь.

254
00:21:23,390 --> 00:21:30,081
Так что позвольте мне, переключить слово обернуть здесь,

255
00:21:30,081 --> 00:21:36,356
чтобы вы могли видеть, что это router.get на этой конечной точке здесь.

256
00:21:36,356 --> 00:21:44,890
А затем здесь, я настрою это приложение.

257
00:21:44,890 --> 00:21:51,768
Итак, на данный момент, мы бы сказали, if (req.user), теперь заметили, что когда мы вызываем

258
00:21:51,768 --> 00:21:57,168
pasport.authenticate со стратегией facebook-token.

259
00:21:57,168 --> 00:21:59,055
Это, если он будет успешным,

260
00:21:59,055 --> 00:22:03,010
он загрузился бы у пользователя в объект запроса.

261
00:22:03,010 --> 00:22:08,387
Таким образом, к тому времени, когда мы подойдем к этому моменту после

262
00:22:08,387 --> 00:22:11,596
выполнения среднего программного обеспечения pasport.authenticate facebook-token,

263
00:22:11,596 --> 00:22:16,291
вы будете иметь пользователя уже загружен в объект запроса.

264
00:22:16,291 --> 00:22:23,070
Так что если это так, то, скажем, мы создадим токен.

265
00:22:23,070 --> 00:22:27,709
Мы создадим веб-токен JSON здесь, так же, как и мы

266
00:22:27,709 --> 00:22:32,371
создали веб-токен JSON, когда пользователь вошел здесь.

267
00:22:32,371 --> 00:22:35,275
Итак, мы собираемся копировать это здесь.

268
00:22:38,010 --> 00:22:41,586
Authenticate.getToken, так что это даст нам веб-токен JSON.

269
00:22:41,586 --> 00:22:46,656
Таким образом, по сути, пользователь отправляет токен доступа на экспресс-сервер,

270
00:22:46,656 --> 00:22:50,634
экспресс-сервер использует AccessToken, чтобы перейти на Facebook, а

271
00:22:50,634 --> 00:22:52,979
затем получить профиль пользователя.

272
00:22:52,979 --> 00:22:57,560
И если пользователь не существует, мы создадим нового пользователя с этим идентификатором Facebook.

273
00:22:57,560 --> 00:23:02,486
И после этого наш экспресс-сервер сгенерирует

274
00:23:02,486 --> 00:23:07,818
веб-токен JSON, а затем вернет веб-токен JSON нашему клиенту.

275
00:23:07,818 --> 00:23:13,878
Все последующие обращения от нашего пользователя должны будут включать этот

276
00:23:13,878 --> 00:23:19,317
веб-токен JSON, который мы только что вернули, используя этот подход.

277
00:23:19,317 --> 00:23:24,280
Таким образом, на данный момент вам больше не нужен токен доступа Facebook.

278
00:23:24,280 --> 00:23:29,287
Вы можете отказаться от маркера доступа Facebook в этот момент, потому что

279
00:23:29,287 --> 00:23:35,237
веб-маркер JSON - это тот, который держит аутентификацию пользователей активной в

280
00:23:35,237 --> 00:23:39,602
течение любого времени, когда этот веб-маркер JSON активен.

281
00:23:39,602 --> 00:23:45,529
Теперь в дополнение к этому, конечно, нам также нужно сделать эти шаги здесь.

282
00:23:45,529 --> 00:23:48,365
Так что я просто скопирую эту часть здесь.

283
00:23:48,365 --> 00:23:53,336
потому что я собираюсь сделать точно то же самое и в этом случае,

284
00:23:53,336 --> 00:23:56,284
поэтому мы будем вставлять этот код здесь.

285
00:23:56,284 --> 00:24:00,485
Таким образом, мы скажем StatusCode = 200, тип заголовка содержимого, а

286
00:24:00,485 --> 00:24:06,120
затем мы скажем res.json, что вы успешно вошли в систему, и все.

287
00:24:06,120 --> 00:24:13,521
Таким образом, с этим подходом, как вы можете видеть, теперь с помощью вызова этой конечной точки.

288
00:24:13,521 --> 00:24:17,498
Пользовательское приложение, клиент в этом случае,

289
00:24:17,498 --> 00:24:24,320
передаст токен доступа Facebook, который он только что получил от Facebook.

290
00:24:24,320 --> 00:24:27,970
И тогда наш экспресс-сервер будет использовать токен доступа Facebook, чтобы

291
00:24:27,970 --> 00:24:30,380
проверить пользователя на Facebook.

292
00:24:30,380 --> 00:24:35,580
И тогда, если пользователь признан Facebook законным пользователем,

293
00:24:35,580 --> 00:24:42,110
то наш экспресс-сервер вернет токен JSON wd нашему клиенту.

294
00:24:42,110 --> 00:24:44,920
И тогда наш клиент аутентифицируется, а

295
00:24:44,920 --> 00:24:48,650
затем может продолжить выполнение других операций с

296
00:24:48,650 --> 00:24:53,460
использованием токена JSON wd в заголовке всех сообщений запроса.

297
00:24:53,460 --> 00:25:00,190
Впоследствии, так же, как мы сделали с локальной стратегией аутентификации, вот и все.

298
00:25:00,190 --> 00:25:07,630
Таким образом, мы завершили все обновления для нашего приложения, давайте сохраним изменения.

299
00:25:08,810 --> 00:25:14,940
Перейдя к нашему терминалу, давайте запустим сервер здесь,

300
00:25:14,940 --> 00:25:19,710
так что мы скажем npm start, и сервер запущен и работает.

301
00:25:20,740 --> 00:25:26,320
И я заметил, что я набрал порт P-A-S-S-S,

302
00:25:26,320 --> 00:25:28,790
и это вызвало ошибку здесь.

303
00:25:28,790 --> 00:25:32,250
Так что обратите внимание, как легко делать ошибки.

304
00:25:32,250 --> 00:25:35,439
Поэтому позвольте мне пойти и исправить это, а затем вернуться и перезапустить мой сервер.

305
00:25:37,080 --> 00:25:40,280
Поэтому, когда вы сталкиваетесь с такими ошибками, не паникуйте.

306
00:25:40,280 --> 00:25:43,470
Посмотрите вокруг, чтобы увидеть, где проблема, и очень часто,

307
00:25:43,470 --> 00:25:47,580
это будет простая проблема, как эта, которая вызовет ошибки для вас.

308
00:25:48,970 --> 00:25:54,160
Опять же, возвращаясь к users.js, и

309
00:25:54,160 --> 00:25:57,930
вы видите, что в файле authenticate.js

310
00:25:57,930 --> 00:26:02,270
я настроил этот говорящий порт P-A-S-S-S.

311
00:26:02,270 --> 00:26:06,100
Поэтому в файле authenticate.js позвольте мне исправить это в passsport, а

312
00:26:06,100 --> 00:26:08,702
затем сохранить изменения, а затем перезапустить мой сервер.

313
00:26:09,770 --> 00:26:16,340
Теперь перезапустите мой сервер, так что мой сервер теперь работает и работает.

314
00:26:17,400 --> 00:26:20,160
На этом этапе перейдите в браузер.

315
00:26:20,160 --> 00:26:26,212
И в браузере наберите https://localhost3443.

316
00:26:29,625 --> 00:26:37,350
Если эта страница кэшируется здесь, возможно, вы захотите удалить кэш.

317
00:26:37,350 --> 00:26:41,417
Или просто введите localhost: 3343/index.html, и

318
00:26:41,417 --> 00:26:45,829
тогда вы сразу заметите, что в этом index.html

319
00:26:45,829 --> 00:26:49,640
вы увидите эту кнопку под названием «Вход».

320
00:26:49,640 --> 00:26:54,280
Таким образом, мы собираемся нажать на эту кнопку входа, чтобы войти в Facebook.

321
00:26:54,280 --> 00:26:59,880
Давайте войдем, а затем вы придумаете это сообщение здесь.

322
00:26:59,880 --> 00:27:03,365
Что, если вы уже вошли в Facebook ранее,

323
00:27:03,365 --> 00:27:07,840
он запросит разрешение на продолжение в качестве пользователя.

324
00:27:07,840 --> 00:27:12,440
Если нет, то он попросит вас войти в Facebook с, а

325
00:27:12,440 --> 00:27:14,030
затем позволит вам продолжить.

326
00:27:14,030 --> 00:27:17,000
Поскольку я только что вошел в Facebook немного раньше, поэтому

327
00:27:17,000 --> 00:27:19,020
я могу просто нажать «Продолжить».

328
00:27:19,020 --> 00:27:24,955
Теперь откройте консоль JavaScript разработчиков внизу здесь.

329
00:27:24,955 --> 00:27:31,810
И в консоли JavaScript вы видите кучу сообщений, напечатанных здесь.

330
00:27:31,810 --> 00:27:33,070
И тогда, в частности,

331
00:27:33,070 --> 00:27:37,720
откройте этот объект, который вы увидите в консоли JavaScript.

332
00:27:37,720 --> 00:27:43,081
И внутри этого объекта вы увидите этот ответ alt.

333
00:27:43,081 --> 00:27:49,370
И там вы увидите инструмент доступа, присутствующий там.

334
00:27:49,370 --> 00:27:55,320
Теперь это ответ, который получен из Facebook или

335
00:27:55,320 --> 00:28:00,610
из сервера аутентификации нашим приложением здесь.

336
00:28:00,610 --> 00:28:03,060
И я просто скопирую это,

337
00:28:03,060 --> 00:28:07,010
потому что это токен доступа, который Facebook предоставил нам.

338
00:28:07,010 --> 00:28:13,710
Теперь мне нужно дать этот токен доступа моему экспресс-серверу,

339
00:28:13,710 --> 00:28:19,990
чтобы он пошел и проверил мой профиль, а затем позволил мне войти в это приложение.

340
00:28:19,990 --> 00:28:22,860
Поэтому я делаю это сжатым способом

341
00:28:22,860 --> 00:28:27,560
здесь просто потому, что я хотел показать вам, как здесь приходит токен доступа.

342
00:28:27,560 --> 00:28:30,940
И мы скопируем токен доступа, затем я возьму это и

343
00:28:30,940 --> 00:28:36,820
использую Почтальона, чтобы отправить этот токен доступа на мой экспресс-сервер.

344
00:28:36,820 --> 00:28:42,330
Теперь, когда вы создаете веб-приложение, такое как Angular

345
00:28:42,330 --> 00:28:48,840
, или приложение Ionic, или приложение NativeScript, вам не нужно делать все эти шаги.

346
00:28:48,840 --> 00:28:53,634
Теперь, в основном, когда токен доступа возвращается в ваше веб-приложение

347
00:28:53,634 --> 00:28:58,086
, приложение Angular или приложение Ionic или приложение NativeScript,

348
00:28:58,086 --> 00:29:01,868
вы просто захватите этот токен доступа там.

349
00:29:01,868 --> 00:29:06,791
Затем вы передадите этот токен доступа на

350
00:29:06,791 --> 00:29:12,770
сервер Express, используя XMLHttpRequest для получения информации.

351
00:29:12,770 --> 00:29:16,410
Но так как я хотел вручную проиллюстрировать шаги.

352
00:29:16,410 --> 00:29:21,319
Итак, я установил этот index.html с простым

353
00:29:21,319 --> 00:29:24,640
кодом JavaScript, который Facebook предоставляет для меня.

354
00:29:26,420 --> 00:29:30,792
Так что я смогу получить этот токен авторизации, который мы получили из

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

356
00:29:31,454 --> 00:29:34,662
Поэтому позвольте мне скопировать этот токен авторизации.

357
00:29:34,662 --> 00:29:39,110
Теперь мы отправимся в Почтальон, а затем попробуем

358
00:29:39,110 --> 00:29:45,340
посмотреть, как мы можем получить веб-токен JSON с нашего сервера Express.

359
00:29:45,340 --> 00:29:49,220
Теперь, отправляясь в Почтальон, от Почтальона,

360
00:29:49,220 --> 00:29:54,525
позвольте мне теперь сделать запрос GET для

361
00:29:54,525 --> 00:30:03,195
LocalHost: 3443UsersFacebookToken.

362
00:30:03,195 --> 00:30:07,855
И когда я отправляю этот запрос на эту точку,

363
00:30:07,855 --> 00:30:13,115
другая конфигурация, которую мне нужно сделать здесь, заключается

364
00:30:13,115 --> 00:30:18,080
в том, что мне нужно передать этот токен доступа, который я только что получил.

365
00:30:18,080 --> 00:30:21,970
Теперь, чтобы передать токен доступа в заголовок,

366
00:30:21,970 --> 00:30:26,370
я могу передать его как заголовок авторизации, введя авторизацию.

367
00:30:26,370 --> 00:30:33,660
Но обратите внимание, что значение должно быть набрано как Beta с заглавной буквы B в этом случае,

368
00:30:33,660 --> 00:30:41,350
а затем вставить этот токен доступа, который мы получили из Facebook.

369
00:30:41,350 --> 00:30:44,840
Обратите внимание на столицу B здесь, и

370
00:30:44,840 --> 00:30:48,990
тогда вы можете передать это на наш сервер.

371
00:30:50,090 --> 00:30:53,970
И затем, отвечая с нашего сервера,

372
00:30:53,970 --> 00:30:59,810
вы увидите, что вы бы получили веб-токен JSON с нашего сайта сервера.

373
00:30:59,810 --> 00:31:05,472
Таким образом, это один из способов получить веб-токен JSON, обмениваясь

374
00:31:05,472 --> 00:31:10,000
токеном доступа из Facebook, который вы только что получили с помощью вашего Express сервера.

375
00:31:10,000 --> 00:31:16,330
И ваш Express сервер, в свою очередь, пойдет и

376
00:31:16,330 --> 00:31:19,960
получит информацию о вашем профиле из Facebook, а

377
00:31:19,960 --> 00:31:23,720
затем создаст учетную запись специально для вас, а

378
00:31:23,720 --> 00:31:28,260
затем вернет вам веб-токен JSON, если все будет успешным.

379
00:31:28,260 --> 00:31:33,290
Другой способ передачи этой информации - в заголовке,

380
00:31:33,290 --> 00:31:40,480
вы вводите access_token в качестве ключа.

381
00:31:40,480 --> 00:31:46,268
И в значении вы просто вводите

382
00:31:46,268 --> 00:31:52,020
токен доступа, как это здесь, а затем вы можете отправить запрос и то же самое.

383
00:31:52,020 --> 00:31:55,878
Он снова вернет веб-токен JSON для вас.

384
00:31:55,878 --> 00:31:59,410
А затем вы захватите веб-токен JSON, а затем продолжите с остальными

385
00:31:59,410 --> 00:32:05,300
доступом к вашему экспресс-серверу, используя этот веб-токен JSON.

386
00:32:05,300 --> 00:32:10,010
Третий подход заключается в том, чтобы включить это в

387
00:32:10,010 --> 00:32:15,410
свой URL-адрес в качестве параметра запроса.

388
00:32:15,410 --> 00:32:23,827
Третий подход - сказать токен? access_token=, а

389
00:32:23,827 --> 00:32:32,290
затем вставить веб-маркер JSON в этот параметр запроса.

390
00:32:32,290 --> 00:32:37,140
Не используйте здесь кавычки, только сам веб-токен JSON.

391
00:32:37,140 --> 00:32:40,810
А затем отправьте запрос на ваш сервер.

392
00:32:40,810 --> 00:32:47,680
И тогда даже тогда ваш сервер вернет соответствующий веб-токен JSON.

393
00:32:47,680 --> 00:32:52,450
Таким образом, вы видите три разных способа, которые вы можете проанализировать в своем токене доступа Facebook на

394
00:32:52,450 --> 00:32:57,350
свой сервер, а затем получить веб-токен JSON с вашего сервера.

395
00:32:57,350 --> 00:33:01,660
И после этого, остальные шаги идут так же, как и прежде.

396
00:33:02,970 --> 00:33:09,400
Теперь, чтобы убедить вас, что на самом деле была создана новая учетная запись с

397
00:33:09,400 --> 00:33:13,720
профилем Facebook для этого конкретного пользователя, давайте перейдем к терминалу.

398
00:33:15,080 --> 00:33:20,240
В терминале, в новом окне терминала, я начну волну монго здесь.

399
00:33:20,240 --> 00:33:25,050
Так что в пульсации монго, позвольте мне сказать, используйте смешение.

400
00:33:25,050 --> 00:33:31,560
И тогда я скажу, db.users.find () .pretty (),

401
00:33:31,560 --> 00:33:36,570
а затем распечатаю всех пользователей, зарегистрированных в моей системе.

402
00:33:36,570 --> 00:33:40,540
Вы заметили, что

403
00:33:40,540 --> 00:33:41,410
все три пользователя, которые мы настроили в предыдущих упражнениях, находятся там.

404
00:33:43,350 --> 00:33:48,130
Обратите внимание, кроме того, четвертого пользователя, который только что был добавлен в.

405
00:33:48,130 --> 00:33:53,580
И обратите внимание, что для этого конкретного пользователя у нас еще нет хэша в исходном коде,

406
00:33:53,580 --> 00:33:57,650
но вместо этого настраивается FacebookID этого пользователя, и

407
00:33:57,650 --> 00:34:02,660
имя пользователя настроено таким образом, чтобы оно было таким значением, и первое имя настроено там.

408
00:34:02,660 --> 00:34:05,580
А также фамилия должна была быть настроена здесь, но

409
00:34:05,580 --> 00:34:08,990
я думаю, что в моем коде есть небольшая ошибка.

410
00:34:08,990 --> 00:34:16,910
Поэтому я пойду и проверю его последнюю часть.

411
00:34:18,100 --> 00:34:20,110
Перейти к authenticate.js.

412
00:34:20,110 --> 00:34:23,130
Посмотрим, ошибся ли я здесь.

413
00:34:23,130 --> 00:34:24,580
Там мы идем.

414
00:34:24,580 --> 00:34:28,340
Я набрал имя F-A-M-I-L-Y.

415
00:34:28,340 --> 00:34:31,980
Видишь ли, даже я не о том, чтобы делать ошибки.

416
00:34:31,980 --> 00:34:36,277
Таким образом, это должно быть FamilyName здесь,

417
00:34:36,277 --> 00:34:42,730
user.lastname profile.name.familyName здесь.

418
00:34:42,730 --> 00:34:46,520
Поэтому позвольте мне сохранить изменения, и теперь код должен работать правильно.

419
00:34:47,710 --> 00:34:49,950
Возвращаясь к терминалу,

420
00:34:49,950 --> 00:34:54,460
вы теперь видите, что новый пользователь был создан здесь с профилем Facebook.

421
00:34:54,460 --> 00:34:59,130
Теперь любой последующий раз, когда я пытался аутентифицировать себя с помощью Facebook

422
00:34:59,130 --> 00:35:00,520
, это тот же процесс.

423
00:35:00,520 --> 00:35:03,000
Я получил токен доступа из Facebook, а

424
00:35:03,000 --> 00:35:06,160
затем проанализировал токен доступа к моему экспресс-серверу.

425
00:35:06,160 --> 00:35:10,790
Затем мой экспресс-сервер перейдет на Facebook, извлечет профиль, а

426
00:35:10,790 --> 00:35:14,020
затем проверьте, существует ли пользователь.

427
00:35:14,020 --> 00:35:18,660
И в последующем логине, который я использую Facebook,

428
00:35:18,660 --> 00:35:22,460
я бы обнаружил, что этот конкретный пользователь уже существует в системе.

429
00:35:22,460 --> 00:35:26,540
Таким образом, он просто продолжит движение вперед, и пользователь будет аутентифицирован,

430
00:35:26,540 --> 00:35:31,730
а затем дополнительный сервер выдает веб-токен JSON своему

431
00:35:31,730 --> 00:35:37,385
клиенту, и мы можем продолжить с этой точки и далее, как и раньше.

432
00:35:37,385 --> 00:35:42,395
Таким образом, вы видите, настройка аутентификации на основе OAuth 2 с использованием

433
00:35:42,395 --> 00:35:48,123
поставщика услуг OAuth 2, такого как Facebook, не так сложно при условии, что мы получим

434
00:35:48,123 --> 00:35:54,135
соответствующий модуль аутентификации на основе стратегии аутентификации Facebook.

435
00:35:54,135 --> 00:35:59,060
Как паспорт токен Facebook, который уже заботится

436
00:35:59,060 --> 00:36:04,253
о большей части работы от нашего имени, а затем позволяет нам настроить наш экспресс-сервер

437
00:36:04,253 --> 00:36:09,750
для обработки аутентификации третьей стороны на основе OAuth 2 от Facebook.

438
00:36:09,750 --> 00:36:12,730
С этим мы завершаем это упражнение.

439
00:36:12,730 --> 00:36:16,490
В этом упражнении мы научились выполнять всю аутентификацию OAuth 2

440
00:36:16,490 --> 00:36:20,590
с использованием Facebook в качестве аутентификации OAuth 2.

441
00:36:20,590 --> 00:36:25,263
Это хорошее время для вас, чтобы сохранить изменения, которые вы внесли в

442
00:36:25,263 --> 00:36:29,521
ваш репозиторий Git с паспортом сообщения Facebook.

443
00:36:29,521 --> 00:36:35,380
[ МУЗЫКА]