Bây giờ chúng tôi đã
hoàn thành việc thực hiện máy chủ REST API bằng cách sử dụng Express và MongoDB trong khóa học này,
suy nghĩ ngay lập tức tiếp theo có thể xảy ra trong tâm trí của bạn là,
vì chúng tôi đã phát triển các ứng dụng khách hàng, cho
dù đó là ứng dụng Angular, ứng dụng Ionic,
hoặc Ứng dụng Native Script trong các khóa học trước đây,
làm thế nào để chúng tôi tích hợp hai với nhau để ứng dụng khách hàng của chúng tôi có thể
tương tác với máy chủ API REST đầy đủ mà chúng tôi đã phát triển trong khóa học này?
Vì vậy, đây là những gì chúng ta sẽ kiểm tra trong bài học
này, trong bài giảng này, và hai bài tập theo sau bài giảng này.
Vì vậy, ở phần cuối của bài học này,
bạn sẽ có một khách hàng Angular mà chúng tôi sẽ có
thể giao tiếp với máy chủ mà bạn vừa phát triển trong
khóa học này và có thể hỗ trợ
xem phía khách hàng đầy đủ của toàn bộ ứng dụng của chúng tôi.
Vì vậy, theo cách đó, chúng ta sẽ thấy rằng chúng ta đã
phát triển ứ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ủ.
Một cách tiếp cận tương tự cũng có thể được sử dụng với
máy khách Ionic của bạn hoặc với máy khách kịch bản gốc của bạn, với
thực tế là cả hai kịch bản Ionic và Native đã được
phát triển với công cụ Angular đằng sau hậu trường.
Vì vậy, thực hiện một tập hợp các bước tương tự sẽ có thể làm cho khách hàng Ionic của bạn và cũng
Native script client của bạn giao tiếp với
máy chủ API phần còn lại Express cộng với MongoDB mà chúng tôi đã phát triển trong khóa học này.
Để tích hợp máy khách và máy chủ,
như chúng tôi đã nhận ra,
máy chủ của chúng tôi đã được triển khai để hỗ trợ API REST đầy đủ.
Từ phía khách hàng của chúng tôi,
cho dù đó là khách hàng góc cạnh,
khách hàng ion hoặc khách hàng kịch bản gốc,
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.
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,
máy chủ sẽ đáp ứng với dữ liệu JSON tương ứng trở lại máy khách,
và máy khách sau đó có thể sử dụng dữ liệu JSON để hiển thị các lượt xem cho người dùng.
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
chủ, việc tích hợp phải khá đơn giản.
Nhưng, bây giờ tất nhiên,
khi chúng tôi phát triển của chúng tôi Angular hoặc Ionic hoặc NativeScript client,
chúng tôi đã không làm phần xác thực người dùng chính thức,
bởi vì chúng tôi không có điều đó trong máy chủ JSON của chúng tôi.
Bây giờ chúng tôi có xác thực người dùng được tích
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
chúng tôi để cho phép họ thực hiện xác thực người dùng ở phía máy chủ,
bằng cách đăng thông tin đăng nhập vào máy chủ và sau đó
lấy mã thông báo xác thực từ phía máy chủ,
và sau đó, giao tiếp với máy chủ bao gồm
mã thông báo xác thực trong tiêu đề của các tin nhắn yêu cầu.
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ả khách hàng và máy chủ,
để cả hai có thể giao tiếp với nhau.
Một khía cạnh mà tôi đã không xử lý trong bài tập trước đó,
là làm thế nào các máy chủ sẽ xử lý các tham số truy vấn mà đến từ phía khách hàng.
Vì vậy, như chúng tôi nhận ra,
khi phía khách hàng gửi một yêu cầu cho
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 tính năng
, chúng tôi thấy rằng URL bao gồm
các món ăn, tính năng dấu hỏi bằng đúng trong URL yêu cầu đến từ phía khách hàng.
Bây giờ, trong dữ liệu ở phía máy chủ,
chúng tôi đã thấy rằng món ăn,
chương trình khuyến mãi hoặc nhà lãnh đạo,
bao gồm cờ tính năng đã có trong dữ liệu JSON.
Vì vậy, khi yêu cầu này đến phía máy chủ,
sau đó máy chủ sẽ có thể trích xuất tham số truy vấn này từ yêu cầu đến,
và sau đó một cách thích hợp làm truy vấn của
MongoDB và sau đó có được chỉ kết quả mà cờ đặc trưng này được thiết lập thành true.
Vì vậy, để làm điều đó như chúng ta đã thấy,
URL được sử dụng để gửi yêu cầu đến máy chủ là /dishes? feature=true.
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.
Bây giờ, ngoài ra, khi thông tin này được nhận ở phía máy chủ,
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ủ,
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 tất cả các món ăn và sau đó trả lại chúng
khi yêu cầu get được gửi đến DishRouterRoute/.
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.
Bây giờ, khi bạn bao gồm một tham số truy vấn như thế
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?
Vì vậy, đây là nơi khi yêu cầu đến có
tham số truy vấn này gắn liền với URL đến,
máy chủ express sẽ tự động xử lý điều đó và biến nó thành
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ủ.
Bây giờ, điều này có sẵn ở phía máy chủ dưới dạng req.query.
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 đối tượng JSON tương ứng với các thông tin được thiết lập như được hiển thị ở đây,
và sau đó được nạp vào đối tượng yêu cầu ở phía máy chủ.
Vì vậy, bằng cách sử dụng req.query ở phía máy chủ,
chúng tôi sẽ có thể có được các tham số truy vấn.
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 dishes.find và sau đó bạn bao gồm req.query vào tìm ở đó.
Vì vậy, do đó, khi MongoDB được truy vấn, sau đó,
chỉ những hồ sơ hoặc chỉ những tài liệu 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 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.
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.
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ộ
đị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.
Phần tiếp theo là tất nhiên, xác thực người dùng.
Vì vậy, như chúng tôi đã nhận ra ở phía máy chủ,
chúng tôi đã có những điểm cuối REST API này
, rất hữu ích cho việc xác thực người dùng.
Đặc biệt, khi bạn thực hiện một bài đăng lên /users/login,
với tên người dùng và mật khẩu, sau đó,
bạn sẽ có thể xác thực người dùng ở phía máy chủ.
Bây giờ, khi người dùng được xác thực ở phía máy chủ thành công,
thì thông điệp trả lời đến từ phía máy chủ sẽ bao gồm
mã thông báo web JSON trong nội dung trả lời của thông điệp trả lời đến từ phía máy chủ.
Vì vậy, ở phía khách hàng,
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 đó.
Vì vậy, khi khách hàng nhận được thông báo trả lời từ
phía máy chủ và người dùng được xác thực thành công ở phía máy chủ,
thông báo trả lời sẽ chứa mã thông báo web JSON,
mà phải được trích xuất, và sau đó,
khách hàng nên bao gồm mã thông báo web JSON này
trong cho mọi yêu cầu gửi đi từ phía khách hàng.
Vậy, làm thế nào để chúng ta xử lý toàn bộ các hoạt động này?
Bây giờ, đây là nơi chúng tôi sẽ thực hiện
một dịch vụ khác sẽ được sử dụng ở phía khách hàng của chúng tôi,
trong máy khách Angular của chúng tôi,
được gọi là dịch vụ xác thực,
và đó là nơi chúng tôi sẽ xử lý toàn bộ đăng nhập và các hoạt động đăng xuất.
Bây giờ, quá trình đăng xuất là khá đơn giản nhưng,
nếu chúng ta phá hủy mã thông báo web JSON mà chúng ta có ở phía khách hàng,
sau đó khách hàng sẽ không còn có thể truy cập vào máy chủ.
Vì vậy, nó là đơn giản như chỉ phá hủy
mã thông báo web JSON ở phía khách hàng để đăng xuất máy khách đó.
Vì vậy, với sự hiểu biết này,
chúng ta hãy xem các bước có liên quan đến
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.
Vì vậy, để xử lý xác thực người dùng ở phía client,
client sẽ gửi một post request tới điểm cuối /users/login,
và phần thân của post request sẽ chứa tên người dùng và mật khẩu.
Chúng tôi đang sử dụng xác thực đăng nhập trong trường hợp này.
Bây giờ, để xác thực Facebook một lần nữa,
đó là một thiết lập khác mà tôi sẽ không thảo luận ngay bây giờ.
Tuy nhiên, nội dung yêu cầu như bạn sẽ thấy để xác thực cục bộ,
sẽ chứa tên người dùng và mật khẩu.
Vì vậy, khi người dùng được xác thực thành công ở phía máy chủ, máy
chủ sau đó sẽ trả lời lại cho máy
khách bằng cách bao gồm mã thông báo web JSON trong thư trả lời.
Vì vậy, khi khách hàng nhận được thông điệp trả lời từ phía máy chủ,
sau đó khách hàng sẽ phải nắm bắt mã thông báo web JSON này,
và sau đó lưu mã thông báo web JSON vào bộ nhớ cục bộ ở phía khách hàng.
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.
Vì vậy, làm thế nào là điều này được thực hiện ở phía khách hàng?
Trước hết, tất nhiên,
bạn cần lưu mã thông báo web JSON đến vào bộ nhớ cục bộ,
và điều đó được thực hiện trong dịch vụ xác thực mà chúng tôi sẽ thực hiện ở phía khách hàng.
Bây giờ, đối với mọi yêu cầu đi,
khách hàng sẽ bao gồm mã thông báo này vào tiêu
đề, tiêu đề ủy quyền của yêu cầu đi.
Bây giờ, làm thế nào điều này được thực hiện?
Vì vậy, đây là nơi chúng ta sẽ có sự giúp đỡ của một máy đánh chặn HTTP,
rằng HttpClient trong Angular hỗ trợ.
Vì vậy, với máy chặn HTTP,
máy chặn cho phép chúng tôi chặn
mọi tin nhắn yêu cầu gửi đi hoặc thậm chí
chặn mọi tin nhắn trả lời đến nếu bạn chọn.
Nhưng trong ứng dụng Angular,
chúng tôi sẽ được thực hiện các yêu cầu chặn,
mà tôi sẽ minh họa trong bài tập sau này.
Trong trình chặn yêu cầu HTTP,
khi thông điệp yêu cầu bị chặn,
mọi thông điệp yêu cầu đi sẽ bị chặn và sau đó mã thông báo web JSON
sẽ được chèn vào tiêu đề ủy quyền của thông điệp yêu cầu.
Sau đó, thông báo yêu cầu sẽ được chuyển sang phía máy chủ.
Vì vậy, qua đó mọi yêu cầu đi sau khi người dùng được xác thực ở phía máy chủ,
mọi yêu cầu đi từ phía máy khách sẽ mang
mã thông báo web JSON trong tiêu đề ủy quyền của yêu cầu đi.
Bây giờ, một khi khách hàng đăng xuất,
mã thông báo web JSON sẽ bị phá hủy ở phía khách hàng.
Vì vậy, sau đó, các yêu cầu đi sẽ không chứa mã thông báo web JSON nữa,
bởi vì mã thông báo web JSON không tồn tại ở phía máy khách.
Vì vậy, do đó, người dùng mất xác thực.
Vì vậy, đó là cách chúng tôi sẽ xử lý quá trình đăng nhập và đăng xuất ở phía khách hàng,
bằng cách giao tiếp với máy chủ,
và sau đó có được mã thông báo web JSON,
và sau đó bao gồm mã thông báo web JSON trong mọi yêu cầu đi.
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,
bây giờ chúng ta hãy tiến hành hai bài tập tiếp theo.
Đầ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,
để nó có thể tích hợp tốt với trang web khách hàng của chúng tôi.
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
một ứng dụng khách hàng đầy đủ mà tôi đã
lấy từ khóa học Angular trước đó và sau đó tôi sẽ cập nhật nó,
mà cũng cung cấp cho chúng tôi khả năng sử dụng HTTP chặn
trên cả các yêu cầu đi và tin nhắn trả lời đến.
Vì vậy, chúng tôi sẽ đối phó với cả hai trong hai bài tập tiếp theo,
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 của bạn và phía máy chủ.