Trong hướng dẫn này, chúng tôi trình bày một số tính năng hay của Spring Security, Spring Boot và Angular hoạt động cùng nhau để mang lại trải nghiệm người dùng thú vị và an toàn. Người mới bắt đầu sử dụng Spring và Angular có thể truy cập được, nhưng cũng có rất nhiều chi tiết sẽ hữu ích cho các chuyên gia trong cả hai lĩnh vực này. Đây thực sự là phần đầu tiên trong một loạt các phần về Spring Security và Angular, với các tính năng mới được trình bày liên tiếp trong mỗi phần. Chúng tôi sẽ cải thiện ứng dụng trong phần thứ hai và các phần tiếp theo, nhưng những thay đổi chính sau phần này là về kiến trúc hơn là chức năng
Mùa xuân và Ứng dụng Trang đơn
HTML5, các tính năng phong phú dựa trên trình duyệt và "ứng dụng một trang" là những công cụ cực kỳ có giá trị đối với các nhà phát triển hiện đại, nhưng bất kỳ tương tác có ý nghĩa nào cũng sẽ liên quan đến máy chủ phụ trợ, cũng như nội dung tĩnh [HTML, CSS và JavaScript] mà chúng tôi sẽ hướng tới . Máy chủ phụ trợ có thể đóng bất kỳ hoặc tất cả các vai trò. cung cấp nội dung tĩnh, đôi khi [nhưng không thường xuyên như hiện nay] hiển thị HTML động, xác thực người dùng, đảm bảo quyền truy cập vào các tài nguyên được bảo vệ và [cuối cùng nhưng không kém phần quan trọng] tương tác với JavaScript trong trình duyệt thông qua HTTP và JSON [đôi khi được gọi là REST
Spring luôn là một công nghệ phổ biến để xây dựng các tính năng phụ trợ [đặc biệt là trong doanh nghiệp] và với sự ra đời của Spring Boot, mọi thứ chưa bao giờ dễ dàng hơn thế. Let’s have a look at how to build a new single page application from nothing using Spring Boot, Angular and Twitter Bootstrap. There’s no particular reason to choose that specific stack, but it is quite popular, especially with the core Spring constituency in enterprise Java shops, so it’s a worthwhile starting point
Create a New Project
We are going to step through creating this application in some detail, so that anyone who isn’t completely au fait with Spring and Angular can follow what is happening. If you prefer to cut to the chase, you can skip to the end where the application is working, and see how it all fits together. Có nhiều tùy chọn khác nhau để tạo một dự án mới
Using curl on the command line
Using Spring Boot CLI
Using the Spring Initializr website
Using Spring Tool Suite
The source code for the complete project we are going to build is in Github here, so you can just clone the project and work directly from there if you want. Then jump to the next section
Using Curl
The easiest way to create a new project to get started is via the Spring Boot Initializr. E. g. using curl on a UN*X like system
$ mkdir ui && cd ui
$ curl //start.spring.io/starter.tgz -d dependencies=web,security -d name=ui | tar -xzvf -Sau đó, bạn có thể nhập dự án đó [theo mặc định là dự án Maven Java bình thường] vào IDE yêu thích của mình hoặc chỉ làm việc với các tệp và "mvn" trên dòng lệnh. Sau đó chuyển sang phần tiếp theo
Using Spring Boot CLI
Bạn có thể tạo cùng một dự án bằng Spring Boot CLI, như thế này
$ spring init --dependencies web,security ui/ && cd uiSau đó chuyển sang phần tiếp theo
Sử dụng trang web Initializr
Nếu muốn, bạn cũng có thể nhận mã trực tiếp giống như một. zip từ Spring Boot Initializr. Chỉ cần mở nó lên trong trình duyệt của bạn và chọn phụ thuộc "Web" và "Security", sau đó nhấp vào "Tạo dự án". Các. zip chứa một dự án Maven hoặc Gradle tiêu chuẩn trong thư mục gốc, vì vậy bạn có thể muốn tạo một thư mục trống trước khi giải nén nó. Sau đó chuyển sang phần tiếp theo
Using Spring Tool Suite
Trong Bộ công cụ Spring [một bộ các plugin Eclipse], bạn cũng có thể tạo và nhập dự án bằng trình hướng dẫn tại
$ spring init --dependencies web,security ui/ && cd uiThêm một ứng dụng góc cạnh
Cốt lõi của một ứng dụng trang đơn trong Angular [hoặc bất kỳ khung giao diện người dùng hiện đại nào] ngày nay sẽ là một Nút. xây dựng js. Angular có một số công cụ để thiết lập điều này một cách nhanh chóng, vì vậy hãy sử dụng những công cụ đó và cũng giữ tùy chọn xây dựng với Maven, giống như bất kỳ ứng dụng Spring Boot nào khác. Chi tiết về cách thiết lập ứng dụng Angular được trình bày ở nơi khác hoặc bạn chỉ có thể kiểm tra mã cho hướng dẫn này từ github
Chạy ứng dụng
Khi ứng dụng Angular được khởi chạy, ứng dụng của bạn sẽ có thể tải được trong trình duyệt [mặc dù nó chưa làm được gì nhiều]. Trên dòng lệnh bạn có thể làm điều này
$ mvn spring-boot:runvà truy cập trình duyệt tại http. //máy chủ cục bộ. 8080. Khi bạn tải trang chủ, bạn sẽ nhận được hộp thoại trình duyệt yêu cầu tên người dùng và mật khẩu [tên người dùng là "người dùng" và mật khẩu được in trong nhật ký bảng điều khiển khi khởi động]. Thực sự chưa có nội dung nào [hoặc có thể là nội dung hướng dẫn "anh hùng" mặc định từ
$ spring init --dependencies web,security ui/ && cd uiNếu bạn không thích cạo nhật ký giao diện điều khiển để tìm mật khẩu, chỉ cần thêm mật khẩu này vào "ứng dụng. thuộc tính" [trong "src/main/resource"].
$ spring init --dependencies web,security ui/ && cd uiTrong IDE, chỉ cần chạy phương thức
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiĐể đóng gói và chạy như một JAR độc lập, bạn có thể làm điều này
________số 8
Tùy chỉnh ứng dụng góc
Hãy tùy chỉnh thành phần "app-root" [trong "src/app/app. thành phần. ts"]
Một ứng dụng Angular tối thiểu trông như thế này
ứng dụng. thành phần. ts
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Hầu hết mã trong TypeScript này là bản nồi hơi. Tất cả nội dung thú vị sẽ có trong
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiứng dụng. thành phần. html
$ spring init --dependencies web,security ui/ && cd uiNếu bạn đã thêm các tệp đó trong "src/app" và xây dựng lại ứng dụng của mình thì giờ đây, ứng dụng đó sẽ an toàn và hoạt động hiệu quả, đồng thời nó sẽ thông báo "Xin chào thế giới. ".
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiThêm nội dung động
Cho đến nay, chúng tôi có một ứng dụng với lời chào được mã hóa cứng. Điều đó hữu ích cho việc tìm hiểu cách mọi thứ khớp với nhau, nhưng thực sự chúng tôi mong đợi nội dung đến từ máy chủ phụ trợ, vì vậy, hãy tạo một điểm cuối HTTP mà chúng tôi có thể sử dụng để nhận lời chào. Trong lớp ứng dụng của bạn [trong "src/main/java/demo"], hãy thêm chú thích
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiUiỨng dụng. java
$ spring init --dependencies web,security ui/ && cd uiTùy thuộc vào cách bạn tạo dự án mới của mình, nó có thể không được gọi là
$ spring init --dependencies web,security ui/ && cd uiChạy ứng dụng đó và cố gắng cuộn tròn điểm cuối "/resource" và bạn sẽ thấy rằng nó được bảo mật theo mặc định
$ spring init --dependencies web,security ui/ && cd uiĐang tải tài nguyên động từ góc
Vì vậy, hãy lấy tin nhắn đó trong trình duyệt. Sửa đổi
$ spring init --dependencies web,security ui/ && cd uiứng dụng. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiChúng tôi đã thêm dịch vụ
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiĐể cho phép đưa dịch vụ phụ thuộc của dịch vụ
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiứng dụng. mô-đun. ts
$ spring init --dependencies web,security ui/ && cd uiChạy lại ứng dụng [hoặc chỉ cần tải lại trang chủ trong trình duyệt] và bạn sẽ thấy thông báo động với ID duy nhất của nó. Vì vậy, mặc dù tài nguyên được bảo vệ và bạn không thể cuộn trực tiếp tài nguyên đó nhưng trình duyệt vẫn có thể truy cập nội dung. Chúng tôi có một ứng dụng trang đơn an toàn trong chưa đầy một trăm dòng mã
Bạn có thể cần buộc trình duyệt của mình tải lại tài nguyên tĩnh sau khi bạn thay đổi chúng. Trong Chrome [và Firefox có plugin], bạn có thể sử dụng "công cụ dành cho nhà phát triển" [F12] và điều đó có thể là đủ. Hoặc bạn có thể phải sử dụng CTRL+F5
Làm thế nào nó hoạt động?
Có thể nhìn thấy các tương tác giữa trình duyệt và chương trình phụ trợ trong trình duyệt của bạn nếu bạn sử dụng một số công cụ dành cho nhà phát triển [thường là F12 mở ra, hoạt động trong Chrome theo mặc định, có thể yêu cầu plugin trong Firefox]. Đây là một bản tóm tắt
Động từĐường dẫnTrạng tháiPhản hồiLẤY
/
401
Trình duyệt nhắc xác thực
LẤY
/
200
mục lục. html
LẤY
/*. js
200
Tải nội dung thứ ba từ góc
LẤY
/chính. bó. js
200
logic ứng dụng
LẤY
/nguồn
200
Lời chào JSON
Bạn có thể không thấy 401 vì trình duyệt coi tải trang chủ là một tương tác đơn lẻ và bạn có thể thấy 2 yêu cầu cho "/resource" vì có thương lượng CORS
Xem xét kỹ hơn các yêu cầu và bạn sẽ thấy rằng tất cả chúng đều có tiêu đề "Ủy quyền", đại loại như thế này
$ spring init --dependencies web,security ui/ && cd uiTrình duyệt đang gửi tên người dùng và mật khẩu với mọi yêu cầu [vì vậy hãy nhớ chỉ sử dụng HTTPS trong sản xuất]. Không có gì là "Góc cạnh" về điều đó, vì vậy nó hoạt động với khung JavaScript hoặc khung lựa chọn không phải của bạn
Có gì sai với điều đó?
Nhìn bề ngoài, có vẻ như chúng tôi đã làm khá tốt, nó ngắn gọn, dễ triển khai, tất cả dữ liệu của chúng tôi được bảo mật bằng mật khẩu bí mật và nó vẫn hoạt động nếu chúng tôi thay đổi công nghệ giao diện người dùng hoặc công nghệ phụ trợ. Nhưng có một số vấn đề
Xác thực cơ bản bị hạn chế đối với xác thực tên người dùng và mật khẩu
Giao diện người dùng xác thực phổ biến nhưng xấu [hộp thoại trình duyệt]
Không có sự bảo vệ khỏi giả mạo yêu cầu trang web chéo [CSRF]
CSRF không thực sự là một vấn đề với ứng dụng của chúng tôi vì nó chỉ cần NHẬN các tài nguyên phụ trợ [tôi. e. không có trạng thái nào bị thay đổi trong máy chủ]. Ngay khi bạn có POST, PUT hoặc DELETE trong ứng dụng của mình, đơn giản là nó không còn an toàn nữa bằng bất kỳ biện pháp hiện đại hợp lý nào
Trong phần tiếp theo của loạt bài này, chúng tôi sẽ mở rộng ứng dụng để sử dụng xác thực dựa trên biểu mẫu, linh hoạt hơn nhiều so với HTTP Basic. Khi chúng tôi có một biểu mẫu, chúng tôi sẽ cần bảo vệ CSRF và cả Spring Security và Angular đều có một số tính năng tuyệt vời để hỗ trợ việc này. spoiler. chúng ta sẽ cần sử dụng
$ spring init --dependencies web,security ui/ && cd uiCảm ơn. Tôi xin cảm ơn tất cả những người đã giúp tôi phát triển loạt bài này, đặc biệt là Rob Winch và Thorsten Spaeth vì đã xem xét cẩn thận văn bản và mã nguồn, cũng như đã dạy cho tôi một số thủ thuật mà tôi thậm chí còn không biết về những phần mà tôi nghĩ
Trang đăng nhập
Trong phần này, chúng ta tiếp tục thảo luận về cách sử dụng Spring Security với Angular trong một "ứng dụng trang đơn". Ở đây chúng tôi trình bày cách sử dụng Angular để xác thực người dùng thông qua biểu mẫu và tìm nạp tài nguyên an toàn để hiển thị trong giao diện người dùng. Đây là phần thứ hai trong một loạt các phần và bạn có thể bắt kịp các khối xây dựng cơ bản của ứng dụng hoặc xây dựng nó từ đầu bằng cách đọc phần đầu tiên hoặc bạn có thể truy cập thẳng vào mã nguồn trong Github. Trong phần đầu tiên, chúng tôi đã xây dựng một ứng dụng đơn giản sử dụng xác thực HTTP Basic để bảo vệ tài nguyên phụ trợ. Trong phần này, chúng tôi thêm biểu mẫu đăng nhập, cung cấp cho người dùng một số quyền kiểm soát về việc có xác thực hay không và khắc phục sự cố với lần lặp đầu tiên [chủ yếu là thiếu bảo vệ CSRF]
Lời nhắc nhở. nếu bạn đang làm việc qua phần này với ứng dụng mẫu, hãy đảm bảo xóa bộ nhớ cache của trình duyệt khỏi cookie và thông tin xác thực HTTP Basic. Trong Chrome, cách tốt nhất để làm điều đó cho một máy chủ là mở một cửa sổ ẩn danh mới
Thêm Điều hướng vào Trang chủ
Cốt lõi của ứng dụng Angular là một mẫu HTML cho bố cục trang cơ bản. Chúng tôi đã có một ứng dụng thực sự cơ bản, nhưng đối với ứng dụng này, chúng tôi cần cung cấp một số tính năng điều hướng [đăng nhập, đăng xuất, trang chủ], vì vậy hãy sửa đổi nó [trong
$ spring init --dependencies web,security ui/ && cd uiứng dụng. thành phần. html
$ spring init --dependencies web,security ui/ && cd uiNội dung chính là một
$ spring init --dependencies web,security ui/ && cd uiBộ chọn
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiứng dụng. mô-đun. ts
$ spring init --dependencies web,security ui/ && cd uiChúng tôi đã thêm một phụ thuộc vào một mô-đun Góc có tên là "RouterModule" và điều này cho phép chúng tôi đưa một phép thuật
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiChúng tôi cũng lén đưa
$ spring init --dependencies web,security ui/ && cd uiCác thành phần giao diện người dùng đều là "khai báo" và keo dịch vụ là "nhà cung cấp".
$ spring init --dependencies web,security ui/ && cd uiứng dụng. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiTính năng nổi bật
Có thêm một số mũi tiêm phụ thuộc, lần này là của
30$ spring init --dependencies web,security ui/ && cd uiCó một chức năng đăng xuất được hiển thị dưới dạng thuộc tính của thành phần, mà chúng ta có thể sử dụng sau này để gửi yêu cầu đăng xuất đến phần phụ trợ. Nó đặt cờ trong dịch vụ
38 và gửi người dùng trở lại màn hình đăng nhập [và nó thực hiện việc này vô điều kiện thông qua lệnh gọi lại$ spring init --dependencies web,security ui/ && cd ui
39]$ spring init --dependencies web,security ui/ && cd uiChúng tôi đang sử dụng
40 để ngoại hóa HTML mẫu thành một tệp riêng biệt$ spring init --dependencies web,security ui/ && cd uiHàm
41 được gọi khi bộ điều khiển được tải để xem liệu người dùng có thực sự đã được xác thực chưa [e. g. nếu anh ấy đã làm mới trình duyệt vào giữa phiên]. Chúng tôi cần chức năng$ spring init --dependencies web,security ui/ && cd ui
41 để thực hiện cuộc gọi từ xa vì xác thực thực tế được thực hiện bởi máy chủ và chúng tôi không muốn tin tưởng vào trình duyệt để theo dõi nó$ spring init --dependencies web,security ui/ && cd ui
Dịch vụ
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiứng dụng. Dịch vụ. ts
$ spring init --dependencies web,security ui/ && cd uiCờ
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uilời chào
Nội dung lời chào từ trang chủ cũ có thể vào ngay bên cạnh "ứng dụng. thành phần. html" trong "src/ứng dụng"
Trang Chủ. thành phần. html
$ spring init --dependencies web,security ui/ && cd uiVì người dùng hiện có quyền lựa chọn đăng nhập hay không [trước khi tất cả được kiểm soát bởi trình duyệt], chúng tôi cần phân biệt trong giao diện người dùng giữa nội dung an toàn và nội dung không an toàn. Chúng tôi đã dự đoán điều này bằng cách thêm các tham chiếu đến hàm
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiTrang Chủ. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiBiểu mẫu đăng nhập
Biểu mẫu đăng nhập cũng có thành phần riêng
đăng nhập. thành phần. html
$ spring init --dependencies web,security ui/ && cd uiĐây là một biểu mẫu đăng nhập rất chuẩn, với 2 đầu vào cho tên người dùng và mật khẩu và một nút để gửi biểu mẫu thông qua trình xử lý sự kiện Angular
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiQuá trình xác thực
Để hỗ trợ biểu mẫu đăng nhập mà chúng tôi vừa thêm, chúng tôi cần thêm một số tính năng khác. Về phía máy khách, những thứ này sẽ được triển khai trong
$ spring init --dependencies web,security ui/ && cd uiGửi biểu mẫu đăng nhập
Để gửi biểu mẫu, chúng tôi cần xác định hàm
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiđăng nhập. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiNgoài việc khởi tạo đối tượng
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiNgười dùng được xác thực hiện tại
Để phục vụ chức năng
$ spring init --dependencies web,security ui/ && cd uiUiỨng dụng. java
$ spring init --dependencies web,security ui/ && cd uiĐây là một thủ thuật hữu ích trong ứng dụng Spring Security. Nếu tài nguyên "/user" có thể truy cập được thì nó sẽ trả về người dùng được xác thực hiện tại [một
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiXử lý yêu cầu đăng nhập trên máy chủ
Spring Security giúp dễ dàng xử lý yêu cầu đăng nhập. Chúng ta chỉ cần thêm một số cấu hình vào lớp ứng dụng chính của mình [e. g. như một lớp bên trong]
UiỨng dụng. java
$ mvn spring-boot:runĐây là ứng dụng Spring Boot tiêu chuẩn với tùy chỉnh Spring Security, chỉ cho phép truy cập ẩn danh vào tài nguyên tĩnh [HTML]. Tài nguyên HTML cần phải có sẵn cho người dùng ẩn danh, không chỉ bị Spring Security bỏ qua, vì những lý do sẽ trở nên rõ ràng
Điều cuối cùng chúng ta cần nhớ là làm cho các thành phần JavaScript do Angular cung cấp ẩn danh cho ứng dụng. Chúng ta có thể làm điều đó trong cấu hình
$ spring init --dependencies web,security ui/ && cd uiđăng kí. yml
$ mvn spring-boot:runThêm tiêu đề yêu cầu HTTP mặc định
Nếu bạn chạy ứng dụng vào thời điểm này, bạn sẽ thấy rằng trình duyệt bật lên hộp thoại Xác thực cơ bản [đối với người dùng và mật khẩu]. Nó làm điều này vì nó thấy phản hồi 401 từ các yêu cầu XHR tới
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiTrước tiên, hãy mở rộng
$ spring init --dependencies web,security ui/ && cd uiứng dụng. mô-đun. ts
$ mvn spring-boot:runCú pháp ở đây là soạn sẵn. Thuộc tính
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiĐể cài đặt nhà máy
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiứng dụng. mô-đun. ts
$ mvn spring-boot:runĐăng xuất
Ứng dụng gần như đã hoàn thành chức năng. Điều cuối cùng chúng ta cần làm là triển khai tính năng đăng xuất mà chúng ta đã phác thảo trong trang chủ. Nếu người dùng được xác thực thì chúng tôi hiển thị liên kết "đăng xuất" và nối liên kết đó với hàm
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiBảo vệ CSRF
Ứng dụng gần như đã sẵn sàng để sử dụng và trên thực tế, nếu bạn chạy nó, bạn sẽ thấy rằng mọi thứ chúng tôi xây dựng cho đến nay thực sự hoạt động ngoại trừ liên kết đăng xuất. Hãy thử sử dụng nó và xem các phản hồi trong trình duyệt và bạn sẽ thấy tại sao
$ mvn spring-boot:runĐiều đó tốt vì điều đó có nghĩa là tính năng bảo vệ CSRF tích hợp của Spring Security đã khởi động để ngăn chúng tôi tự bắn vào chân mình. Tất cả những gì nó muốn là một mã thông báo được gửi tới nó trong tiêu đề có tên "X-CSRF". Giá trị của mã thông báo CSRF đã có sẵn phía máy chủ trong các thuộc tính
$ spring init --dependencies web,security ui/ && cd uiVì vậy, trên máy chủ, chúng tôi cần một bộ lọc tùy chỉnh sẽ gửi cookie. Angular muốn tên cookie là "XSRF-TOKEN" và Spring Security mặc định cung cấp nó dưới dạng thuộc tính yêu cầu, vì vậy chúng ta chỉ cần chuyển giá trị từ thuộc tính yêu cầu sang cookie. May mắn thay, Spring Security [kể từ 4. 1. 0] cung cấp một
$ spring init --dependencies web,security ui/ && cd uiUiỨng dụng. java
$ mvn spring-boot:runVới những thay đổi đó, chúng tôi không cần phải làm bất cứ điều gì ở phía máy khách và biểu mẫu đăng nhập hiện đang hoạt động
Làm thế nào nó hoạt động?
Có thể nhìn thấy các tương tác giữa trình duyệt và chương trình phụ trợ trong trình duyệt của bạn nếu bạn sử dụng một số công cụ dành cho nhà phát triển [thường là F12 mở ra, hoạt động trong Chrome theo mặc định, có thể yêu cầu plugin trong Firefox]. Đây là một bản tóm tắt
Động từĐường dẫnTrạng tháiPhản hồiLẤY
/
200
mục lục. html
LẤY
/*. js
200
Tài sản từ góc
LẤY
/người sử dụng
401
Trái phép [bỏ qua]
LẤY
/Trang Chủ
200
trang chủ
LẤY
/người sử dụng
401
Trái phép [bỏ qua]
LẤY
/nguồn
401
Trái phép [bỏ qua]
LẤY
/người sử dụng
200
Gửi thông tin đăng nhập và nhận JSON
LẤY
/nguồn
200
Lời chào JSON
Các phản hồi được đánh dấu "bỏ qua" ở trên là các phản hồi HTML mà Angular nhận được trong lệnh gọi XHR và vì chúng tôi không xử lý dữ liệu đó nên HTML bị loại bỏ trên sàn. Chúng tôi tìm kiếm một người dùng được xác thực trong trường hợp tài nguyên "/user", nhưng vì nó không có trong cuộc gọi đầu tiên nên phản hồi đó bị hủy
Xem xét kỹ hơn các yêu cầu và bạn sẽ thấy rằng tất cả chúng đều có cookie. Nếu bạn bắt đầu với một trình duyệt sạch [e. g. ẩn danh trong Chrome], yêu cầu đầu tiên không có cookie nào được chuyển đến máy chủ, nhưng máy chủ sẽ gửi lại "Set-Cookie" cho "JSESSIONID" [_______126 thông thường] và "X-XSRF-TOKEN" [cookie CRSF mà . Tất cả các yêu cầu tiếp theo đều có những cookie đó và chúng rất quan trọng. ứng dụng không hoạt động nếu không có chúng và chúng đang cung cấp một số tính năng bảo mật thực sự cơ bản [xác thực và bảo vệ CSRF]. Các giá trị của cookie thay đổi khi người dùng xác thực [sau POST] và đây là một tính năng bảo mật quan trọng khác [ngăn chặn các cuộc tấn công cố định phiên]
Việc bảo vệ CSRF dựa vào cookie được gửi trở lại máy chủ là không đủ vì trình duyệt sẽ tự động gửi nó ngay cả khi bạn không ở trong trang được tải từ ứng dụng của mình [một cuộc tấn công Cross Site Scripting, còn được gọi là XSS]. Tiêu đề không được gửi tự động, vì vậy nguồn gốc được kiểm soát. Bạn có thể thấy rằng trong ứng dụng của chúng tôi, mã thông báo CSRF được gửi tới ứng dụng khách dưới dạng cookie, vì vậy chúng tôi sẽ thấy nó được trình duyệt tự động gửi lại, nhưng chính tiêu đề cung cấp sự bảo vệ
Trợ giúp, Ứng dụng của tôi sẽ mở rộng như thế nào?
"Nhưng đợi đã..." bạn đang nói, "việc sử dụng trạng thái phiên trong ứng dụng một trang có thực sự tệ không?" . Trạng thái đó phải được lưu trữ ở đâu đó và nếu bạn lấy nó ra khỏi phiên, bạn sẽ phải đặt nó ở một nơi khác và tự quản lý nó theo cách thủ công, trên cả máy chủ và máy khách. Đó chỉ là nhiều mã hơn và có thể là bảo trì nhiều hơn, và nói chung là phát minh lại một bánh xe hoàn toàn tốt
"Nhưng, nhưng..." bạn sẽ trả lời, "làm cách nào để mở rộng ứng dụng của tôi theo chiều ngang bây giờ?" . Không hoảng loạn. Điểm chính cần lưu ý ở đây là bảo mật có trạng thái. Bạn không thể có một ứng dụng an toàn, phi trạng thái. Vậy bạn sẽ lưu trữ trạng thái ở đâu? . Rob Winch đã có một bài nói chuyện rất hữu ích và sâu sắc tại Spring Exchange 2014 giải thích nhu cầu về trạng thái [và tính phổ biến của nó - TCP và SSL đều có trạng thái, vì vậy hệ thống của bạn có trạng thái dù bạn có biết hay không], điều này có lẽ đáng để xem
Tin tốt là bạn có một sự lựa chọn. Lựa chọn đơn giản nhất là lưu trữ dữ liệu phiên trong bộ nhớ và dựa vào các phiên cố định trong bộ cân bằng tải của bạn để định tuyến các yêu cầu từ cùng một phiên trở lại cùng một JVM [tất cả đều hỗ trợ điều đó bằng cách nào đó]. Điều đó đủ tốt để giúp bạn bắt đầu và sẽ hoạt động cho một số lượng lớn các trường hợp sử dụng. Lựa chọn khác là chia sẻ dữ liệu phiên giữa các phiên bản ứng dụng của bạn. Miễn là bạn nghiêm ngặt và chỉ lưu trữ dữ liệu bảo mật, dữ liệu này nhỏ và không thường xuyên thay đổi [chỉ khi người dùng đăng nhập và đăng xuất hoặc phiên của họ hết thời gian], do đó sẽ không có bất kỳ sự cố lớn nào về cơ sở hạ tầng. Nó cũng rất dễ thực hiện với Phiên mùa xuân. Chúng ta sẽ sử dụng Phiên mùa xuân trong phần tiếp theo của loạt bài này, vì vậy không cần phải đi sâu vào bất kỳ chi tiết nào về cách thiết lập nó ở đây, nhưng nó thực sự là một vài dòng mã và máy chủ Redis, siêu nhanh
Một cách dễ dàng khác để thiết lập trạng thái phiên chia sẻ là triển khai ứng dụng của bạn dưới dạng tệp WAR cho Dịch vụ Web Pivotal của Cloud Foundry và liên kết ứng dụng đó với dịch vụ Redis
Tuy nhiên, còn việc triển khai mã thông báo tùy chỉnh của tôi [nó không trạng thái, hãy nhìn xem] thì sao?
Nếu đó là câu trả lời của bạn cho phần trước, thì hãy đọc lại vì có thể bạn không hiểu ngay lần đầu tiên. Nó có thể không phải là không trạng thái nếu bạn lưu trữ mã thông báo ở đâu đó, nhưng ngay cả khi bạn không [e. g. bạn sử dụng mã thông báo được mã hóa JWT], bạn sẽ cung cấp bảo vệ CSRF như thế nào? . Đây là một quy tắc ngón tay cái [do Rob Winch]. nếu ứng dụng hoặc API của bạn sẽ được truy cập bởi trình duyệt, bạn cần bảo vệ CSRF. Không phải là bạn không thể làm điều đó nếu không có phiên, chỉ là bạn phải tự viết tất cả mã đó và vấn đề là gì vì nó đã được triển khai và hoạt động hoàn hảo trên đầu trang của
$ spring init --dependencies web,security ui/ && cd uiSự kết luận
Ứng dụng mà chúng ta có bây giờ gần giống với những gì người dùng có thể mong đợi ở một ứng dụng "thực" trong môi trường trực tiếp và nó có thể được sử dụng làm mẫu để xây dựng thành một ứng dụng giàu tính năng hơn với kiến trúc đó [máy chủ đơn có tĩnh . Chúng tôi đang sử dụng
$ spring init --dependencies web,security ui/ && cd uiMáy chủ tài nguyên
Trong phần này, chúng ta tiếp tục thảo luận về cách sử dụng Spring Security với Angular trong một "ứng dụng trang đơn". Ở đây, chúng tôi bắt đầu bằng cách tách tài nguyên "lời chào" mà chúng tôi đang sử dụng làm nội dung động trong ứng dụng của mình thành một máy chủ riêng biệt, đầu tiên là tài nguyên không được bảo vệ, sau đó được bảo vệ bằng mã thông báo mờ. Đây là phần thứ ba trong một loạt các phần và bạn có thể bắt kịp các khối xây dựng cơ bản của ứng dụng hoặc xây dựng nó từ đầu bằng cách đọc phần đầu tiên hoặc bạn có thể truy cập thẳng vào mã nguồn trong Github, nằm trong . một nơi tài nguyên không được bảo vệ và một nơi tài nguyên được bảo vệ bằng mã thông báo
nếu bạn đang làm việc qua phần này với ứng dụng mẫu, hãy đảm bảo xóa bộ nhớ cache của trình duyệt khỏi cookie và thông tin xác thực HTTP Basic. Trong Chrome, cách tốt nhất để làm điều đó cho một máy chủ là mở một cửa sổ ẩn danh mới
Một máy chủ tài nguyên riêng biệt
Thay đổi phía khách hàng
Về phía khách hàng, không có nhiều việc phải làm để chuyển tài nguyên sang một chương trình phụ trợ khác. Đây là thành phần "nhà" trong phần trước
Trang Chủ. thành phần. ts
$ mvn spring-boot:runTất cả những gì chúng ta cần làm là thay đổi URL. Ví dụ: nếu chúng ta sẽ chạy tài nguyên mới trên máy chủ cục bộ, thì nó có thể trông như thế này
Trang Chủ. thành phần. ts
$ mvn spring-boot:runThay đổi phía máy chủ
Máy chủ giao diện người dùng không đáng kể để thay đổi. chúng ta chỉ cần xóa
$ spring init --dependencies web,security ui/ && cd ui$ mvn spring-boot:runSau đó, bạn có thể nhập dự án đó [theo mặc định là dự án Maven Java bình thường] vào IDE yêu thích của mình hoặc chỉ làm việc với các tệp và "mvn" trên dòng lệnh
Chỉ cần thêm một
$ spring init --dependencies web,security ui/ && cd uiỨng dụng tài nguyên. java
$ mvn spring-boot:runKhi đã xong, ứng dụng của bạn sẽ có thể tải được trong trình duyệt. Trên dòng lệnh bạn có thể làm điều này
$ mvn package
$ java -jar target/*.jarvà truy cập trình duyệt tại http. //máy chủ cục bộ. 9000 và bạn sẽ thấy JSON kèm theo lời chào. Bạn có thể sử dụng thay đổi cổng trong
$ spring init --dependencies web,security ui/ && cd uiđăng kí. đặc tính
$ mvn package
$ java -jar target/*.jarNếu bạn thử tải tài nguyên đó từ giao diện người dùng [trên cổng 8080] trong trình duyệt, bạn sẽ thấy rằng nó không hoạt động vì trình duyệt không cho phép yêu cầu XHR
Đàm phán CORS
Trình duyệt cố gắng đàm phán với máy chủ tài nguyên của chúng tôi để tìm hiểu xem nó có được phép truy cập theo giao thức Chia sẻ tài nguyên gốc chéo hay không. Đó không phải là trách nhiệm của Góc, vì vậy giống như hợp đồng cookie, nó sẽ hoạt động như thế này với tất cả JavaScript trong trình duyệt. Hai máy chủ không khai báo rằng chúng có nguồn gốc chung, vì vậy trình duyệt từ chối gửi yêu cầu và giao diện người dùng bị hỏng
Để khắc phục điều đó, chúng tôi cần hỗ trợ giao thức CORS bao gồm yêu cầu TÙY CHỌN "trước chuyến bay" và một số tiêu đề để liệt kê hành vi được phép của người gọi. mùa xuân 4. 2 có một số hỗ trợ CORS chi tiết, vì vậy chúng tôi chỉ cần thêm một chú thích vào ánh xạ bộ điều khiển của mình, chẳng hạn
Ứng dụng tài nguyên. java
$ mvn package
$ java -jar target/*.jarHoàn toàn sử dụng
$ spring init --dependencies web,security ui/ && cd uiBảo mật máy chủ tài nguyên
Tuyệt quá. Chúng tôi có một ứng dụng đang hoạt động với kiến trúc mới. Vấn đề duy nhất là máy chủ tài nguyên không có bảo mật
Thêm bảo mật mùa xuân
Chúng ta cũng có thể xem cách thêm bảo mật cho máy chủ tài nguyên dưới dạng lớp bộ lọc, như trong máy chủ giao diện người dùng. Bước đầu tiên thực sự dễ dàng. chỉ cần thêm Bảo mật mùa xuân vào đường dẫn lớp trong Maven POM
quả bông. xml
$ mvn package
$ java -jar target/*.jarKhởi chạy lại máy chủ tài nguyên và xin chào. nó an toàn
$ mvn package
$ java -jar target/*.jarChúng tôi đang nhận được chuyển hướng đến trang đăng nhập [nhãn trắng] vì curl không gửi cùng tiêu đề mà ứng dụng khách Angular của chúng tôi sẽ gửi. Sửa đổi lệnh để gửi nhiều tiêu đề tương tự hơn
$ mvn package
$ java -jar target/*.jarVì vậy, tất cả những gì chúng ta cần làm là hướng dẫn khách hàng gửi thông tin xác thực với mọi yêu cầu
Xác thực mã thông báo
Internet và các dự án phụ trợ mùa xuân của mọi người tràn ngập các giải pháp xác thực dựa trên mã thông báo tùy chỉnh. Spring Security cung cấp triển khai
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiHãy nhớ từ Phần II của loạt bài này rằng Spring Security sử dụng
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiphiên mùa xuân
Đó là một phần của giải pháp khá dễ dàng với Phiên mùa xuân. Tất cả những gì chúng tôi cần là một kho lưu trữ dữ liệu dùng chung [Redis và JDBC được hỗ trợ ngay lập tức] và một vài dòng cấu hình trong máy chủ để thiết lập một
$ spring init --dependencies web,security ui/ && cd uiTrong ứng dụng giao diện người dùng, chúng tôi cần thêm một số phụ thuộc vào POM của mình
quả bông. xml
$ mvn package
$ java -jar target/*.jarSpring Boot và Spring Session hoạt động cùng nhau để kết nối với Redis và lưu trữ dữ liệu phiên tập trung
Với 1 dòng mã đó và máy chủ Redis chạy trên máy chủ cục bộ, bạn có thể chạy ứng dụng giao diện người dùng, đăng nhập bằng một số thông tin xác thực người dùng hợp lệ và dữ liệu phiên [xác thực] sẽ được lưu trữ trong redis
nếu bạn không có máy chủ redis chạy cục bộ, bạn có thể dễ dàng tạo một máy chủ bằng Docker [trên Windows hoặc MacOS, điều này yêu cầu máy ảo]. Có một tệp
$ mvn spring-boot:run$ mvn spring-boot:run$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd uiGửi Mã thông báo tùy chỉnh từ giao diện người dùng
Phần còn thiếu duy nhất là cơ chế vận chuyển khóa cho dữ liệu trong cửa hàng. Khóa là ID
$ spring init --dependencies web,security ui/ && cd uiTrang Chủ. thành phần. ts
$ mvn package
$ java -jar target/*.jar[Một giải pháp tinh tế hơn có thể là lấy mã thông báo khi cần và sử dụng
$ mvn spring-boot:runThay vì truy cập trực tiếp vào "http. //máy chủ cục bộ. 9000", chúng tôi đã gói cuộc gọi đó trong cuộc gọi lại thành công của cuộc gọi đến điểm cuối tùy chỉnh mới trên máy chủ giao diện người dùng tại "/token". Việc thực hiện đó là tầm thường
UiỨng dụng. java
$ mvn package
$ java -jar target/*.jarVì vậy, ứng dụng giao diện người dùng đã sẵn sàng và sẽ bao gồm ID phiên trong tiêu đề có tên "X-Auth-Token" cho tất cả các cuộc gọi đến phần phụ trợ
Xác thực trong Máy chủ tài nguyên
Có một thay đổi nhỏ đối với máy chủ tài nguyên để nó có thể chấp nhận tiêu đề tùy chỉnh. Cấu hình CORS phải chỉ định tiêu đề đó là tiêu đề được phép từ các máy khách từ xa, ví dụ:. g
Ứng dụng tài nguyên. java
$ mvn package
$ java -jar target/*.jarKiểm tra trước chuyến bay từ trình duyệt hiện sẽ được xử lý bởi Spring MVC, nhưng chúng tôi cần thông báo cho Spring Security rằng nó được phép thông qua
Ứng dụng tài nguyên. java
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Không cần truy cập
$ mvn spring-boot:run$ mvn spring-boot:runTất cả những gì còn lại là lấy mã thông báo tùy chỉnh trong máy chủ tài nguyên và sử dụng nó để xác thực người dùng của chúng tôi. Điều này hóa ra khá đơn giản vì tất cả những gì chúng ta cần làm là cho Spring Security biết kho lưu trữ phiên ở đâu và tìm mã thông báo [ID phiên] ở đâu trong một yêu cầu đến. Trước tiên, chúng ta cần thêm các phụ thuộc Spring Session và Redis, sau đó chúng ta có thể thiết lập
$ spring init --dependencies web,security ui/ && cd uiỨng dụng tài nguyên. java
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}$ spring init --dependencies web,security ui/ && cd ui$ mvn spring-boot:run$ mvn spring-boot:runCó một thay đổi cuối cùng đối với máy chủ tài nguyên để nó hoạt động với sơ đồ xác thực mới của chúng tôi. Bảo mật mặc định của Spring Boot là không trạng thái và chúng tôi muốn điều này lưu trữ xác thực trong phiên, vì vậy chúng tôi cần phải rõ ràng trong
$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd uiđăng kí. yml
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Điều này nói với Spring Security "không bao giờ tạo phiên, nhưng hãy sử dụng phiên nếu nó ở đó" [nó sẽ ở đó vì xác thực trong giao diện người dùng]
Khởi chạy lại máy chủ tài nguyên và mở giao diện người dùng trong cửa sổ trình duyệt mới
Tại sao không phải tất cả đều hoạt động với cookie?
Chúng tôi phải sử dụng tiêu đề tùy chỉnh và viết mã trong ứng dụng khách để điền vào tiêu đề, điều này không quá phức tạp nhưng có vẻ như mâu thuẫn với lời khuyên trong Phần II là sử dụng cookie và phiên bất cứ khi nào có thể. Lập luận ở đó là không làm như vậy sẽ dẫn đến sự phức tạp không cần thiết bổ sung và chắc chắn rằng việc triển khai mà chúng ta có bây giờ là phức tạp nhất mà chúng ta từng thấy cho đến nay. phần kỹ thuật của giải pháp vượt xa logic kinh doanh [được thừa nhận là rất nhỏ]. Đây chắc chắn là một lời chỉ trích công bằng [và chúng tôi dự định sẽ giải quyết trong phần tiếp theo của loạt bài này], nhưng chúng ta hãy xem xét ngắn gọn tại sao nó không đơn giản như chỉ sử dụng cookie và phiên cho mọi thứ
Ít nhất chúng tôi vẫn đang sử dụng phiên, điều này có ý nghĩa vì Spring Security và bộ chứa Servlet biết cách thực hiện điều đó mà chúng tôi không cần nỗ lực. Nhưng chúng tôi không thể tiếp tục sử dụng cookie để vận chuyển mã thông báo xác thực sao? . Bạn chỉ có thể tìm kiếm trong cửa hàng cookie của trình duyệt từ ứng dụng khách JavaScript, nhưng có một số hạn chế và vì lý do chính đáng. Cụ thể là bạn không có quyền truy cập vào cookie được gửi bởi máy chủ dưới dạng "HttpOnly" [bạn sẽ thấy trường hợp này theo mặc định đối với cookie phiên]. Bạn cũng không thể đặt cookie trong các yêu cầu gửi đi, vì vậy chúng tôi không thể đặt cookie "SESSION" [là tên cookie mặc định của Phiên mùa xuân], chúng tôi phải sử dụng tiêu đề "X-Session" tùy chỉnh. Cả hai hạn chế này đều nhằm mục đích bảo vệ chính bạn nên các tập lệnh độc hại không thể truy cập tài nguyên của bạn nếu không có sự cho phép thích hợp
TL; DR giao diện người dùng và máy chủ tài nguyên không có nguồn gốc chung, vì vậy chúng không thể chia sẻ cookie [mặc dù chúng tôi có thể sử dụng Phiên mùa xuân để buộc chúng chia sẻ phiên]
Sự kết luận
Chúng tôi đã sao chép các tính năng của ứng dụng trong Phần II của loạt bài này. một trang chủ có lời chào được tìm nạp từ một chương trình phụ trợ từ xa, với các liên kết đăng nhập và đăng xuất trong thanh điều hướng. Sự khác biệt là lời chào đến từ một máy chủ tài nguyên độc lập, thay vì được nhúng trong máy chủ giao diện người dùng. Điều này làm tăng thêm độ phức tạp đáng kể cho việc triển khai, nhưng tin tốt là chúng tôi có một giải pháp chủ yếu dựa trên cấu hình [và thực tế là 100% khai báo]. Chúng tôi thậm chí có thể làm cho giải pháp mang tính khai báo 100% bằng cách trích xuất tất cả mã mới vào thư viện [Cấu hình mùa xuân và chỉ thị tùy chỉnh góc]. Chúng tôi sẽ trì hoãn nhiệm vụ thú vị đó sau một vài phần tiếp theo. Trong phần tiếp theo, chúng ta sẽ xem xét một cách thực sự tuyệt vời khác để giảm tất cả sự phức tạp trong quá trình triển khai hiện tại. Mẫu cổng API [máy khách gửi tất cả các yêu cầu của nó đến một nơi và xác thực được xử lý ở đó]
Chúng tôi đã sử dụng Phiên mùa xuân tại đây để chia sẻ các phiên giữa 2 máy chủ không cùng một ứng dụng về mặt logic. Đó là một thủ thuật gọn gàng và không thể thực hiện được với các phiên phân phối JEE "thông thường"
Cổng API
Trong phần này, chúng ta tiếp tục thảo luận về cách sử dụng Spring Security với Angular trong một "ứng dụng trang đơn". Ở đây chúng tôi trình bày cách xây dựng Cổng API để kiểm soát xác thực và truy cập vào tài nguyên phụ trợ bằng Spring Cloud. Đây là phần thứ tư trong một loạt các phần và bạn có thể bắt kịp các khối xây dựng cơ bản của ứng dụng hoặc xây dựng nó từ đầu bằng cách đọc phần đầu tiên hoặc bạn có thể truy cập thẳng vào mã nguồn trong Github. Trong phần trước, chúng ta đã xây dựng một ứng dụng phân tán đơn giản sử dụng Spring Session để xác thực các tài nguyên phụ trợ. Trong phần này, chúng tôi biến máy chủ giao diện người dùng thành một proxy ngược với máy chủ tài nguyên phụ trợ, khắc phục sự cố với lần triển khai cuối cùng [độ phức tạp kỹ thuật do xác thực mã thông báo tùy chỉnh gây ra] và cung cấp cho chúng tôi nhiều tùy chọn mới để kiểm soát quyền truy cập từ ứng dụng khách trình duyệt
Lời nhắc nhở. nếu bạn đang làm việc qua phần này với ứng dụng mẫu, hãy đảm bảo xóa bộ nhớ cache của trình duyệt khỏi cookie và thông tin xác thực HTTP Basic. Trong Chrome, cách tốt nhất để làm điều đó cho một máy chủ là mở một cửa sổ ẩn danh mới
Tạo một cổng API
Cổng API là một điểm truy cập [và kiểm soát] duy nhất cho ứng dụng khách giao diện người dùng, có thể dựa trên trình duyệt [như ví dụ trong phần này] hoặc thiết bị di động. Máy khách chỉ cần biết URL của một máy chủ và phần phụ trợ có thể được cấu trúc lại theo ý muốn mà không cần thay đổi, đây là một lợi thế đáng kể. Có những lợi thế khác về tập trung và kiểm soát. giới hạn tốc độ, xác thực, kiểm toán và ghi nhật ký. Và triển khai một proxy ngược đơn giản thực sự đơn giản với Spring Cloud
Nếu bạn đang theo dõi mã, bạn sẽ biết rằng việc triển khai ứng dụng ở cuối phần trước hơi phức tạp, vì vậy đây không phải là nơi tuyệt vời để lặp lại. Tuy nhiên, có một nửa điểm mà chúng ta có thể bắt đầu dễ dàng hơn, khi tài nguyên phụ trợ chưa được bảo mật bằng Spring Security. Mã nguồn cho dự án này là một dự án riêng biệt trong Github nên chúng tôi sẽ bắt đầu từ đó. Nó có một máy chủ UI và một máy chủ tài nguyên và chúng đang nói chuyện với nhau. Máy chủ tài nguyên chưa có Spring Security nên chúng tôi có thể làm cho hệ thống hoạt động trước rồi thêm lớp đó
Proxy đảo ngược khai báo trong một dòng
Để biến nó thành Cổng API, máy chủ giao diện người dùng cần một tinh chỉnh nhỏ. Ở đâu đó trong cấu hình Spring, chúng ta cần thêm một chú thích
$ mvn spring-boot:runUiỨng dụng. java
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}và trong tệp cấu hình bên ngoài, chúng tôi cần ánh xạ tài nguyên cục bộ trong máy chủ giao diện người dùng sang tài nguyên từ xa trong cấu hình bên ngoài ["ứng dụng. yml"]
đăng kí. yml
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Điều này cho biết "ánh xạ các đường dẫn có mẫu/tài nguyên/** trong máy chủ này tới cùng một đường dẫn trong máy chủ từ xa tại máy chủ cục bộ. 9000". Đơn giản và hiệu quả [Được rồi, đó là 6 dòng bao gồm cả YAML, nhưng không phải lúc nào bạn cũng cần điều đó]
Tất cả những gì chúng ta cần để thực hiện công việc này là đúng nội dung trên đường dẫn lớp. Với mục đích đó, chúng tôi có một vài dòng mới trong Maven POM của chúng tôi
quả bông. xml
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Lưu ý việc sử dụng "spring-cloud-starter-zuul" - đó là POM khởi động giống như POM khởi động mùa xuân, nhưng nó chi phối các phụ thuộc mà chúng tôi cần cho proxy Zuul này. Chúng tôi cũng đang sử dụng
$ mvn spring-boot:runSử dụng Proxy trong Máy khách
Với những thay đổi đó, ứng dụng của chúng tôi vẫn hoạt động, nhưng chúng tôi chưa thực sự sử dụng proxy mới cho đến khi chúng tôi sửa đổi ứng dụng khách. May mắn thay đó là tầm thường. Chúng tôi chỉ cần hoàn nguyên thay đổi mà chúng tôi đã thực hiện từ mẫu "đơn" sang mẫu "vani" trong phần trước
Trang Chủ. thành phần. ts
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Bây giờ khi chúng tôi kích hoạt máy chủ, mọi thứ đều hoạt động và các yêu cầu đang được ủy quyền thông qua giao diện người dùng [Cổng API] đến máy chủ tài nguyên
Đơn giản hóa hơn nữa
Thậm chí còn tốt hơn. chúng tôi không cần bộ lọc CORS nữa trong máy chủ tài nguyên. Dù sao thì chúng tôi cũng đã ném cái đó vào nhau khá nhanh và lẽ ra phải là đèn đỏ mà chúng tôi phải làm bất cứ điều gì tập trung vào kỹ thuật bằng tay [đặc biệt là khi liên quan đến bảo mật]. May mắn thay, nó bây giờ là dư thừa, vì vậy chúng ta có thể vứt nó đi và quay trở lại giấc ngủ vào ban đêm
Bảo mật máy chủ tài nguyên
Bạn có thể nhớ ở trạng thái trung gian mà chúng tôi đã bắt đầu từ đó không có bảo mật nào cho máy chủ tài nguyên
Qua một bên. Thiếu bảo mật phần mềm thậm chí có thể không phải là vấn đề nếu kiến trúc mạng của bạn phản ánh kiến trúc ứng dụng [bạn chỉ có thể làm cho máy chủ tài nguyên không thể truy cập được về mặt vật lý đối với bất kỳ ai trừ máy chủ giao diện người dùng]. Như một minh chứng đơn giản về điều đó, chúng tôi có thể làm cho máy chủ tài nguyên chỉ có thể truy cập được trên máy chủ cục bộ. Chỉ cần thêm phần này vào
91 trong máy chủ tài nguyên$ spring init --dependencies web,security ui/ && cd ui
đăng kí. đặc tính
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Wow, thật dễ dàng. Làm điều đó với một địa chỉ mạng chỉ hiển thị trong trung tâm dữ liệu của bạn và bạn có một giải pháp bảo mật hoạt động cho tất cả các máy chủ tài nguyên và tất cả máy tính để bàn của người dùng
Giả sử rằng chúng tôi quyết định rằng chúng tôi cần bảo mật ở cấp độ phần mềm [rất có thể vì một số lý do]. Điều đó sẽ không thành vấn đề, bởi vì tất cả những gì chúng ta cần làm là thêm Spring Security làm phụ thuộc [trong POM của máy chủ tài nguyên]
quả bông. xml
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Điều đó đủ để cung cấp cho chúng tôi một máy chủ tài nguyên an toàn, nhưng nó sẽ không cung cấp cho chúng tôi một ứng dụng hoạt động, vì lý do tương tự mà nó không có trong Phần III. không có trạng thái xác thực được chia sẻ giữa hai máy chủ
Chia sẻ trạng thái xác thực
Chúng tôi có thể sử dụng cùng một cơ chế để chia sẻ trạng thái xác thực [và CSRF] như chúng tôi đã làm trong lần trước, tôi. e. phiên mùa xuân. Chúng tôi thêm phần phụ thuộc vào cả hai máy chủ như trước
quả bông. xml
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}nhưng lần này cấu hình đơn giản hơn nhiều vì chúng ta chỉ cần thêm cùng một khai báo
$ spring init --dependencies web,security ui/ && cd uiđăng kí. yml
$ spring init --dependencies web,security ui/ && cd uiSau đó, chúng ta có thể chuyển sang máy chủ tài nguyên. Có hai thay đổi nhỏ để thực hiện. một là tắt rõ ràng HTTP Basic trong máy chủ tài nguyên [để ngăn trình duyệt bật lên hộp thoại xác thực]
Ứng dụng tài nguyên. java
$ spring init --dependencies web,security ui/ && cd uiQua một bên. một giải pháp thay thế, cũng sẽ ngăn hộp thoại xác thực, là giữ HTTP Cơ bản nhưng thay đổi thách thức 401 thành một thứ khác ngoài "Cơ bản". Bạn có thể làm điều đó với việc triển khai một dòng của
69 trong cuộc gọi lại cấu hình$ spring init --dependencies web,security ui/ && cd ui70$ spring init --dependencies web,security ui/ && cd ui
và cách khác là yêu cầu rõ ràng chính sách tạo phiên không trạng thái trong
$ spring init --dependencies web,security ui/ && cd uiđăng kí. đặc tính
$ spring init --dependencies web,security ui/ && cd uiMiễn là redis vẫn đang chạy trong nền [sử dụng
$ mvn spring-boot:runLàm thế nào nó hoạt động?
Điều gì đang xảy ra đằng sau hậu trường bây giờ?
Động từĐường dẫnTrạng tháiPhản hồiLẤY
/
200
mục lục. html
LẤY
/*. js
200
Tài sản dạng góc cạnh
LẤY
/người sử dụng
401
Trái phép [bỏ qua]
LẤY
/nguồn
401
Truy cập trái phép vào tài nguyên
LẤY
/người sử dụng
200
Người dùng được xác thực JSON
LẤY
/nguồn
200
[Được ủy quyền] Lời chào JSON
Điều đó giống với trình tự ở cuối Phần II ngoại trừ thực tế là tên cookie hơi khác ["SESSION" thay vì "JSESSIONID"] vì chúng tôi đang sử dụng Phiên mùa xuân. Nhưng kiến trúc thì khác và yêu cầu cuối cùng tới "/resource" là đặc biệt vì nó được ủy quyền cho máy chủ tài nguyên
Chúng ta có thể thấy hoạt động của proxy ngược bằng cách xem điểm cuối "/trace" trong máy chủ giao diện người dùng [từ Spring Boot Actuator, cái mà chúng ta đã thêm cùng với các phụ thuộc Spring Cloud]. truy cập http. //máy chủ cục bộ. 8080/trace trong trình duyệt mới [nếu bạn chưa có, hãy tải plugin JSON cho trình duyệt của bạn để làm cho trình duyệt đẹp và dễ đọc]. Bạn sẽ cần xác thực bằng HTTP Basic [cửa sổ bật lên của trình duyệt], nhưng thông tin đăng nhập tương tự hợp lệ như đối với biểu mẫu đăng nhập của bạn. Tại hoặc gần đầu, bạn sẽ thấy một cặp yêu cầu giống như thế này
Cố gắng sử dụng một trình duyệt khác để không có cơ hội xác thực chéo [e. g. sử dụng Firefox nếu bạn đã sử dụng Chrome để kiểm tra giao diện người dùng] - nó sẽ không ngăn ứng dụng hoạt động nhưng sẽ khiến dấu vết khó đọc hơn nếu chúng chứa hỗn hợp xác thực từ cùng một trình duyệt
/dấu vết
$ spring init --dependencies web,security ui/ && cd uiMục thứ hai có yêu cầu từ máy khách đến cổng trên "/resource" và bạn có thể thấy cookie [được thêm bởi trình duyệt] và tiêu đề CSRF [được thêm bởi Angular như đã thảo luận trong Phần II]. Mục đầu tiên có
$ mvn spring-boot:runSự kết luận
Chúng tôi đã đề cập khá nhiều trong phần này nhưng chúng tôi đã đạt đến một điểm thực sự thú vị khi có rất ít mã soạn sẵn trong hai máy chủ của chúng tôi, cả hai máy chủ đều được bảo mật tốt và trải nghiệm người dùng không bị ảnh hưởng. Chỉ riêng điều đó thôi cũng đã là lý do để sử dụng mẫu Cổng API, nhưng thực sự chúng tôi mới chỉ tìm hiểu sơ qua về những gì có thể được sử dụng [Netflix sử dụng nó cho rất nhiều thứ]. Đọc trên Spring Cloud để tìm hiểu thêm về cách giúp dễ dàng thêm nhiều tính năng hơn vào cổng. Phần tiếp theo trong loạt bài này sẽ mở rộng kiến trúc ứng dụng một chút bằng cách trích xuất các trách nhiệm xác thực cho một máy chủ riêng biệt [mẫu Đăng nhập một lần]
Đăng nhập một lần bằng OAuth2
Trong phần này, chúng ta tiếp tục thảo luận về cách sử dụng Spring Security với Angular trong một "ứng dụng trang đơn". Ở đây chúng tôi trình bày cách sử dụng Spring Security OAuth cùng với Spring Cloud để mở rộng Cổng API của chúng tôi để thực hiện Đăng nhập một lần và xác thực mã thông báo OAuth2 cho tài nguyên phụ trợ. Đây là phần thứ năm trong một loạt các phần và bạn có thể bắt kịp các khối xây dựng cơ bản của ứng dụng hoặc xây dựng nó từ đầu bằng cách đọc phần đầu tiên hoặc bạn có thể truy cập thẳng vào mã nguồn trong Github. Trong phần trước, chúng tôi đã xây dựng một ứng dụng phân tán nhỏ sử dụng Phiên mùa xuân để xác thực tài nguyên phụ trợ và Đám mây mùa xuân để triển khai Cổng API nhúng trong máy chủ giao diện người dùng. Trong phần này, chúng tôi trích xuất các trách nhiệm xác thực cho một máy chủ riêng biệt để làm cho máy chủ giao diện người dùng của chúng tôi trở thành máy chủ đầu tiên trong số nhiều ứng dụng Đăng nhập một lần tiềm năng cho máy chủ ủy quyền. Đây là một mô hình phổ biến trong nhiều ứng dụng ngày nay, cả trong doanh nghiệp và các công ty khởi nghiệp xã hội. Chúng tôi sẽ sử dụng máy chủ OAuth2 làm trình xác thực để chúng tôi cũng có thể sử dụng máy chủ này để cấp mã thông báo cho máy chủ tài nguyên phụ trợ. Spring Cloud sẽ tự động chuyển tiếp mã thông báo truy cập đến chương trình phụ trợ của chúng tôi và cho phép chúng tôi đơn giản hóa hơn nữa việc triển khai cả giao diện người dùng và máy chủ tài nguyên
Lời nhắc nhở. nếu bạn đang làm việc qua phần này với ứng dụng mẫu, hãy đảm bảo xóa bộ nhớ cache của trình duyệt khỏi cookie và thông tin xác thực HTTP Basic. Trong Chrome, cách tốt nhất để làm điều đó cho một máy chủ là mở một cửa sổ ẩn danh mới
Tạo máy chủ ủy quyền OAuth2
Bước đầu tiên của chúng tôi là tạo một máy chủ mới để xử lý xác thực và quản lý mã thông báo. Làm theo các bước trong Phần I, chúng ta có thể bắt đầu với Spring Boot Initializr. e. g. sử dụng curl trên hệ thống giống UN*X
$ spring init --dependencies web,security ui/ && cd uiSau đó, bạn có thể nhập dự án đó [theo mặc định là dự án Maven Java bình thường] vào IDE yêu thích của mình hoặc chỉ làm việc với các tệp và "mvn" trên dòng lệnh
Thêm các phụ thuộc OAuth2
Chúng tôi cần thêm các phụ thuộc Spring OAuth, vì vậy trong POM của chúng tôi, chúng tôi thêm
quả bông. xml
$ spring init --dependencies web,security ui/ && cd uiMáy chủ ủy quyền khá dễ triển khai. Một phiên bản tối thiểu trông như thế này
Ứng dụng Authserver. java
$ spring init --dependencies web,security ui/ && cd uiChúng ta chỉ phải làm thêm 1 việc nữa [sau khi thêm
$ mvn spring-boot:runđăng kí. đặc tính
$ spring init --dependencies web,security ui/ && cd uiĐiều này đăng ký một ứng dụng khách "acme" với một bí mật và một số loại cấp phép được ủy quyền, bao gồm cả "authorization_code"
Bây giờ, hãy để nó chạy trên cổng 9999, với mật khẩu có thể dự đoán được để kiểm tra
đăng kí. đặc tính
$ spring init --dependencies web,security ui/ && cd uiChúng tôi cũng đặt đường dẫn ngữ cảnh để nó không sử dụng mặc định ["/"] vì nếu không, bạn có thể nhận cookie cho các máy chủ khác trên máy chủ cục bộ được gửi đến máy chủ sai. Vì vậy, hãy chạy máy chủ và chúng tôi có thể đảm bảo rằng nó đang hoạt động
$ mvn spring-boot:runhoặc bắt đầu phương thức
$ spring init --dependencies web,security ui/ && cd uiKiểm tra máy chủ ủy quyền
Máy chủ của chúng tôi đang sử dụng cài đặt bảo mật mặc định của Spring Boot, vì vậy giống như máy chủ trong Phần I, nó sẽ được bảo vệ bằng xác thực HTTP Basic. Để bắt đầu cấp mã thông báo ủy quyền, bạn truy cập điểm cuối ủy quyền, e. g. tại http. //máy chủ cục bộ. 9999/uaa/oauth/ủy quyền?response_type=code&client_id=acme&redirect_uri=http. //thí dụ. com sau khi bạn đã xác thực, bạn sẽ nhận được một chuyển hướng đến ví dụ. com có đính kèm mã ủy quyền nhé e. g. http. //thí dụ. com/?code=jYWioI
cho các mục đích của ứng dụng mẫu này, chúng tôi đã tạo một ứng dụng khách "acme" không có chuyển hướng đã đăng ký, đây là thứ cho phép chúng tôi lấy ví dụ chuyển hướng. com. Trong ứng dụng sản xuất, bạn phải luôn đăng ký chuyển hướng [và sử dụng HTTPS]
Mã này có thể được đổi lấy mã thông báo truy cập bằng thông tin xác thực ứng dụng khách "acme" trên điểm cuối mã thông báo
$ spring init --dependencies web,security ui/ && cd uiMã thông báo truy cập là một UUID ["2219199c…"], được hỗ trợ bởi kho lưu trữ mã thông báo trong bộ nhớ trong máy chủ. Chúng tôi cũng đã nhận được mã thông báo làm mới mà chúng tôi có thể sử dụng để nhận mã thông báo truy cập mới khi mã thông báo hiện tại hết hạn
vì chúng tôi đã cho phép cấp "mật khẩu" cho ứng dụng khách "acme", chúng tôi cũng có thể nhận mã thông báo trực tiếp từ điểm cuối mã thông báo bằng thông tin xác thực người dùng và curl thay vì mã ủy quyền. Điều này không phù hợp với ứng dụng khách dựa trên trình duyệt, nhưng nó hữu ích để thử nghiệm
Nếu bạn nhấp vào liên kết ở trên, bạn sẽ thấy giao diện người dùng nhãn trắng do Spring OAuth cung cấp. Để bắt đầu, chúng tôi sẽ sử dụng cái này và chúng tôi có thể quay lại sau để tăng cường nó như chúng tôi đã làm trong Phần II cho máy chủ khép kín
Thay đổi máy chủ tài nguyên
Nếu chúng tôi tiếp tục từ Phần IV, máy chủ tài nguyên của chúng tôi đang sử dụng Phiên mùa xuân để xác thực, vì vậy chúng tôi có thể loại bỏ nó và thay thế nó bằng Spring OAuth. Chúng tôi cũng cần xóa các phụ thuộc Phiên mùa xuân và Redis, vì vậy hãy thay thế cái này
quả bông. xml
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Với cái này
quả bông. xml
$ spring init --dependencies web,security ui/ && cd uivà sau đó xóa phiên
$ spring init --dependencies web,security ui/ && cd ui$ mvn spring-boot:runỨng dụng tài nguyên. java
$ spring init --dependencies web,security ui/ && cd uiVới một thay đổi đó, ứng dụng đã sẵn sàng thách thức mã thông báo truy cập thay vì HTTP Basic, nhưng chúng tôi cần thay đổi cấu hình để thực sự kết thúc quy trình. Chúng tôi sẽ thêm một lượng nhỏ cấu hình bên ngoài [trong "ứng dụng. properties"] để cho phép máy chủ tài nguyên giải mã mã thông báo được cung cấp và xác thực người dùng
đăng kí. đặc tính
$ spring init --dependencies web,security ui/ && cd uiĐiều này cho máy chủ biết rằng nó có thể sử dụng mã thông báo để truy cập điểm cuối "/user" và sử dụng điểm cuối đó để lấy thông tin xác thực [nó hơi giống điểm cuối "/me" trong Facebook API]. Thực tế, nó cung cấp một cách để máy chủ tài nguyên giải mã mã thông báo, như được thể hiện bằng giao diện
$ mvn spring-boot:runChạy ứng dụng và truy cập trang chủ bằng ứng dụng khách dòng lệnh
$ spring init --dependencies web,security ui/ && cd uivà bạn sẽ thấy 401 với tiêu đề "WWW-Authenticate" cho biết rằng nó muốn có mã thông báo mang
$ mvn spring-boot:run$ mvn spring-boot:runTriển khai điểm cuối người dùng
Trên máy chủ ủy quyền, chúng tôi có thể dễ dàng thêm điểm cuối đó
Ứng dụng Authserver. java
$ spring init --dependencies web,security ui/ && cd uiChúng tôi đã thêm một
$ spring init --dependencies web,security ui/ && cd ui$ mvn spring-boot:runVới điểm cuối đó, chúng tôi có thể kiểm tra nó và tài nguyên lời chào, vì cả hai đều chấp nhận mã thông báo mang được tạo bởi máy chủ ủy quyền
$ spring init --dependencies web,security ui/ && cd ui[thay thế giá trị của mã thông báo truy cập mà bạn nhận được từ máy chủ ủy quyền của riêng mình để mã đó tự hoạt động]
Máy chủ giao diện người dùng
Phần cuối cùng của ứng dụng này mà chúng ta cần hoàn thành là máy chủ giao diện người dùng, trích xuất phần xác thực và ủy quyền cho máy chủ ủy quyền. Vì vậy, như với máy chủ tài nguyên, trước tiên chúng ta cần xóa các phụ thuộc Spring Session và Redis và thay thế chúng bằng Spring OAuth2. Bởi vì chúng tôi đang sử dụng Zuul trong lớp giao diện người dùng nên chúng tôi thực sự sử dụng trực tiếp
$ mvn spring-boot:run$ mvn spring-boot:runKhi đã xong, chúng ta cũng có thể xóa bộ lọc phiên và điểm cuối "/user" đồng thời thiết lập ứng dụng để chuyển hướng đến máy chủ ủy quyền [sử dụng chú thích
$ mvn spring-boot:runUiỨng dụng. java
$ spring init --dependencies web,security ui/ && cd uiNhớ lại từ Phần IV rằng máy chủ giao diện người dùng, nhờ có
$ mvn spring-boot:runđăng kí. yml
$ spring init --dependencies web,security ui/ && cd uiCuối cùng, chúng ta cần thay đổi ứng dụng thành
$ mvn spring-boot:run$ mvn spring-boot:runBảo MậtCấu Hình. java
$ spring init --dependencies web,security ui/ && cd uiNhững thay đổi chính [ngoài tên lớp cơ sở] là các trình đối sánh đi vào phương thức của riêng chúng và không cần
$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd ui$ mvn spring-boot:runNgoài ra còn có một số thuộc tính cấu hình bên ngoài bắt buộc để chú thích
$ mvn spring-boot:run$ mvn spring-boot:runđăng kí. yml
$ spring init --dependencies web,security ui/ && cd uiPhần lớn trong số đó là về ứng dụng khách OAuth2 ["acme"] và vị trí máy chủ ủy quyền. Ngoài ra còn có một
$ mvn spring-boot:runNếu bạn muốn ứng dụng giao diện người dùng có thể tự động làm mới mã thông báo truy cập đã hết hạn, bạn phải đưa một
$ mvn spring-boot:run$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd uitrong khách hàng
Có một số điều chỉnh đối với ứng dụng giao diện người dùng ở giao diện người dùng mà chúng tôi vẫn cần thực hiện để kích hoạt chuyển hướng đến máy chủ ủy quyền. Trong bản demo đơn giản này, chúng tôi có thể loại bỏ ứng dụng Angular xuống các yếu tố cần thiết để bạn có thể thấy những gì đang diễn ra rõ ràng hơn. Vì vậy, hiện tại chúng tôi từ bỏ việc sử dụng các biểu mẫu hoặc tuyến đường và chúng tôi quay lại một thành phần Góc duy nhất
ứng dụng. thành phần. ts
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ mvn spring-boot:runBây giờ chúng ta cần tạo mẫu cho thành phần mới này
ứng dụng. thành phần. html
$ spring init --dependencies web,security ui/ && cd uivà đưa nó vào trang chủ dưới dạng
$ mvn spring-boot:runLưu ý rằng liên kết điều hướng cho "Đăng nhập" là liên kết thông thường có
$ mvn spring-boot:runLàm thế nào nó hoạt động?
Chạy tất cả các máy chủ cùng nhau ngay bây giờ và truy cập giao diện người dùng trong trình duyệt tại http. //máy chủ cục bộ. 8080. Nhấp vào liên kết "đăng nhập" và bạn sẽ được chuyển hướng đến máy chủ ủy quyền để xác thực [cửa sổ bật lên HTTP Cơ bản] và phê duyệt cấp mã thông báo [HTML nhãn trắng], trước khi được chuyển hướng đến trang chủ trong giao diện người dùng với lời chào được tìm nạp từ OAuth2
Có thể nhìn thấy các tương tác giữa trình duyệt và chương trình phụ trợ trong trình duyệt của bạn nếu bạn sử dụng một số công cụ dành cho nhà phát triển [thường là F12 mở ra, hoạt động trong Chrome theo mặc định, có thể yêu cầu plugin trong Firefox]. Đây là một bản tóm tắt
Động từĐường dẫnTrạng tháiPhản hồiLẤY
/
200
mục lục. html
LẤY
/*. js
200
Tài sản từ góc
LẤY
/người sử dụng
302
Chuyển hướng đến trang đăng nhập
LẤY
/đăng nhập
302
Chuyển hướng đến máy chủ xác thực
LẤY
[uaa]/oauth/ủy quyền
401
[làm ngơ]
LẤY
/đăng nhập
302
Chuyển hướng đến máy chủ xác thực
LẤY
[uaa]/oauth/ủy quyền
200
Xác thực HTTP cơ bản xảy ra ở đây
BƯU KIỆN
[uaa]/oauth/ủy quyền
302
Người dùng phê duyệt cấp, chuyển hướng đến /đăng nhập
LẤY
/đăng nhập
302
Chuyển hướng đến trang chủ
LẤY
/người sử dụng
200
[Được ủy quyền] Người dùng được xác thực JSON
LẤY
/ứng dụng. html
200
HTML một phần cho trang chủ
LẤY
/nguồn
200
[Được ủy quyền] Lời chào JSON
Các yêu cầu có tiền tố [uaa] là tới máy chủ ủy quyền. Các phản hồi được đánh dấu là "bỏ qua" là các phản hồi mà Angular nhận được trong cuộc gọi XHR và vì chúng tôi không xử lý dữ liệu đó nên chúng bị loại bỏ trên sàn. Chúng tôi tìm kiếm một người dùng được xác thực trong trường hợp tài nguyên "/user", nhưng vì nó không có trong cuộc gọi đầu tiên nên phản hồi đó bị hủy
Trong điểm cuối "/trace" của giao diện người dùng [cuộn xuống dưới cùng], bạn sẽ thấy các yêu cầu phụ trợ được ủy quyền cho "/user" và "/resource", với
$ mvn spring-boot:run$ mvn spring-boot:run$ mvn spring-boot:runNhư trong các phần trước, hãy thử sử dụng một trình duyệt khác cho "/trace" để không có khả năng xác thực chéo [e. g. sử dụng Firefox nếu bạn đã sử dụng Chrome để kiểm tra giao diện người dùng]
Trải nghiệm đăng xuất
Nếu bạn nhấp vào liên kết "đăng xuất", bạn sẽ thấy trang chủ thay đổi [lời chào không còn hiển thị] vì vậy người dùng không còn được xác thực với máy chủ giao diện người dùng. Tuy nhiên, hãy nhấp lại vào "đăng nhập" và bạn thực sự không cần phải quay lại chu trình xác thực và phê duyệt trong máy chủ ủy quyền [vì bạn chưa đăng xuất khỏi đó]. Các ý kiến sẽ được chia ra về việc liệu đó có phải là trải nghiệm người dùng mong muốn hay không và đó có phải là một vấn đề nổi tiếng phức tạp hay không [Đăng xuất một lần. Bài báo Science Direct và tài liệu Shibboleth]. Trải nghiệm người dùng lý tưởng có thể không khả thi về mặt kỹ thuật và đôi khi bạn cũng phải nghi ngờ rằng người dùng thực sự muốn những gì họ nói họ muốn. "Tôi muốn 'đăng xuất' để đăng xuất tôi" nghe có vẻ đơn giản nhưng câu trả lời rõ ràng là "Đăng xuất khỏi cái gì? Bạn muốn đăng xuất khỏi tất cả các hệ thống do máy chủ SSO này kiểm soát hay chỉ hệ thống mà bạn
Sự kết luận
Đây gần như là kết thúc chuyến tham quan nông cạn của chúng tôi thông qua ngăn xếp Spring Security và Angular. Hiện tại chúng tôi có một kiến trúc đẹp với các trách nhiệm rõ ràng trong ba thành phần riêng biệt, Cổng giao diện người dùng/API, máy chủ tài nguyên và máy chủ ủy quyền/người cấp mã thông báo. Số lượng mã phi kinh doanh trong tất cả các lớp hiện ở mức tối thiểu và thật dễ dàng để biết nơi cần mở rộng và cải thiện việc triển khai với nhiều logic kinh doanh hơn. Các bước tiếp theo sẽ là dọn dẹp giao diện người dùng trong máy chủ ủy quyền của chúng tôi và có thể thêm một số thử nghiệm khác, bao gồm các thử nghiệm trên ứng dụng khách JavaScript. Một nhiệm vụ thú vị khác là trích xuất tất cả mã tấm nồi hơi và đưa nó vào thư viện [e. g. "spring-security-angular"] chứa cấu hình tự động cấu hình Spring Security và Spring Session và một số tài nguyên webjars cho bộ điều khiển điều hướng trong phần Góc. Sau khi đọc các phần trong loạt bài này, bất kỳ ai đang hy vọng tìm hiểu hoạt động bên trong của Angular hoặc Spring Security có thể sẽ thất vọng, nhưng nếu bạn muốn xem cách chúng có thể hoạt động tốt cùng nhau và một chút cấu hình có thể hoạt động như thế nào. . Spring Cloud là phiên bản mới và các mẫu này yêu cầu ảnh chụp nhanh khi chúng được viết, nhưng có sẵn các ứng cử viên phát hành và sắp có bản phát hành GA, vì vậy hãy kiểm tra và gửi một số phản hồi qua Github hoặc gitter. Tôi
Phần tiếp theo trong loạt bài này là về các quyết định truy cập [ngoài xác thực] và sử dụng nhiều ứng dụng giao diện người dùng phía sau cùng một proxy
phụ lục. Giao diện người dùng Bootstrap và Mã thông báo JWT cho Máy chủ ủy quyền
Bạn sẽ tìm thấy một phiên bản khác của ứng dụng này trong mã nguồn của Github, phiên bản này có trang đăng nhập đẹp mắt và trang phê duyệt người dùng được triển khai tương tự như cách chúng tôi đã thực hiện với trang đăng nhập trong Phần II. Nó cũng sử dụng JWT để mã hóa mã thông báo, vì vậy thay vì sử dụng điểm cuối "/user", máy chủ tài nguyên có thể lấy đủ thông tin ra khỏi mã thông báo để thực hiện xác thực đơn giản. Ứng dụng khách của trình duyệt vẫn sử dụng nó, được ủy quyền thông qua máy chủ giao diện người dùng, để nó có thể xác định xem người dùng có được xác thực hay không [không cần phải làm điều đó thường xuyên, so với số lượng lệnh gọi có thể có đến máy chủ tài nguyên trong một ứng dụng thực
Nhiều ứng dụng giao diện người dùng và một cổng
Trong phần này, chúng ta tiếp tục thảo luận về cách sử dụng Spring Security với Angular trong một "ứng dụng trang đơn". Ở đây, chúng tôi trình bày cách sử dụng Phiên làm việc mùa xuân cùng với Đám mây mùa xuân để kết hợp các tính năng của hệ thống mà chúng tôi đã xây dựng trong phần II và IV, và thực sự kết thúc việc xây dựng 3 ứng dụng trang đơn với các trách nhiệm hoàn toàn khác nhau. Mục đích là xây dựng một Cổng [như trong phần IV] không chỉ được sử dụng cho tài nguyên API mà còn để tải giao diện người dùng từ máy chủ phụ trợ. Chúng tôi đơn giản hóa các bit sắp xếp mã thông báo của phần II bằng cách sử dụng Cổng để chuyển qua xác thực đến các phụ trợ. Sau đó, chúng tôi mở rộng hệ thống để cho thấy cách chúng tôi có thể đưa ra quyết định truy cập chi tiết, cục bộ trong phần phụ trợ, trong khi vẫn kiểm soát danh tính và xác thực tại Cổng. Đây là một mô hình rất hiệu quả để xây dựng các hệ thống phân tán nói chung và có một số lợi ích mà chúng tôi có thể khám phá khi giới thiệu các tính năng trong mã mà chúng tôi xây dựng
Lời nhắc nhở. nếu bạn đang làm việc qua phần này với ứng dụng mẫu, hãy đảm bảo xóa bộ nhớ cache của trình duyệt khỏi cookie và thông tin xác thực HTTP Basic. Trong Chrome, cách tốt nhất để làm điều đó là mở một cửa sổ ẩn danh mới
Kiến trúc mục tiêu
Đây là hình ảnh của hệ thống cơ bản mà chúng ta sẽ xây dựng để bắt đầu
Giống như các ứng dụng mẫu khác trong loạt bài này, nó có giao diện người dùng [HTML và JavaScript] và máy chủ tài nguyên. Như ví dụ ở mục IV nó có Gateway nhưng ở đây nó tách biệt, không thuộc UI. Giao diện người dùng thực sự trở thành một phần của chương trình phụ trợ, cho chúng ta nhiều lựa chọn hơn để định cấu hình lại và triển khai lại các tính năng, đồng thời mang lại những lợi ích khác như chúng ta sẽ thấy
Trình duyệt truy cập Cổng cho mọi thứ và nó không cần biết về kiến trúc của phần phụ trợ [về cơ bản, nó không biết rằng có phần phụ trợ]. Một trong những điều mà trình duyệt thực hiện trong Cổng này là xác thực, e. g. nó sẽ gửi tên người dùng và mật khẩu như trong Phần II và đổi lại nó sẽ nhận được một cookie. Trong các yêu cầu tiếp theo, nó sẽ tự động hiển thị cookie và Cổng sẽ chuyển cookie đó đến các chương trình phụ trợ. Không cần viết mã trên máy khách để cho phép chuyển cookie. Các chương trình phụ trợ sử dụng cookie để xác thực và vì tất cả các thành phần chia sẻ một phiên nên chúng chia sẻ cùng thông tin về người dùng. Tương phản điều này với Phần V trong đó cookie phải được chuyển đổi thành mã thông báo truy cập trong Cổng và mã thông báo truy cập sau đó phải được giải mã độc lập bởi tất cả các thành phần phụ trợ
Như trong Phần IV, Cổng đơn giản hóa sự tương tác giữa máy khách và máy chủ và nó thể hiện một bề mặt nhỏ, được xác định rõ ràng để xử lý vấn đề bảo mật. Ví dụ: chúng tôi không cần phải lo lắng về Chia sẻ tài nguyên nguồn gốc chéo, đây là một điều đáng hoan nghênh vì rất dễ hiểu sai
Mã nguồn cho dự án hoàn chỉnh mà chúng ta sẽ xây dựng có trong Github tại đây, vì vậy bạn chỉ cần sao chép dự án và làm việc trực tiếp từ đó nếu muốn. Có một thành phần bổ sung ở trạng thái kết thúc của hệ thống này ["quản trị viên kép"] vì vậy hãy bỏ qua điều đó ngay bây giờ
Xây dựng phần phụ trợ
Trong kiến trúc này, phần phụ trợ rất giống với mẫu "phiên mùa xuân" mà chúng tôi đã tạo trong Phần III, ngoại trừ việc nó không thực sự cần trang đăng nhập. Cách dễ nhất để đạt được những gì chúng ta muốn ở đây có lẽ là sao chép máy chủ "tài nguyên" từ Phần III và lấy giao diện người dùng từ mẫu "cơ bản" trong Phần I. Để chuyển từ giao diện người dùng "cơ bản" sang giao diện chúng ta muốn ở đây, chúng ta chỉ cần thêm một vài thành phần phụ thuộc [như khi chúng ta sử dụng Phiên mùa xuân lần đầu tiên trong Phần III]
quả bông. xml
import { Component } from '@angular/core';
@Component[{
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}]
export class AppComponent {
title = 'Demo';
greeting = {'id': 'XXX', 'content': 'Hello World'};
}Vì đây hiện là giao diện người dùng nên không cần điểm cuối "/resource". Khi bạn hoàn thành việc đó, bạn sẽ có một ứng dụng Angular rất đơn giản [giống như trong mẫu "cơ bản"], giúp đơn giản hóa rất nhiều việc kiểm tra và suy luận về hành vi của nó
Cuối cùng, chúng tôi muốn máy chủ này chạy dưới dạng phụ trợ, vì vậy chúng tôi sẽ cung cấp cho nó một cổng không mặc định để nghe [trong
$ spring init --dependencies web,security ui/ && cd uiđăng kí. đặc tính
$ spring init --dependencies web,security ui/ && cd uiNếu đó là toàn bộ nội dung
$ spring init --dependencies web,security ui/ && cd uiMáy chủ tài nguyên
Máy chủ tài nguyên dễ dàng tạo từ một trong các mẫu hiện có của chúng tôi. Nó giống như máy chủ tài nguyên "phiên mùa xuân" trong Phần III. chỉ là Phiên mùa xuân điểm cuối "/resource" để lấy dữ liệu phiên phân tán. Chúng tôi muốn máy chủ này có cổng không mặc định để lắng nghe và chúng tôi muốn có thể tra cứu xác thực trong phiên, vì vậy chúng tôi cần cổng này [trong
$ spring init --dependencies web,security ui/ && cd uiđăng kí. đặc tính
$ spring init --dependencies web,security ui/ && cd uiChúng tôi sẽ ĐĂNG các thay đổi đối với tài nguyên thông báo của mình, đây là một tính năng mới trong hướng dẫn này. Điều đó có nghĩa là chúng tôi sẽ cần bảo vệ CSRF trong phần phụ trợ và chúng tôi cần thực hiện thủ thuật thông thường để Spring Security hoạt động tốt với Angular
$ spring init --dependencies web,security ui/ && cd uiMẫu đã hoàn thành có ở đây trong github nếu bạn muốn xem qua
Cổng
Đối với triển khai ban đầu của Cổng [thứ đơn giản nhất có thể hoạt động], chúng ta chỉ cần lấy một ứng dụng web Spring Boot trống và thêm chú thích
$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd uiSau đó, bạn có thể nhập dự án đó [theo mặc định là dự án Maven Java bình thường] vào IDE yêu thích của mình hoặc chỉ làm việc với các tệp và "mvn" trên dòng lệnh. Có một phiên bản trong github nếu bạn muốn tiếp tục từ đó, nhưng nó có một số tính năng bổ sung mà chúng tôi chưa cần
Bắt đầu từ ứng dụng Initializr trống, chúng tôi thêm phần phụ thuộc Phiên mùa xuân [như trong giao diện người dùng ở trên]. Cổng đã sẵn sàng để chạy, nhưng nó chưa biết về các dịch vụ phụ trợ của chúng tôi, vì vậy, hãy thiết lập nó trong
$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd uiđăng kí. yml
$ spring init --dependencies web,security ui/ && cd uiCó 2 tuyến trong proxy, cả hai đều chuyển cookie xuôi dòng bằng cách sử dụng thuộc tính
$ mvn spring-boot:runlên và chạy
Bây giờ chúng tôi có ba thành phần, chạy trên 3 cổng. Nếu bạn trỏ trình duyệt tại http. //máy chủ cục bộ. 8080/ui/, bạn sẽ nhận được thử thách HTTP Basic và bạn có thể xác thực là "người dùng/mật khẩu" [thông tin đăng nhập của bạn trong Cổng] và sau khi thực hiện điều đó, bạn sẽ thấy lời chào trong Giao diện người dùng, thông qua lệnh gọi phụ trợ thông qua
Có thể nhìn thấy các tương tác giữa trình duyệt và chương trình phụ trợ trong trình duyệt của bạn nếu bạn sử dụng một số công cụ dành cho nhà phát triển [thường là F12 mở ra, hoạt động trong Chrome theo mặc định, có thể yêu cầu plugin trong Firefox]. Đây là một bản tóm tắt
Động từĐường dẫnTrạng tháiPhản hồiLẤY
/ui/
401
Trình duyệt nhắc xác thực
LẤY
/ui/
200
mục lục. html
LẤY
/ui/*. js
200
Tài sản góc
LẤY
/ui/js/xin chào. js
200
logic ứng dụng
LẤY
/ui/người dùng
200
xác thực
LẤY
/nguồn/
200
Lời chào JSON
Bạn có thể không nhìn thấy 401 vì trình duyệt coi tải trang chủ là một tương tác đơn lẻ. Tất cả các yêu cầu đều được ủy quyền [chưa có nội dung nào trong Cổng, ngoài các điểm cuối của Bộ truyền động để quản lý]
Hoan hô, nó hoạt động. Bạn có hai máy chủ phụ trợ, một trong số đó là giao diện người dùng, mỗi máy chủ có khả năng độc lập và có thể được kiểm tra riêng biệt và chúng được kết nối với nhau bằng một Cổng an toàn mà bạn kiểm soát và bạn đã định cấu hình xác thực cho cổng đó. Nếu các chương trình phụ trợ không thể truy cập được vào trình duyệt thì điều đó không thành vấn đề [trên thực tế, đó có thể là một lợi thế vì nó cho phép bạn kiểm soát nhiều hơn đối với bảo mật vật lý]
Adding a Login Form
Just as in the "basic" sample in Section I we can now add a login form to the Gateway, e. g. bằng cách sao chép mã từ Phần II. When we do that we can also add some basic navigation elements in the Gateway, so the user doesn’t have to know the path to the UI backend in the proxy. So let’s first copy the static assets from the "single" UI into the Gateway, delete the message rendering and insert a login form into our home page [in the
$ mvn spring-boot:runứng dụng. html
$ spring init --dependencies web,security ui/ && cd uiThay vì hiển thị thông báo, chúng tôi sẽ có một nút điều hướng lớn đẹp mắt
mục lục. html
$ spring init --dependencies web,security ui/ && cd uiNếu bạn đang xem mẫu trong github, nó cũng có một thanh điều hướng tối thiểu với nút "Đăng xuất". Here’s the login form in a screenshot
To support the login form we need some TypeScript with a component implementing the
$ spring init --dependencies web,security ui/ && cd ui$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd uiứng dụng. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiwhere the implementation of the
$ spring init --dependencies web,security ui/ && cd uiWe can use the
$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd uiIf we run this enhanced Gateway, instead of having to remember the URL for the UI we can just load the home page and follow links. Here’s the home page for an authenticated user
Granular Access Decisions in the Backend
Up to now our application is functionally very similar to the one in Section III or Section IV, but with an additional dedicated Gateway. The advantage of the extra layer may not be yet apparent, but we can emphasise it by expanding the system a bit. Suppose we want to use that Gateway to expose another backend UI, for users to "administrate" the content in the main UI, and that we want to restrict access to this feature to users with special roles. So we will add an "Admin" application behind the proxy, and the system will look like this
There is a new component [Admin] and a new route in the Gateway in
$ mvn spring-boot:runđăng kí. yml
$ spring init --dependencies web,security ui/ && cd uiThe fact that the existing UI is available to users in the "USER" role is indicated on the block diagram above in the Gateway box [green lettering], as is the fact that the "ADMIN" role is needed to go to the Admin application. The access decision for the "ADMIN" role could be applied in the Gateway, in which case it would appear in a
$ mvn spring-boot:runSo first, create a new Spring Boot application, or copy the UI and edit it. You won’t need to change much in the UI app except the name to start with. The finished app is in Github here
Suppose that within the Admin application we want to distinguish between "READER" and "WRITER" roles, so that we can permit [let’s say] users who are auditors to view the changes made by the main admin users. This is a granular access decision, where the rule is only known, and should only be known, in the backend application. In the Gateway we only need to ensure that our user accounts have the roles needed, and this information is available, but the Gateway doesn’t need to know how to interpret it. In the Gateway we create user accounts to keep the sample application self-contained
Bảo MậtCấu Hình. lớp
$ spring init --dependencies web,security ui/ && cd uitrong đó người dùng "quản trị viên" đã được tăng cường với 3 vai trò mới ["QUẢN TRỊ", "NGƯỜI ĐỌC" và "NGƯỜI VIẾT"] và chúng tôi cũng đã thêm một người dùng "kiểm toán" với quyền truy cập "QUẢN TRỊ", nhưng không phải "NGƯỜI VIẾT"
Trong hệ thống sản xuất, dữ liệu tài khoản người dùng sẽ được quản lý trong cơ sở dữ liệu phụ trợ [rất có thể là dịch vụ thư mục], không được mã hóa cứng trong Cấu hình mùa xuân. Các ứng dụng mẫu kết nối với cơ sở dữ liệu như vậy có thể dễ dàng tìm thấy trên internet, chẳng hạn như trong Mẫu bảo mật mùa xuân
Các quyết định truy cập đi trong ứng dụng Quản trị. Đối với vai trò "QUẢN TRỊ" [được yêu cầu trên toàn cầu cho phần phụ trợ này], chúng tôi thực hiện trong Spring Security
Bảo MậtCấu Hình. java
$ spring init --dependencies web,security ui/ && cd uiĐối với các vai trò "READER" và "WRITER", bản thân ứng dụng được phân chia và vì ứng dụng được triển khai bằng JavaScript nên đó là nơi chúng tôi cần đưa ra quyết định về quyền truy cập. Một cách để làm điều này là có một trang chủ với chế độ xem được tính toán được nhúng trong đó thông qua bộ định tuyến
ứng dụng. thành phần. html
$ spring init --dependencies web,security ui/ && cd uiLộ trình được tính khi thành phần tải
ứng dụng. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiđiều đầu tiên mà ứng dụng thực hiện là kiểm tra xem người dùng có được xác thực hay không và tính toán tuyến đường bằng cách xem dữ liệu người dùng. Các tuyến đường được khai báo trong mô-đun chính
ứng dụng. mô-đun. ts
$ spring init --dependencies web,security ui/ && cd uiMỗi thành phần đó [một thành phần cho mỗi tuyến đường] phải được triển khai riêng. Đây là
$ mvn spring-boot:runđọc. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiđọc. thành phần. html
$ spring init --dependencies web,security ui/ && cd ui$ mvn spring-boot:runviết. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiviết. thành phần. html
$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd ui$ spring init --dependencies web,security ui/ && cd uiứng dụng. Dịch vụ. ts
$ spring init --dependencies web,security ui/ && cd uiĐể hỗ trợ chức năng này trên phần phụ trợ, chúng tôi cần điểm cuối
$ spring init --dependencies web,security ui/ && cd uiỨng dụng quản trị. java
$ spring init --dependencies web,security ui/ && cd uitên vai trò quay trở lại từ điểm cuối "/user" với tiền tố "ROLE_" để chúng tôi có thể phân biệt chúng với các loại cơ quan khác [đó là một điều Bảo mật mùa xuân]. Do đó, tiền tố "ROLE_" là cần thiết trong JavaScript, nhưng không phải trong cấu hình Bảo mật mùa xuân, trong đó rõ ràng từ các tên phương thức rằng "vai trò" là trọng tâm của các hoạt động
Các thay đổi trong Cổng hỗ trợ giao diện người dùng quản trị
Chúng ta cũng sẽ sử dụng vai trò để đưa ra quyết định truy cập trong Cổng [để chúng ta có thể hiển thị một liên kết đến giao diện người dùng quản trị một cách có điều kiện], vì vậy chúng ta cũng nên thêm "vai trò" vào điểm cuối "/user" trong Cổng. Khi đã có, chúng ta có thể thêm một số JavaScript để thiết lập cờ để cho biết rằng người dùng hiện tại là "QUẢN VIÊN". Trong hàm
$ spring init --dependencies web,security ui/ && cd uiứng dụng. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uivà chúng tôi cũng cần đặt lại cờ
$ mvn spring-boot:run$ mvn spring-boot:runứng dụng. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uivà sau đó trong HTML, chúng tôi có thể hiển thị một liên kết mới một cách có điều kiện
ứng dụng. thành phần. html
$ spring init --dependencies web,security ui/ && cd uiChạy tất cả các ứng dụng và truy cập http. //máy chủ cục bộ. 8080 để xem kết quả. Mọi thứ sẽ hoạt động tốt và giao diện người dùng sẽ thay đổi tùy thuộc vào người dùng hiện được xác thực
Tại sao chúng ta ở đây?
Bây giờ chúng tôi có một hệ thống nhỏ xinh xắn với 2 giao diện người dùng độc lập và máy chủ Tài nguyên phụ trợ, tất cả đều được bảo vệ bởi cùng một xác thực trong Cổng. Thực tế là Cổng hoạt động như một micro-proxy khiến việc triển khai các vấn đề bảo mật phụ trợ trở nên cực kỳ đơn giản và họ có thể tự do tập trung vào các mối quan tâm kinh doanh của riêng mình. Việc sử dụng Phiên mùa xuân đã [một lần nữa] tránh được rất nhiều rắc rối và lỗi tiềm ẩn
A powerful feature is that the backends can independently have any kind of authentication they like [e. g. bạn có thể truy cập trực tiếp vào giao diện người dùng nếu bạn biết địa chỉ thực của nó và một bộ thông tin đăng nhập cục bộ]. Cổng áp đặt một tập hợp các ràng buộc hoàn toàn không liên quan, miễn là nó có thể xác thực người dùng và gán siêu dữ liệu cho họ đáp ứng các quy tắc truy cập trong phần phụ trợ. Đây là một thiết kế tuyệt vời để có thể phát triển và kiểm tra độc lập các thành phần phụ trợ. If we wanted to, we could go back to an external OAuth2 server [like in Section V, or even something completely different] for the authentication at the Gateway, and the backends would not need to be touched
A bonus feature of this architecture [single Gateway controlling authentication, and shared session token across all components] is that "Single Logout", a feature we identified as difficult to implement in Section V, comes for free. To be more precise, one particular approach to the user experience of single logout is automatically available in our finished system. if a user logs out of any of the UIs [Gateway, UI backend or Admin backend], he is logged out of all the others, assuming that each individual UI implemented a "logout" feature the same way [invalidating the session]
Thanks. I would like to thank again everyone who helped me develop this series, and in particular Rob Winch and Thorsten Späth for their careful reviews of the sections and sources code. Since Section I was published it hasn’t changed much but all the other parts have evolved in response to comments and insights from readers, so thank you also to anyone who read the sections and took the trouble to join in the discussion
Testing an Angular Application
In this section we continue our discussion of how to use Spring Security with Angular in a "single page application". Here we show how to write and run unit tests for the client-side code using the Angular test framework. You can catch up on the basic building blocks of the application or build it from scratch by reading the first section, or you can just go straight to the source code in Github [the same source code as Part I, but with tests now added]. This section actually has very little code using Spring or Spring Security, but it covers the client-side testing in a way that might not be so easy to find in the usual Angular community resources, and one which we feel will be comfortable for the majority of Spring users
Lời nhắc nhở. nếu bạn đang làm việc qua phần này với ứng dụng mẫu, hãy đảm bảo xóa bộ nhớ cache của trình duyệt khỏi cookie và thông tin xác thực HTTP Basic. Trong Chrome, cách tốt nhất để làm điều đó cho một máy chủ là mở một cửa sổ ẩn danh mới
Writing a Specification
Our "app" component in the "basic" application is very simple, so it won’t take a lot to test it thoroughly. Here’s a reminder of the code
ứng dụng. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiThe main challenge we face is to provide the
$ spring init --dependencies web,security ui/ && cd uiThe Angular build in an app created from
$ mvn spring-boot:runứng dụng. thành phần. ts
$ spring init --dependencies web,security ui/ && cd uiIn this very basic test suite we have these important elements
We
79 the thing that is being tested [the "AppComponent" in this case] with a function$ mvn spring-boot:runInside that function we provide a
80 callback, which loads the Angular component$ mvn spring-boot:runBehaviour is expressed through a call to
81, where we state in words what the expectation is, and then provide a function that makes assertions$ mvn spring-boot:runThe test environment is initialized before anything else happens. This is boilerplate for most Angular apps
The test function here is so trivial it actually only asserts that the component exists, so if that fails then the test will fail
Improving the Unit Test. Mocking HTTP Backend
To improve the spec to production grade we need to actually assert something about what happens when the controller loads. Since it makes a call to
$ mvn spring-boot:run$ mvn spring-boot:runapp. component. spec
$ spring init --dependencies web,security ui/ && cd uiThe new pieces here are
The declaration of the
83 as an imports in the$ mvn spring-boot:run
85 in$ mvn spring-boot:run
80$ mvn spring-boot:runIn the test function we set expectations for the backend before we create the component, telling it to expect a call to 'resource/',and what the response should be
Running the Specs
To run our test" code we can do
$ mvn spring-boot:run$ mvn spring-boot:run$ mvn spring-boot:runEnd-to-End Tests
Angular also has a standard build set up for "end-to-end tests" using a browser and your generated JavaScript. These are written as "specs" in the top-level
$ mvn spring-boot:run$ mvn spring-boot:runSự kết luận
Being able to run unit tests for Javascript is important in a modern web application and it’s a topic that we’ve ignored [or dodged] up to now in this series. Với phần này, chúng tôi đã trình bày các thành phần cơ bản về cách viết bài kiểm tra, cách chạy chúng trong thời gian phát triển và quan trọng là trong môi trường tích hợp liên tục. The approach we have taken is not going to suit everyone, so please don’t feel bad about doing it in a different way, but make sure you have all those ingredients. The way we did it here will probably feel comfortable to traditional Java enterprise developers, and integrates well with their existing tools and processes, so if you are in that category I hope you will find it useful as a starting point. More examples of testing with Angular and Jasmine can be found in plenty of places on the internet, but the first point of call might be the "single" sample from this series, which now has some up to date test code which is a bit less trivial than the code we needed to write for the "basic" sample in this tutorial
Logout from an OAuth2 Client Application
In this section we continue our discussion of how to use Spring Security with Angular in a "single page application". Here we show how to take the OAuth2 samples and add a different logout experience. Many people who implement OAuth2 single sign on find that they have a puzzle to solve of how to logout "cleanly"? The reason it’s a puzzle is that there isn’t a single correct way to do it, and the solution you choose will be determined by the user experience you are looking for, and also the amount of complexity you are willing to take on. The reasons for the complexity stem from the fact that there are potentially multiple browser sessions in the system, all with different backend servers, so when a user logs out from one of them, what should happen to the others? This is the ninth section of a tutorial, and you can catch up on the basic building blocks of the application or build it from scratch by reading the first section, or you can just go straight to the source code in Github
Logout Patterns
The user experience with logout of the
$ mvn spring-boot:runThere are, broadly speaking, three patterns for logout from a UI app that is authenticated as an OAuth2 client
External Authserver [EA, the original sample]. The user perceives the authserver as a 3rd party [e. g. using Facebook or Google to authenticate]. You don’t want to log out of the authserver when the app session ends. You do want approval for all grants. The
92 [and$ mvn spring-boot:run
94] sample from this tutorial implement this pattern$ mvn spring-boot:runGateway and Internal Authserver [GIA]. You only need to log out of 2 apps, and they are part of the same system, as perceived by the user. Usually you want to autoapprove all grants
Single Logout [SL]. One authserver and multiple UI apps all with their own authentication, and when the user logs out of one, you want them all to follow suit. Likely to fail with a naive implementation because of network partitions and server failures - you basically need globally consistent storage
Sometimes, even if you have an external authserver, you want to control the authentication and add an internal layer of access control [e. g. scopes or roles that the authserver doesn’t support]. Then it’s a good idea to use the EA for authentication, but have an internal authserver that can add the additional details you need to the tokens. The
$ mvn spring-boot:runHere are some options if you don’t want EA
Log out from authserver as well as UI app in browser client. Simple approach and works with some careful CRSF and CORS configuration. No SL
Logout from authserver as soon as a token is available. Hard to implement in the UI, where the token is acquired, because you don’t have the session cookie for the authserver there. There is a feature request in Spring OAuth which shows an interesting approach. invalidate the session in the authserver as soon as an auth code is generated. The Github issue contains an aspect that implements the session invalidation, but it’s easier to do as a
96. No SL$ mvn spring-boot:runMáy chủ ủy quyền thông qua cùng một cổng với giao diện người dùng và hy vọng rằng một cookie là đủ để quản lý trạng thái cho toàn hệ thống. Doesn’t work because unless there is a shared session, which defeats the object to some extent [otherwise there is no session storage for the authserver]. SL only if the session is shared between all apps
Cookie relay in gateway. You are using the gateway as the source of truth for authentication, and the authserver has all the state it needs because the gateway manages the cookie instead of the browser. The browser never has a cookie from more than one server. No SL
Use the token as global authentication and invalidate it when user logs out of the UI app. Downside. requires tokens to be invalidated by client apps, which isn’t really what they were designed to do. SL possible, but usual constraints apply
Create and manage a global session token [in addition to the user token] in the authserver. This is the approach taken by OpenId Connect, and it does provide some options for SL, at the cost of some extra machinery. None of the options is immune from the usual distributed system limitations. if networks and application nodes are not stable there are no guarantees that a logout signal is shared among all participants when needed. All of the logout specs are still in draft form, and here are some links to the specs. Session Management, Front Channel Logout, and Back Channel Logout
Note that where SL is hard or impossible, it might be better to put all the UIs behind a single gateway anyway. Then you can use GIA, which is easier, to control logout from your whole estate
The easiest two options, which apply nicely in the GIA pattern can be implemented in the tutorial sample as follows [take the
$ mvn spring-boot:runLogout of Both Servers from Browser
It’s quite easy to add a couple of lines of code to the browser client that logout from the authserver as soon as the UI app is logged out. E. g
$ spring init --dependencies web,security ui/ && cd uiIn this sample we hardcoded the authserver logout endpoint URL into the JavaScript, but it would be easy to externalize that if you needed to. It has to be a POST directly to the authserver because we want the session cookie to go along too. The XHR request will only go out from the browser with a cookie attached if we specifically ask for
$ mvn spring-boot:runConversely, on the server we need some CORS configuration because the request is coming from a different domain. E. g. in the
$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd uiThe "/logout" endpoint has been given some special treatment. It is allowed to be called from any origin, and explicitly allows credentials [e. g. cookies] to be sent. The allowed headers are just the ones that Angular sends in teh sample app
In addition to the CORS configuration we also need to disable CSRF for the logout endpoint, because Angular will not send the
$ mvn package
$ java -jar target/*.jar$ spring init --dependencies web,security ui/ && cd uiDropping CSRF protection is not really advisable, but you might be prepared to tolerate it for this restricted use case
With those two simple changes, one in the UI app client, and one in the authserver, you will find that once you logout of the UI app, when you log back in, you will always be prompted for a password
Another useful change is to set the OAuth2 client to autoapprove, so that the user doesn’t have to approve the token grant. This is common in a internal authserver, where the user doesn’t perceive it as a separate system. In the
$ mvn package
$ java -jar target/*.jar$ spring init --dependencies web,security ui/ && cd uiPhiên không hợp lệ trong Authserver
If you don’t like to give up the CSRF protection on the logout endpoint, you can try the other easy approach, which is to invalidate the user session in the authserver as soon as a token is granted [actually as soon as an auth code is generated]. This is also super easy to implement. starting from the
$ mvn spring-boot:run$ mvn spring-boot:run$ spring init --dependencies web,security ui/ && cd uiThis interceptor looks for a
$ mvn package
$ java -jar target/*.jarWith this simple change, as soon as you authenticate, the session in the authserver is already dead, so there’s no need to try and manage it from the client. When you log out of the UI app, and then log back in, the authserver doesn’t recognize you and prompts for credentials. This pattern is the one implemented by the
$ mvn package
$ java -jar target/*.jarSự kết luận
In this section we have seen how to implement a couple of different patterns for logout from an OAuth2 client application [taking as a starting point the application from section five of the tutorial], and some options for other patterns were discussed. These options are not exhaustive, but should give you a good idea of the trade offs involved, and some tools for thinking about the best solution for your use case. There were only couple of lines of JavaScript in this section, and that wasn’t really specific to Angular [it adds a flag to XHR requests], so all the lessons and patterns are applicable beyond the narrow scope of the sample apps in this guide. A recurring theme is that all approaches to single logout [SL] where there are multiple UI apps and a single authserver tend to be flawed in some way. the best you can do is choose the approach that makes your users the least uncomfortable. If you have an internal authserver and a system that is composed of many components, then possibly the only architecture that feels to the user like a single system is a gateway for all user interactions
Want to write a new guide or contribute to an existing one? Check out our contribution guidelines
All guides are released with an ASLv2 license for the code, and an Attribution, NoDerivatives creative commons license for the writing