1
00:00:03,650 --> 00:00:06,795
Bây giờ chúng tôi đã hoàn thành việc thực hiện

2
00:00:06,795 --> 00:00:11,395
máy chủ REST API bằng cách sử dụng Express và MongoDB trong khóa học này,

3
00:00:11,395 --> 00:00:14,990
suy nghĩ ngay lập tức tiếp theo có thể xảy ra trong tâm trí của bạn là,

4
00:00:14,990 --> 00:00:20,490
vì chúng tôi đã phát triển các ứng dụng khách hàng trong các khóa học trước đó,

5
00:00:20,490 --> 00:00:24,930
làm thế nào để chúng tôi tích hợp cả hai với nhau để ứng dụng khách hàng có thể tương

6
00:00:24,930 --> 00:00:30,880
tác với máy chủ REST API đầy đủ mà chúng tôi đã phát triển trong khóa học này?

7
00:00:30,880 --> 00:00:33,820
Vì vậy, đây là những gì chúng ta sẽ kiểm tra trong bài

8
00:00:33,820 --> 00:00:39,820
giảng này và hai bài tập theo sau bài giảng này.

9
00:00:39,820 --> 00:00:41,770
Vì vậy, ở phần cuối của bài học này,

10
00:00:41,770 --> 00:00:44,390
bạn sẽ có React Client mà sẽ có

11
00:00:44,390 --> 00:00:47,330
thể giao tiếp với máy chủ mà bạn vừa phát triển trong

12
00:00:47,330 --> 00:00:50,345
khóa học này và có thể hỗ trợ

13
00:00:50,345 --> 00:00:56,510
xem phía khách hàng đầy đủ của toàn bộ ứng dụng của chúng tôi.

14
00:00:56,510 --> 00:00:58,970
Vì vậy, theo cách đó chúng ta sẽ thấy rằng chúng ta đã phát triển

15
00:01:02,565 --> 00:01:07,795
ứng dụng kết thúc hoàn chỉnh từ phía khách hàng tất cả các cách để phía máy chủ trong khóa học này.

16
00:01:07,795 --> 00:01:10,910
Để tích hợp máy khách và máy chủ,

17
00:01:10,910 --> 00:01:13,670
như chúng tôi đã nhận ra máy chủ của chúng tôi đã được

18
00:01:13,670 --> 00:01:17,525
thực hiện để hỗ trợ API REST đầy đủ.

19
00:01:17,525 --> 00:01:19,220
Từ phía khách hàng của chúng tôi,

20
00:01:19,220 --> 00:01:20,720
cho dù đó là khách hàng góc cạnh,

21
00:01:20,720 --> 00:01:23,340
khách hàng ion hoặc khách hàng kịch bản gốc,

22
00:01:23,340 --> 00:01:28,240
tất cả chúng tương tác với máy chủ bằng cách sử dụng điểm cuối REST API.

23
00:01:28,240 --> 00:01:33,630
Vì vậy, khi máy khách gửi yêu cầu tới máy chủ tại điểm cuối REST API,

24
00:01:33,630 --> 00:01:38,190
máy chủ sẽ đáp ứng với dữ liệu JSON tương ứng trở lại máy khách.

25
00:01:38,190 --> 00:01:44,225
Sau đó, khách hàng có thể sử dụng dữ liệu JSON để hiển thị các quan điểm cho người dùng.

26
00:01:44,225 --> 00:01:50,450
Vì vậy, với sự hiểu biết này về giao tiếp giữa máy khách và máy

27
00:01:50,450 --> 00:01:53,745
chủ, việc tích hợp phải khá đơn giản.

28
00:01:53,745 --> 00:01:58,475
Bây giờ chúng tôi đã xác thực người dùng được tích

29
00:01:58,475 --> 00:02:03,330
hợp vào phía máy chủ của chúng tôi, chúng tôi cần phải trang bị thêm các ứng dụng khách hàng của

30
00:02:03,330 --> 00:02:08,400
chúng tôi để cho phép họ thực hiện userauthentication ở phía máy chủ

31
00:02:08,400 --> 00:02:12,200
bằng cách đăng thông tin đăng nhập vào máy chủ sau đó

32
00:02:12,200 --> 00:02:16,010
lấy mã thông báo xác thực từ

33
00:02:16,010 --> 00:02:19,120
phía máy chủ và sau đó giao tiếp với máy chủ

34
00:02:19,120 --> 00:02:23,700
bao gồm mã thông báo xác thực trong tiêu đề của các thông báo yêu cầu.

35
00:02:23,700 --> 00:02:27,050
Vì vậy, tất cả điều này có nghĩa là chúng ta cần phải làm điều chỉnh nhỏ cho cả

36
00:02:27,050 --> 00:02:31,345
khách hàng và máy chủ để hai người có thể giao tiếp với nhau.

37
00:02:31,345 --> 00:02:36,530
Một khía cạnh mà tôi đã không xử lý trong bài tập trước đó

38
00:02:36,530 --> 00:02:41,970
là làm thế nào máy chủ sẽ xử lý các tham số truy vấn đến từ phía khách hàng.

39
00:02:41,970 --> 00:02:43,480
Vì vậy, như chúng tôi nhận ra,

40
00:02:43,480 --> 00:02:47,450
khi phía khách hàng gửi một yêu cầu cho

41
00:02:47,450 --> 00:02:53,035
một món ăn đặc trưng hoặc một nhà lãnh đạo đặc trưng hoặc một chương trình khuyến mãi đặc trưng

42
00:02:53,035 --> 00:02:55,910
, chúng tôi thấy rằng URL bao gồm,

43
00:02:55,910 --> 00:02:59,590
món ăn dấu hỏi tính năng là bằng

44
00:02:59,590 --> 00:03:04,370
đúng trong URL yêu cầu đến từ phía khách hàng.

45
00:03:04,370 --> 00:03:07,210
Bây giờ, trong dữ liệu ở phía máy chủ,

46
00:03:07,210 --> 00:03:09,585
chúng tôi đã thấy rằng món ăn,

47
00:03:09,585 --> 00:03:15,370
chương trình khuyến mãi hoặc nhà lãnh đạo bao gồm cờ đặc trưng đã có trong dữ liệu JSON.

48
00:03:15,370 --> 00:03:18,649
Vì vậy, khi yêu cầu này đến phía máy chủ,

49
00:03:18,649 --> 00:03:21,394
sau đó máy chủ sẽ có thể trích xuất

50
00:03:21,394 --> 00:03:26,765
tham số truy vấn này từ yêu cầu đến và sau đó

51
00:03:26,765 --> 00:03:32,390
một cách thích hợp làm truy vấn của

52
00:03:32,390 --> 00:03:39,950
MongoDB và sau đó chỉ có được kết quả mà cờ đặc trưng này được thiết lập thành true.

53
00:03:39,950 --> 00:03:41,740
Vì vậy, để làm điều đó như chúng ta đã thấy,

54
00:03:41,740 --> 00:03:47,075
URL được sử dụng để gửi yêu cầu đến máy chủ là, dấu

55
00:03:47,075 --> 00:03:52,030
gạch chéo các món ăn dấu chấm hỏi đặc trưng là bằng đúng.

56
00:03:52,030 --> 00:03:57,905
Vì vậy, đó là cách chúng tôi sẽ cung cấp các tham số truy vấn cho phía máy chủ của chúng tôi.

57
00:03:57,905 --> 00:04:02,610
Bây giờ ngoài ra, khi thông tin này được nhận ở phía máy chủ,

58
00:04:02,610 --> 00:04:07,430
bây giờ chúng tôi thấy rằng trước đó khi chúng tôi đã làm yêu cầu get ở phía máy chủ,

59
00:04:07,430 --> 00:04:10,190
chúng tôi chỉ đơn giản là nói món ăn tìm thấy và sau đó chúng tôi sẽ tìm thấy

60
00:04:10,190 --> 00:04:13,135
tất cả các món ăn và sau đó trả lại chúng khi

61
00:04:13,135 --> 00:04:19,745
yêu cầu get được gửi đến các món ăn router đường slash .

62
00:04:19,745 --> 00:04:25,185
Logic tương tự áp dụng cho cả bộ định tuyến quảng cáo cũng như cho bộ định tuyến lãnh đạo.

63
00:04:25,185 --> 00:04:30,339
Bây giờ, khi bạn bao gồm một tham số truy vấn như thế

64
00:04:30,339 --> 00:04:34,695
nào trong URL, phía máy chủ của chúng tôi sẽ có thể trích xuất tham số truy vấn này như thế nào?

65
00:04:34,695 --> 00:04:35,980
Vì vậy, đây là nơi,

66
00:04:35,980 --> 00:04:42,590
khi yêu cầu đến có tham số truy vấn này gắn liền với URL đến,

67
00:04:42,590 --> 00:04:47,375
máy chủ express sẽ tự động xử lý điều đó và biến nó thành

68
00:04:47,375 --> 00:04:54,445
một đối tượng JSON được nạp vào một thông điệp yêu cầu đến ở phía máy chủ.

69
00:04:54,445 --> 00:05:00,710
Bây giờ, điều này có sẵn ở phía máy chủ dưới dạng req.query.

70
00:05:00,710 --> 00:05:06,545
Vì vậy, bất cứ tham số truy vấn nào bạn bao gồm trong URL sẽ được biến thành các

71
00:05:06,545 --> 00:05:11,480
đối tượng JSON tương ứng với các thông tin được thiết lập như

72
00:05:11,480 --> 00:05:16,880
được hiển thị ở đây và sau đó được nạp vào đối tượng yêu cầu ở phía máy chủ.

73
00:05:16,880 --> 00:05:19,940
Vì vậy, bằng cách sử dụng req.query ở phía máy chủ,

74
00:05:19,940 --> 00:05:23,625
chúng tôi sẽ có thể có được các tham số truy vấn này.

75
00:05:23,625 --> 00:05:27,935
Vì vậy, khi bạn thực hiện một yêu cầu get ở phía máy chủ bạn nói

76
00:05:27,935 --> 00:05:34,115
dishes.find và sau đó bạn bao gồm req.query vào tìm ở đó.

77
00:05:34,115 --> 00:05:38,960
Vì vậy, do đó, khi MongoDB được

78
00:05:38,960 --> 00:05:44,120
truy vấn sau đó chỉ những hồ sơ hoặc chỉ những tài liệu

79
00:05:44,120 --> 00:05:50,390
mà tính năng được thiết lập thành true sẽ được trích xuất từ MongoDB và cung cấp lại cho

80
00:05:50,390 --> 00:05:57,020
chúng tôi trong phương pháp get này ở đây và sau đó có thể được trả về phía khách hàng.

81
00:05:57,020 --> 00:06:05,270
Vì vậy, điều này là đơn giản như trong việc xử lý các tham số truy vấn ở phía máy chủ của chúng tôi.

82
00:06:05,270 --> 00:06:10,645
Vì vậy, bản cập nhật này chúng tôi sẽ làm cho cả bộ định tuyến đĩa, bộ

83
00:06:10,645 --> 00:06:16,880
định tuyến quảng cáo và bộ định tuyến lãnh đạo ở phía máy chủ của chúng tôi.

84
00:06:16,880 --> 00:06:18,430
Phần tiếp theo là,

85
00:06:18,430 --> 00:06:20,545
tất nhiên, xác thực người dùng.

86
00:06:20,545 --> 00:06:22,060
Vì vậy, như chúng tôi đã nhận ra,

87
00:06:22,060 --> 00:06:24,150
ở phía máy chủ chúng tôi đã có

88
00:06:24,150 --> 00:06:29,450
những điểm cuối REST API rất hữu ích cho việc xác thực người dùng,

89
00:06:29,450 --> 00:06:33,260
đặc biệt khi bạn thực hiện một bài viết để

90
00:06:33,260 --> 00:06:37,100
cắt xén người dùng đăng nhập bằng tên người dùng và mật khẩu,

91
00:06:37,100 --> 00:06:41,675
sau đó bạn sẽ có thể xác thực người dùng trên máy chủ bên.

92
00:06:41,675 --> 00:06:46,080
Bây giờ, khi người dùng được xác thực ở phía máy chủ thành công,

93
00:06:46,080 --> 00:06:50,584
sau đó thư trả lời đến từ phía máy chủ sẽ bao gồm

94
00:06:50,584 --> 00:06:58,880
JSON Web Token trong cơ thể trả lời của thư trả lời đến từ phía máy chủ.

95
00:06:58,880 --> 00:07:00,350
Vì vậy, ở phía khách hàng,

96
00:07:00,350 --> 00:07:04,700
chúng ta sẽ có thể trích xuất mã thông báo này và sau đó sử dụng mã thông báo này sau đó.

97
00:07:04,700 --> 00:07:08,210
Vì vậy, khi khách hàng nhận được thông báo trả lời từ

98
00:07:08,210 --> 00:07:12,560
phía máy chủ và người dùng được xác thực thành công ở phía máy chủ,

99
00:07:12,560 --> 00:07:15,220
thông báo trả lời sẽ chứa JSON Web Token,

100
00:07:15,220 --> 00:07:16,950
mà phải được trích xuất,

101
00:07:16,950 --> 00:07:20,780
và sau đó khách hàng nên bao gồm JSON Web Token này

102
00:07:20,780 --> 00:07:26,200
trong cho mọi yêu cầu gửi đi từ phía khách hàng.

103
00:07:26,200 --> 00:07:31,205
Điều này được thực hiện bằng cách lưu JSON Web Token vào bộ nhớ cục bộ.

104
00:07:31,205 --> 00:07:35,155
Sau đó, đối với mỗi yêu cầu lấy mà chúng tôi phát hành,

105
00:07:35,155 --> 00:07:40,365
chúng tôi có thể thiết lập tiêu đề ủy quyền để chứa JSON Web Token.

106
00:07:40,365 --> 00:07:43,815
Bây giờ, quá trình đăng xuất là khá đơn giản,

107
00:07:43,815 --> 00:07:47,865
nếu chúng ta phá hủy JSON Web Token mà chúng tôi có ở phía khách hàng,

108
00:07:47,865 --> 00:07:51,210
sau đó khách hàng sẽ không còn có thể truy cập vào máy chủ.

109
00:07:51,210 --> 00:07:53,930
Vì vậy, nó là đơn giản như chỉ

110
00:07:53,930 --> 00:07:58,180
phá hủy JSON Web Token ở phía khách hàng để đăng xuất máy khách đó.

111
00:07:58,180 --> 00:08:00,530
Vì vậy, với sự hiểu biết này,

112
00:08:00,530 --> 00:08:04,175
chúng ta hãy xem các bước có liên quan đến

113
00:08:04,175 --> 00:08:09,840
việc thực hiện xác thực người dùng về xử lý xác thực người dùng ở phía khách hàng.

114
00:08:09,840 --> 00:08:13,085
Vì vậy, để xử lý xác thực người dùng ở phía client,

115
00:08:13,085 --> 00:08:19,000
client sẽ gửi một post request tới người dùng slash slash slash login endpoint,

116
00:08:19,000 --> 00:08:24,190
và nội dung của post request sẽ chứa tên người dùng và mật khẩu.

117
00:08:24,190 --> 00:08:26,720
Chúng tôi đang sử dụng xác thực đăng nhập trong trường hợp này.

118
00:08:26,720 --> 00:08:28,695
Bây giờ, để xác thực Facebook, một lần nữa,

119
00:08:28,695 --> 00:08:32,425
đó là một thiết lập khác mà tôi sẽ không thảo luận ngay bây giờ.

120
00:08:32,425 --> 00:08:35,570
Nhưng nội dung yêu cầu như bạn thấy để

121
00:08:35,570 --> 00:08:38,780
xác thực cục bộ sẽ chứa tên người dùng và mật khẩu.

122
00:08:38,780 --> 00:08:43,220
Vì vậy, khi người dùng được xác thực thành công ở phía máy chủ,

123
00:08:43,220 --> 00:08:46,460
máy chủ sau đó sẽ trả lời lại cho

124
00:08:46,460 --> 00:08:51,490
khách hàng bằng cách bao gồm JSON Web Token trong thư trả lời.

125
00:08:51,490 --> 00:08:56,150
Vì vậy, khi khách hàng nhận được thông báo trả lời từ phía máy chủ,

126
00:08:56,150 --> 00:09:00,320
sau đó khách hàng sẽ phải nắm bắt JSON Web Token này và sau đó

127
00:09:00,320 --> 00:09:05,080
lưu JSON Web Token vào bộ nhớ cục bộ ở phía khách hàng.

128
00:09:05,080 --> 00:09:11,300
Sau đó, khách hàng nên bao gồm mã thông báo này trong mọi yêu cầu gửi đi.

129
00:09:11,300 --> 00:09:14,495
Vì vậy, làm thế nào là điều này được thực hiện ở phía khách hàng?

130
00:09:14,495 --> 00:09:20,285
Đầu tiên và quan trọng nhất, chúng ta cần lưu JSON Web Token vào bộ nhớ cục bộ.

131
00:09:20,285 --> 00:09:25,670
Bây giờ, điều này được thực hiện bên trong tác giả hành động xử lý quá trình đăng nhập người dùng.

132
00:09:25,670 --> 00:09:32,685
Vì vậy, khi bài đăng được thực hiện cho máy chủ từ phía khách hàng người tạo cảm ứng,

133
00:09:32,685 --> 00:09:36,020
sau đó thông điệp trả lời sẽ chứa mã thông báo

134
00:09:36,020 --> 00:09:41,540
và mã thông báo này được lưu trong tác giả hành động xử lý quá trình đăng nhập người dùng.

135
00:09:41,540 --> 00:09:45,875
Bây giờ sau đó, khi bất kỳ yêu cầu lấy được thực hiện,

136
00:09:45,875 --> 00:09:52,829
sau đó chúng ta có thể dễ dàng thiết lập các tiêu đề ủy quyền trong yêu cầu lấy đi.

137
00:09:52,829 --> 00:09:56,005
Bây giờ, một khi khách hàng đăng xuất,

138
00:09:56,005 --> 00:09:59,930
JSON Web Token sẽ bị phá hủy ở phía khách hàng.

139
00:09:59,930 --> 00:10:03,050
Vì vậy, sau đó, yêu cầu đi sẽ không chứa

140
00:10:03,050 --> 00:10:07,490
JSON Web Token nữa bởi vì JSON Web Token không tồn tại ở phía máy khách.

141
00:10:07,490 --> 00:10:10,790
Vì vậy, do đó, người dùng mất xác thực.

142
00:10:10,790 --> 00:10:17,455
Vì vậy, đó là cách chúng tôi sẽ xử lý đăng nhập và quá trình đăng xuất ở phía khách hàng.

143
00:10:17,455 --> 00:10:21,890
Bằng cách giao tiếp với máy chủ và sau đó có được JSON Web Token và

144
00:10:21,890 --> 00:10:26,185
sau đó bao gồm JSON Web Token trong mọi yêu cầu đi.

145
00:10:26,185 --> 00:10:31,570
Bây giờ, với sự hiểu biết này về cách khách hàng và máy chủ sẽ tương tác,

146
00:10:31,570 --> 00:10:35,540
bây giờ chúng ta hãy tiến hành hai bài tập tiếp theo.

147
00:10:35,540 --> 00:10:40,410
Đầu tiên, chúng tôi sẽ cập nhật phía máy chủ với một vài bổ sung để

148
00:10:40,410 --> 00:10:45,550
nó có thể tích hợp tốt với phía khách hàng của chúng tôi.

149
00:10:45,550 --> 00:10:50,075
Sau đó, chúng tôi sẽ cập nhật phía khách hàng hay đúng hơn tôi sẽ cung cấp cho bạn

150
00:10:50,075 --> 00:10:54,200
một ứng dụng khách hàng chính thức mà tôi đã lấy

151
00:10:54,200 --> 00:10:58,875
từ lực lượng phản ứng trước đó và điều chỉnh nó, cập nhật nó.

152
00:10:58,875 --> 00:11:03,080
Vì vậy, chúng tôi sẽ đối phó với cả hai trong hai bài tập tiếp theo,

153
00:11:03,080 --> 00:11:09,460
và ở phần cuối của nó, bạn sẽ hiểu làm thế nào để tích hợp khách hàng và phía máy chủ của bạn.