Sau khi cài đặt WSO2 thành công ở mục 4.2 và thực hiện đăng nhập ở màn hình Console, ta có thể cấu hình các Application Provider để thực hiện việc kết nối và triển khai đăng nhập 1 lần SSO tới máy chủ WSO2 Identity Server. Việc khởi tạo một Web Application Provider với giao thức OpenID Connect như sau:
Bước 1: Truy cập vào console của WSO2 Identity Server và đăng nhập tương tự Bước 5 của mục 4.2.3
Bước 2: Click vào New Application, và click vào Web Application
Hình 17
Bước 3: Khi Popup Web Application được hiện lên, thực hiện khao báo tên và Redirect URL (là URL sẽ được điều hướng sau khi login thành công, sẽ được giải thích ở phần cài đặt với Angular).
Hinh 18
Bước 4: Click Register để hoàn thành quá trình đăng ký và sau đó chọn tab Access để lấy thông tin kết nối của OpenID Connect
Hình 19
Ta sẽ lưu lại Client ID cho Front-End.
Client ID và Client secret cho Back-end. Trong khuôn khổ phần mềm thử nghiệm này sẽ không có Web Back-end API.
4.3.2.Xây d ng mã ngu n Angular 2+ự ồ
Ứng dụng sẽ đi qua các nguyên tắc cốt lõi của Angular. Ta sẽ đi xây dựng một ứng dụng cơ bản với chức năng tích hợp đăng nhập 1 lần SSO với WSO2 Identity Server.
Bước 1: Cài đ t môi trặ ường
Bạn cần cài đặt môi trường thành công trước khi làm bất cứ thứ gì. Trước hết cần có Nodejs và npm được cài đặt trên máy tính của bạn. Sử dụng các lệnh như dưới để kiểm tra nếu máy bạn đã cài đặt:
Sau đó cài đặt Angular CLI
Bước 2: T o d án m iạ ự ớ
Tạo ra một app mới bằng câu lệnh bên dưới. Trong đó sso-demo là tên của app
Bước 3: T o các component c n thi tạ ầ ế
Chạy lệnh ng generate component dưới đây để tạo ra component bao gồm: sso, sso-processing, features. Trong đó generate component có thể viết tắt là: ng g c
Chạy lệnh ng g guard auth và lựa chọn 2 interfaces như bên dưới để tạo ra bộ định tuyến phục vụ việc xác thực khi điều hướng trang web.
Mục tiêu của các component:
- Features: Chức năng mà người dùng muốn được sửa dụng
- Sso: Thực hiện điều hướng sang trang đăng nhập của WSO2 Identity Server khi người dùng chưa đăng nhập.
- Sso-processing: Trang xử lý sau khi đăng nhập trên WSO2 Identity Server thành công và nhận được kết quả
- Auth.guard: Thực hiện kiểm tra xem người dùng đã đăng nhập và xác thực chưa
Chi tiết các component sẽ được thể hiện trong biểu đồ tuần tự sau:
Hình 20
Sau khi thực hiện xong bước này ta sẽ có các file và thư mục như sau:
Bước 4: C u hình routing:ấ
Sửa file app.component.html như bên dưới:
Cấu hình file app-routing.module.ts để thực hiện chuyển hướng trang.
Cấu hình file auth.guard.ts để thực hiện chuyển trang sang sso để đăng nhập khi người dùng chưa đăng nhập vào hệ thống
Bước 6: C u hình chuy n trang sang WSO2ấ ể
Trên file src/environment/environments.ts thực hiện thêm các tham số đã được khai báo và lấy ở bước 3 và bước 4 của phần 4.3.1
Trên file sso.component.ts thực hiện chỉnh sửa như sau để phần mềm sẽ tự chuyển hướng trang web khi người dùng cần đăng nhập và xác thực:
Bước 7: C u hình chuy n hấ ể ướng trang khi đăng nh p và xác th c thành ậ ự
công
Sửa file sso-processing.component.ts sẽ được cấu hình như sau:
Chạy project và xem kết quả