CÁCH LÀM - Bảo mật giao diện ReactJS của bạn với Azure AD B2C

Vài tháng trước, tôi được giới thiệu vào thế giới của ReactJS. Một yêu cầu khách hàng để xây dựng một frontend web. Tất cả các ngày nhà phát triển của tôi đã dành cho việc phát triển các hệ thống phụ trợ bằng Microsoft Web Web API và C #. Và bạn có thể nói không với khách hàng của bạn, phải không? nếu bạn phải làm điều đó bạn phải làm điều đó. Vì vậy, bước vào một lĩnh vực mới của việc xây dựng các ứng dụng lối vào.

Khách hàng của tôi đã có API WEB và giao diện web. Yêu cầu này là tạo một mô-đun phụ riêng biệt khác bằng ReactJS để tương tác với API Web đó. Như những lo ngại bảo mật thông thường được đặt vào bảng và vâng, họ đã có thiết lập Azure AD B2C để quản lý người dùng. Thách thức là sử dụng ReactJS để tương tác với Azure AD B2C để xác thực và ủy quyền.

Tin tôi đi, có một vài hướng dẫn về cách kết nối Azure AD và Azure AD B2C với các công nghệ frontend. Nhưng tất cả đều là bit và miếng ở đây và kia. Tôi không thể tìm thấy một hướng dẫn đầy đủ từng bước hướng dẫn bạn thông qua. Vì vậy, nghĩ tại sao không viết một.

Tôi đã đưa ra một vài giả định ở đây, rằng bạn đã:

  1. Có kinh nghiệm về ReactJS và bạn không biết cách kết nối Azure AD B2C.
  2. Có tài khoản Azure. Bạn có nên có một? Nhấp vào liên kết này: https://azure.microsoft.com/en-us/ và nhấp vào nút màu xanh lá cây to béo có chữ Bắt đầu miễn phí>
  3. Có một thư mục Azure AD B2C đầy đủ chức năng với người dùng. Nếu bạn có tài khoản Azure và cần tạo tài khoản Azure AD B2C, hãy xem liên kết này: https://bit.ly/2U8X9Ft

Hãy bắt đầu bằng cách tạo một Dự án ReactJS hoàn toàn mới

  • Nếu bạn đang ở trong Windows, hãy kích hoạt dấu nhắc lệnh hoặc thiết bị đầu cuối cho các nền tảng khác như Mac hoặc Linux.
  • Đi vào bên trong thư mục làm việc của bạn.
  • Nhập lệnh sau và nhấn ENTER để tạo dự án ReactJS.
$ tạo-Reac-app rjaadb2c
  • Bây giờ điều hướng đến thư mục dự án mới được tạo bằng cách gõ,
$ cd rjaadb2c
  • Mở trình soạn thảo mã yêu thích của bạn (tôi sẽ sử dụng VS Code) và mở thư mục bạn đã tạo ở bước trước.
  • Trình chỉnh sửa của bạn sẽ trông như thế này
Dự án ReactJS mới được tạo trong Mã VS

Mã VS có tính năng nhỏ xinh này được gọi là cửa sổ đầu cuối. Điều này sẽ mở một thiết bị đầu cuối bên trong trình soạn thảo mã. Nó có một tính năng rất tiện dụng. Nhấp vào Terminal> Terminal mới trong thanh menu.

  • Bây giờ trong loại cửa sổ đầu cuối
$ npm bắt đầu

Điều này sẽ thực hiện dự án ReactJS. Và nó sẽ trông như thế này.

Ứng dụng ReactJS của bạn đã hoạt động và chạy trong http: // localhost: 3000

Mọi thứ đều tốt, hãy để Chuẩn bị môi trường Azure AD B2C của chúng tôi ngay bây giờ.

Chuẩn bị môi trường Azure AD B2C

Trong phần này, chúng tôi sẽ chuẩn bị môi trường Azure AD B2C để xác thực và ủy quyền.

  • Bây giờ hãy đăng nhập vào Azure Portal bằng cách nhấp vào liên kết này: https://portal.azure.com
  • Nhấp vào nút Bộ lọc trong thanh menu và chuyển sang Thư mục B2C của bạn
Nút lọc để chuyển sang Thư mục B2C
  • Bây giờ bấm vào nhãn Tất cả các dịch vụ trong menu thanh bên.
  • Nhập loại Quảng cáo b2c Cảnh trong hộp tìm kiếm Tất cả dịch vụ.
  • Nhấp vào nhãn Azure AD B2C
Azure AD B2C
  • Trong lưỡi Azure AD B2C, bấm vào nhãn Ứng dụng.
  • Trong lưỡi Ứng dụng, bấm nút Thêm +.
  • Bây giờ điền thông tin cần thiết để tạo Ứng dụng Azure AD B2C mới, như hiển thị bên dưới
Tạo một ứng dụng mới
  1. Như bạn thấy nó rõ ràng. Cung cấp một tên Name duy nhất cho ứng dụng của bạn.
  2. Và sau đó chọn Có để ứng dụng Web Web / API API Web vì chúng tôi đang tạo một ứng dụng web.
  3. Và để lại Có làm mặc định cho Dòng cho phép dòng ngầm ẩn
  4. Nhập URL Trả lời URL trong trường hợp này là địa chỉ máy chủ lưu trữ cục bộ của chúng tôi. Nhập loại api api và bất kỳ số nhận dạng nào bạn chọn vào URI ID ID tùy chọn (tùy chọn).

Sử dụng URI này, bạn sẽ cho phép ứng dụng của bạn truy cập vào một số tính năng nhất định trong thư mục của bạn. Ví dụ, điều này có thể được đọc thông tin hồ sơ người dùng.

Tôi đặc biệt đánh dấu điều này bởi vì nếu bạn không đưa ra một định danh ở vị trí này, bạn sẽ giành được một phạm vi dưới phạm vi xuất bản phạm vi xuất bản. Tôi không chắc đó có phải là lỗi hay không nhưng không có nó, bạn đã giành được các phạm vi mặc định ở đây và không thể tạo mới.

  • Bây giờ bấm vào nút Tạo để tạo ứng dụng mới.
Ứng dụng được tạo thành công
  • Bây giờ, nhấp vào nhãn Dòng người dùng (chính sách) trong lưỡi Azure AD B2C - Ứng dụng.
  • Bấm vào + Nút luồng người dùng mới.
Lưu lượng người dùng mới
  • Trong lưỡi Tạo luồng người dùng trong tab Được đề xuất, nhấp vào liên kết Đăng ký và đăng nhập vào liên kết.
Tạo luồng người dùng
  • Trong lưỡi Tạo, đảm bảo bạn điền vào biểu mẫu theo hình dưới đây. Bạn đã đưa ra tất cả các hướng dẫn và thông tin bạn cần trong chính lưỡi kiếm.
Đăng ký và đăng nhập luồng người dùng
  • Bây giờ bạn đã tạo thành công một Sing up và đăng nhập luồng người dùng. Bằng cách nhấp vào nút Chạy luồng người dùng, bạn sẽ có thể kiểm tra luồng này.
Tạo luồng người dùng

Đây là tất cả những gì bạn cần ở cuối Azure AD B2C. Hãy để một danh sách kiểm tra.

  1. Tài khoản Azure []
  2. Đối tượng thuê Azure AD B2C []
  3. Ứng dụng Azure AD B2C []
  4. Luồng người dùng để đăng ký và đăng nhập []

Tuyệt vời, bây giờ thiết lập được thực hiện. Hãy để Lùi quay trở lại ứng dụng phản ứng của chúng tôi và thực hiện một số mã hóa.

Cài đặt thư viện

Bây giờ, hãy quay lại ứng dụng ReactJS của bạn. Trong thiết bị đầu cuối gõ lệnh sau để cài đặt thư viện. Hãy nhớ rằng chúng tôi đã sử dụng cửa sổ thiết bị đầu cuối VSCode.

$ npm cài đặt Reac-azure-adb2c --save
Reac-azure-adb2c là một thư viện sẽ giúp bạn có được chức năng hoặc Azure AD B2C cho ứng dụng ReactJS của bạn. Bằng cách nhấp vào đây, bạn sẽ nhận được tài liệu ngắn gọn về cách sử dụng nó trong ứng dụng ReactJS của bạn.

Bây giờ bạn đã cài đặt thành công thư viện. Trong ứng dụng ReactJS của bạn, nhấp vào tệp index.js, ở đầu tệp thêm dòng mã sau đây.

Thêm dòng mã này sau khi nhập để khởi tạo.

Bây giờ bạn cần thay thế các mục được đánh dấu trong Tiếng <>

Bây giờ hãy quay lại cổng thông tin Azure và lấy thông tin sau.

Để lấy giá trị cho người thuê, hãy quay lại thư mục Azure AD B2C của bạn. Theo tổng quan, sao chép giá trị trong trường Tên miền tên miền.

Tên miền là người thuê nhà của bạn.

Bây giờ, để lấy applicationId, nhấp vào nhãn Ứng dụng và sao chép id từ ứng dụng mới được tạo, trong trường hợp này, đó là Reac ReacJJ AADB2C, và thay thế giá trị tại trường applicationatoinId.

Ứng dụng Id

Bây giờ, nhấp vào nhãn Dòng người dùng (chính sách) và sao chép tên của chính sách và thay thế giá trị tại trường SignInPolicy.

Chính sách đăng nhập

Bây giờ các phạm vi mảng phạm vi. Mảng này sẽ cung cấp các quyền cần thiết cho ứng dụng của bạn. Các quyền này sẽ cho phép ứng dụng ReactJS của bạn truy cập chức năng tại Azure AD B2C.

Để lấy thông tin này:

  1. Nhấp vào nhãn Ứng dụng.
  2. Nhấp vào ứng dụng của bạn, ReactJS AADB2C.
  3. Nhấp vào nhãn phạm vi đã xuất bản
  4. Lấy giá trị tại cột FULL SCOPE VALUE cho phạm vi user_impersonation.
  5. Thay thế giá trị ở mảng phạm vi (Hãy nhớ rằng đây là một mảng, với mỗi phạm vi bạn cần thêm một phần tử trong mảng này)
Truy cập liên kết này để có được một tài liệu chi tiết đầy đủ về phạm vi.

Tuyệt vời, chúng tôi gần như đã hoàn thành. Bây giờ, mã khởi tạo của bạn sẽ trông như thế này.

Một điều nữa để thêm. Hãy thay thế mã ReactDOM.render () mặc định bằng mã này.

Sau tất cả những thay đổi này, tệp index.js của bạn sẽ trông như thế này.

Gần đến rồi. Hãy chạy thử. Trong loại cửa sổ đầu cuối của bạn và thực hiện lệnh sau.

$ npm bắt đầu

Bạn sẽ thấy màn hình này.

Màn hình đăng nhập Azure AD B2C.

Bây giờ hãy sử dụng chi tiết đăng nhập của bạn cho cổng thông tin Azure hoặc bạn có thể tạo một tài khoản mới bằng cách nhấp vào Đăng ký ngay bây giờ. Nhớ lại? chúng tôi đã tạo một luồng người dùng cho cả đăng nhập và đăng ký. Thật tuyệt vời.

Màn hình đăng ký.

Sau khi tạo tài khoản mới hoặc sử dụng tài khoản hiện có, bạn có thể đăng nhập vào ứng dụng. Nhưng, bạn có thể không thấy trang ReactJS mặc định. Điều này có thể xảy ra do không đủ quyền ứng dụng.

Công cụ phát triển Chrome. Lưu trữ phiên ứng dụng.

Để khắc phục điều này,

  1. Quay trở lại Cổng thông tin Azure
  2. Xem thư mục Azure AD B2C
  3. Nhấp vào nhãn Ứng dụng
  4. Nhấp vào ứng dụng (Hồi ReactJS AADB2C '). Bạn vừa tạo.
  5. Nhấp vào nhãn truy cập API
  6. Nhấp vào + Thêm
  7. Chọn ứng dụng trong bước 4 từ menu thả xuống Chọn API.
  8. Chọn Khác Truy cập ứng dụng này thay mặt cho người dùng đã đăng nhập
  9. Nhấn vào OK
Cung cấp cho ứng dụng của bạn quyền cần thiết.

Cho phép quay trở lại ứng dụng ReactJS của chúng tôi và làm mới hoặc chạy lại nó.

Xin chúc mừng !!! Bạn xong việc rồi.

Ứng dụng ReactJS

Hãy để lấy một số thông tin từ Azure AD B2C và hiển thị nó dưới logo phản ứng.

Quay trở lại thiết bị đầu cuối và cài đặt gói sau.

$ npm cài đặt jwt-giải mã - lưu
Gói này sẽ cho phép bạn giải mã mã thông báo JWT từ Azure AD B2C và lấy thông tin bên trong nó.

Bây giờ bạn cần truy cập lại vào cổng thông tin Azure và để Azure AD B2C gửi cho bạn thông tin này. Để làm điều này,

  1. Quay trở lại cổng thông tin Azure.
  2. Chuyển đến Thư mục Azure B2C của bạn.
  3. Nhấp vào nhãn Dòng người dùng (chính sách).
  4. Nhấp vào chính sách đăng nhập bạn đã tạo.
  5. Nhấp vào liên kết Yêu cầu ứng dụng
  6. Chọn các trường bạn cần, trong trường hợp này tôi đã chọn Thành phố, Quốc gia / Vùng, Địa chỉ Email, Tên hiển thị, Tên đã cho (đây sẽ là Tên), Họ (đây sẽ là Họ).
  7. Nhấp vào để lưu.
Kích hoạt yêu cầu ứng dụng.

Quay trở lại ứng dụng ReactJS của bạn và nhấp vào thư mục src. Thêm một tập tin mới. Đặt tên là Auth.js. Sao chép và dán mã sau vào tập tin.

Bây giờ hãy mở App.js và thay thế bằng mã này.

Chúng ta đã hoàn thành. Cho phép chạy lại ứng dụng ReactJS của chúng tôi.

$ npm bắt đầu

Bạn sẽ được nhắc với màn hình đăng nhập Microsoft, sau khi đăng nhập thành công, bạn sẽ thấy màn hình này.

Chúng tôi đã chọn thông tin từ Azure AD B2C

Và lấy mã từ đây.

Chúc một ngày tốt lành.