Triển khai xác thực Okta trong React

[theanh]

Khi chúng ta xây dựng một ứng dụng, một yếu tố thiết yếu là xác thực. Đối với nhiều nhà phát triển, việc xây dựng kiến trúc xác thực rất đơn giản. Tuy nhiên, các nhóm phải cân nhắc đến tính bảo mật và tính dễ tích hợp với các nền tảng của bên thứ ba như Google và Facebook. Chẳng mấy chốc, việc xây dựng hệ thống xác thực của riêng bạn sẽ trở nên phức tạp.

Hướng dẫn này sẽ hữu ích cho những độc giả muốn tìm hiểu cách xác thực người dùng bằng Okta hoặc một giải pháp thay thế trong ứng dụng React của họ. Bài viết này yêu cầu bạn phải hiểu cơ bản về React và JavaScript.

Xác thực trong ứng dụng React​

Hầu hết các ứng dụng React đều là sự kết hợp giữa các trang mà mọi người đều có thể sử dụng và các trang yêu cầu một số hình thức xác thực. Các nhà phát triển React cần xác thực thông tin chi tiết của người dùng để xác định xem người dùng đã được xác thực hay chưa, sau đó chỉ định vai trò cho người dùng đó. Các vai trò bao gồm từ quyền truy cập đơn giản của máy khách đến quyền truy cập quản trị phức tạp hơn. Người dùng thường cần thực hiện các thao tác sau:

1. Đăng ký
   Bạn có thể thực hiện thao tác này bằng địa chỉ email, số điện thoại và mật khẩu, và bạn sẽ lưu thông tin của người dùng để sử dụng khi họ muốn truy cập vào các trang riêng tư đó lần sau.
2. Đăng nhập
   Người dùng đã xác thực cần có thể đăng nhập vào các trang riêng tư của họ.

Xác thực trong ứng dụng React có thể được thực hiện theo nhiều cách khác nhau, bao gồm các phương thức xác thực gốc (ví dụ: các công cụ xác thực dựa trên mã thông báo như JSON Web Tokens (JWT)), các thư viện như Stormpath và các trình quản lý xác thực như Auth0, Okta và OneLogin.

Okta hoạt động như thế nào?​

Giống như nhiều trình quản lý xác thực khác, Okta cho phép các nhà phát triển kiểm soát quyền truy cập vào ứng dụng React bằng cách sử dụng OAuth 2.0 đặc tả. Okta có thể được sử dụng như một máy chủ ủy quyền để lưu trữ tất cả thông tin người dùng và cấp mã thông báo người dùng để xác thực và ủy quyền.

Với Okta, tất cả dữ liệu và thông tin xác thực của người dùng được Okta lưu trữ an toàn trên đám mây và có thể được quản lý từ bảng điều khiển quản trị Okta.

Để truy xuất dữ liệu người dùng từ Okta, bạn sẽ cần truy cập dữ liệu đó bằng phương thức getUser của Okta trên OktaAuthService. Có thêm thông tin trong tài liệu.

Okta là gì?​

Okta là một nền tảng đám mây nhận dạng dưới dạng dịch vụ cấp doanh nghiệp được cá nhân và tổ chức sử dụng để ủy quyền. Không giống như một số nền tảng nhận dạng khác, Okta hoạt động hoàn hảo với các ứng dụng tại chỗ và ứng dụng đám mây.

Với Okta, các nhà quản lý dự án và CNTT có thể quản lý quyền truy cập của nhân viên trên tất cả các tài nguyên và ứng dụng trong tổ chức. Okta chạy hiệu quả trên đám mây trên nền tảng bảo mật và được tích hợp với các thư mục, ứng dụng và hệ thống quản lý danh tính tại chỗ.

Cốt lõi của Okta bao gồm các phương pháp và tính năng sau:

• Okta Identity Engine
  Đây là tính năng cốt lõi của Okta. Tính năng này cho phép các nhà quản lý tùy chỉnh các thành phần đám mây Okta của họ để giải quyết nhiều trường hợp sử dụng ủy quyền. Các nhà quản lý có thể sử dụng nhiều hơn các tính năng ủy quyền mặc định do Okta xác định và có thể tạo các giải pháp tùy chỉnh cho nhu cầu nhận dạng của họ.
• Đăng nhập một lần (SSO)
  Với Okta, các nhà quản lý có một tính năng truy cập đăng nhập tích hợp duy nhất cho các ứng dụng đám mây và di động. Sau khi đăng nhập bằng tài khoản Okta, bạn sẽ có thể truy cập ứng dụng của mình trên bất kỳ thiết bị nào khác mà không cần phải nhập lại thông tin đăng nhập. Bạn cũng có thể tích hợp Okta với các ứng dụng tại chỗ và trên nền tảng đám mây của họ.
• Okta Provisioning
  Để tự động hóa các quy trình quản lý và tài khoản của người dùng, Okta cung cấp các móc vòng đời nâng cao. Người quản lý có thể sử dụng mạng tích hợp Okta tích hợp sẵn hoặc kết nối API tùy chỉnh để hỗ trợ người dùng giữa Okta và đám mây. Okta cũng cung cấp API web để quản lý tài khoản người dùng.
• Okta Mobility Management
  Tính năng này nâng cao khả năng quản lý và danh tính của người dùng. Từ quản lý di động Okta, người quản lý dự án và sản phẩm có thể quản lý chính sách truy cập từ bảng điều khiển trung tâm trên nền tảng đám mây. Điều này cung cấp khả năng bảo vệ cao cho dữ liệu, mọi người và ứng dụng từ các thư mục đến bất kỳ thiết bị di động nào. Để ngăn chặn người dùng trái phép truy cập vào một số điểm cuối, Okta cho phép người quản lý xây dựng quyền truy cập người dùng theo ngữ cảnh.

Tại sao nên sử dụng Okta?​

Mục tiêu chính của Okta là cải thiện quyền cấp doanh nghiệp và quản lý danh tính cho các nhóm CNTT và tổ chức, đồng thời giúp quản lý quyền cho người dùng dễ dàng hơn.

Okta cũng cung cấp các tiện ích đăng nhập và các móc quản lý vòng đời nâng cao để xác thực người dùng. Các tùy chỉnh sẽ cho phép một tổ chức mở rộng nhu cầu quản lý danh tính của mình. Một số trình quản lý danh tính có sẵn cho các ứng dụng React và React Native, bao gồm Azure AD, OneLogin và Auth0. Bảng dưới đây cho thấy lý do tại sao Okta thường được coi là lựa chọn thông minh hơn cho các nhóm và tổ chức.

Okta	OneLogin	Azure AD
Cung cấp xác thực 2 yếu tố	Cung cấp 2FA	Cung cấp 2FA
Cung cấp quyền truy cập và quyền hàng loạt cho các tổ chức lớn	Không cung cấp quyền truy cập và quyền hàng loạt	Cung cấp quyền hàng loạt cho các vai trò quản trị viên được chọn
Nhập và xuất dữ liệu cho các nhóm và cá nhân	Không cung cấp tính năng nhập và xuất dữ liệu cho các nhóm và cá nhân	Nhập và xuất dữ liệu cho các nhóm và cá nhân
Tích hợp email và Google Apps	Không cung cấp email và Google Apps tích hợp	Nhập và xuất dữ liệu cho các nhóm và cá nhân
Khả năng đa nền tảng thành thạo	Khả năng đa nền tảng hạn chế	Khả năng đa nền tảng hạn chế

Xây dựng ứng dụng với Okta​

Bây giờ chúng ta đã biết các tính năng cốt lõi của Okta, hãy cùng xây dựng một hệ thống quản lý tiền thuê nhà. Ứng dụng này sẽ cho phép chủ nhà xem thông tin về từng người thuê nhà, số nhà và hình ảnh của căn phòng. Sử dụng Okta, chủ nhà và người thuê nhà sẽ có thể đăng nhập và xem thông tin này.

Không cần phải nói thêm nữa, chúng ta hãy bắt đầu thôi!

Thiết lập Okta​

Yêu cầu đầu tiên là tạo một tài khoản trên Okta. Điều này sẽ cho phép chúng ta tạo một ứng dụng và đưa người dùng vào bảng điều khiển quản trị Okta của chúng ta. Tại đây, chúng ta sẽ chỉ định một phương thức đăng nhập bằng cách sử dụng "đăng nhập Okta" và cũng thêm một loại ứng dụng vào bảng điều khiển Okta của chúng ta. Bạn có thể thấy điều này trong hình ảnh bên dưới.



Sau khi nhấp vào tab "Ứng dụng", hãy điều hướng đến nút "Tạo tích hợp ứng dụng".



Ở đây, chúng tôi đã chọn phương thức đăng nhập "OpenID Connect". Phương thức này cung cấp cho chúng tôi tiện ích đăng nhập từ Okta (tùy chọn này — bạn cũng có thể xây dựng một đăng nhập tùy chỉnh). Tiếp theo, chúng tôi đã chọn loại ứng dụng của mình, đó là ứng dụng một trang. Nhấp vào nút "Tiếp theo" sau khi chọn các thông tin xác thực này.

Tiếp theo, chúng tôi sẽ chỉ định URI đăng nhập và URI đăng xuất. Chúng tôi sẽ đặt URI chuyển hướng của mình thành localhost:3000 cho hướng dẫn này, như được hiển thị bên dưới:



Như thể hiện trong hình ảnh ở trên, chúng tôi đã thêm một URI chuyển hướng đăng nhập để chuyển hướng người dùng sau khi họ đã đăng nhập vào ứng dụng của chúng tôi và một URI đăng xuất để chuyển hướng người dùng sau khi họ đã đăng xuất.

Trong bảng điều khiển Okta của mình, chúng tôi có thể định cấu hình loại xác thực mà chúng tôi muốn cho người dùng và thêm các tuyến đăng nhập và đăng xuất. Bây giờ, chúng ta đã sẵn sàng để tạo ứng dụng React với Okta!

Tạo ứng dụng React​

Chúng ta hãy bắt đầu tạo ứng dụng React bằng Create React App. Chạy lệnh bên dưới để tạo dự án mới:

npx create-react-app {project name}

Ngoài ra, bạn có thể sử dụng Yarn:

yarn create-react-app {project name}

Tiếp theo, cd vào thư mục dự án và khởi động máy chủ phát triển của bạn bằng lệnh bên dưới:

cd {project name} && yarn run dev

Cấu hình Okta cho Ứng dụng React​

Bây giờ, chúng ta sẽ cài đặt các phụ thuộc @okta/okta-react, @okta/okta-signin-widget và @okta/okta-auth-js trong ứng dụng của chúng ta.

Sử dụng lệnh này cho npm:

npm install @okta/okta-react @okta/okta-signin-widget @okta/okta-auth-js

Và sử dụng lệnh này cho Yarn:

yarn add @okta/okta-react @okta/okta-signin-widget @okta/okta-auth-js

Tiếp theo, hãy cài đặt gói dotenv, chúng ta sẽ sử dụng để lưu trữ các biến môi trường Okta. Chúng ta cũng thêm styled-components, chúng ta sẽ sử dụng để tạo kiểu cho ứng dụng của mình.

Sử dụng npm:

npm install dotenv styled-components

Sử dụng Yarn:

yarn add dotenv styled-components

Tạo một tệp mới, .env, trong thư mục gốc của dự án và thêm các thông tin xác thực sau do Okta cung cấp:

REACT_APP_OKTA_BASE_URL="URL cơ sở Okta của bạn sẽ ở đây"REACT_APP_OKTA_CLIENT_ID="ID duy nhất của bạn sẽ ở đây"

BASE_URL bao gồm email đăng nhập của bạn được lưu trữ bởi Okta. Đây là mã định danh công khai cho luồng OAuth do Okta cung cấp. Bạn có thể tìm thấy CLIENT_ID của mình trong bảng điều khiển Okta bên dưới thông tin xác thực của khách hàng. Tiếp theo, hãy hoàn tất xác thực Okta bằng cách thiết lập người dùng cho ứng dụng của chúng ta.

Cấu hình Okta trong ứng dụng React​

Để sử dụng Okta cho ứng dụng React của chúng ta, trước tiên, chúng ta sẽ cần khởi tạo người dùng chính trong ứng dụng của mình. Tạo một tệp mới, config.js, trong thư mục gốc của ứng dụng dự án của chúng ta và thêm khối mã bên dưới vào đó:

export const oktaAuthConfig = { issuer: `https://${process.env.REACT_APP_BASE_URL}/oauth2/default`, clientId: process.env.REACT_APP_CLIENT_ID, redirectUri: `${window.location.origin}/login/callback`, scopes: ["openid", "profile", "email"], pkce: true,};

Trong khối mã này, chúng ta đã tạo một đối tượng có tên oktaAuthConfig. Trong đó, chúng ta đã tạo một issuer, BASE_URL của chúng ta và một clientID từ Okta. redirectUri là lệnh gọi lại mà chúng tôi thiết lập trong bảng điều khiển Okta của mình. Bạn có thể đọc thêm về Cấu hình Okta React trong tài liệu.

Xây dựng các thành phần ứng dụng​

Tạo tệp Navbar.js trong thư mục src/components/Navbar. Chúng tôi sẽ tạo một thành phần Navbar chức năng với hai liên kết hỗ trợ Okta để đăng nhập và đăng xuất. Hãy thực hiện bên dưới:

import { Link } from "react-router-dom";import styled from "styled-components";import { useOktaAuth } from "@okta/okta-react"; const Nav = () => { const { oktaAuth, authState } = useOktaAuth(); const loggingIn = async () => oktaAuth.signInWithRedirect({ originalUri: "/" }); const loggingOut = async () => oktaAuth.signOut();

Trong đoạn mã trên, chúng ta đã nhập useOktaAuth từ Okta. Sử dụng hook useOktaAuth, chúng ta có thể truy cập vào trạng thái Okta và đối tượng oktaAuth của mình. Để đăng nhập, chúng ta đã tạo một hàm, login, sẽ gọi oktaAuth để đăng nhập người dùng và một hàm khác, logout, để đăng xuất họ.

Tiếp theo, chúng ta đã tạo một nút. Trong đó, chúng tôi đã kết xuất chức năng đăng nhập cho người dùng nếu họ chưa được xác thực và chúng tôi đã kết xuất chức năng đăng xuất nếu người dùng đã được xác thực.

Để hoàn thiện thành phần của mình, chúng tôi sẽ thêm các kiểu và menu thanh điều hướng chứa tên bất động sản của chủ nhà và liên kết đến trang hồ sơ dành cho người dùng. Hãy thực hiện điều đó bên dưới:

return (  
[*]  [HEADING=2]Regents Housing[/HEADING]  [LIST]  Profile  
[*]  { authState?.isAuthenticated ? ( Logout ) : ( Login ) }  [/LIST] };

Chúng ta hãy thêm kiểu vào ứng dụng của mình, xuất thành phần và xem kết quả bên dưới:

const Section = styled.nav` width: 90%; margin: 1rem auto; display: flex; align-items: center; justify-content: space-between; h2 { font-style: oblique; } a { text-decoration: none; } & ul { display: flex; justify-content: space-between; align-items: center; & li { list-style-type: none; &:hover { text-decoration: underline; } &:nth-last-child(1) { margin-left: 1rem; } a { color: #333; font-weight: 500; font-size: 1rem; text-decoration: none; } & button { font-size: 1rem; color: #333; font-weight: 500; cursor: pointer; outline: none; border: none; background: transparent; } } } `;export default Navbar;

Thành phần Nav của chúng ta sẽ trông giống như hình ảnh bên dưới:

Xây dựng thành phần thẻ phòng​

Trong phần này, chúng ta sẽ xây dựng thành phần Thẻ để hiển thị từng phòng trong khu nhà. Chúng ta sẽ tạo một thành phần đơn giản để hiển thị tên người thuê, số phòng và ngày đến hạn trả tiền thuê.

Trước tiên, hãy tạo một thư mục có tên RoomCard trong thư mục components. Trong đó, thêm một tệp mới có tên RoomCard.js và thêm khối mã bên dưới vào đó:

import styled from "styled-components";const Card = ({ roomNo, occupyName, rentDueDate, coverImg }) => { return (    [HEADING=4]Số phòng: {roomNo}[/HEADING]  
Người ở: {occupantName}
 
Ngày đến hạn trả tiền thuê: {rentDueDate}
    );}; const Wrapper = styled.div` border-radius: 7px; box-shadow: -2px 7px 8px 3px rgba(204, 204, 204, 0.63); width: 15rem; & > .bg { background: url(${(props) => props.coverImg}) no-repeat center center/cover; height: 10rem; } h4 { text-align: center; } & .body { flex-direction: column; align-items: center; padding: 0.5rem 0 1rem; display: flex; footer { margin-top: 0.7rem; & p { font-size: 0.9rem; } } } `;export default Card;

Tại đây, chúng tôi đã tạo một thành phần, CardWrapper, chứa props của chúng tôi. Thành phần này sẽ là thành phần khung để hiển thị thông tin chi tiết về người cư trú. Chúng tôi cũng đã tạo kiểu bằng styled-components.

Tiếp theo, chúng tôi đã nhập styled-components để tạo kiểu cho thành phần này. Chúng tôi đã tạo một thành phần biểu mẫu lấy roomNo, occupantName, rentDueDate và coverImg làm props.

Tạo Bảng Dữ liệu​

Bây giờ, chúng ta sẽ tạo một đối tượng chứa tất cả thông tin của người cư trú trong ứng dụng bất động sản của chúng ta. Trong thư mục gốc của ứng dụng, hãy tạo một tệp mới, data.js và trong đó hãy thêm một số người cư trú và thông tin chi tiết của họ dưới dạng một đối tượng:

export const Data = [ { id: 1, roomNo: 1, coverImg: " https://images.unsplash.com/photo-1653463174260-8e974b584704?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80", occupyName: "Fortune", rentDueDate: "01-09-2021", }, { id: 2, roomNo: 2, coverImg: "https://images.unsplash.com/photo-1653191252464-c3f61798ce9a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEwfFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60", người thuê nhà Tên: "Yemi", rentDueDate: "04-01-2022", }, { id: 3, roomNo: 3, coverImg: "https://images.unsplash.com/photo-1538430989507-797d5e4ba836?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzfFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60", người thuê nhà Tên: "Precious", rentDueDate: "31-10-2021", }, { id: 4, roomNo: 4, coverImg: "https://images.unsplash.com/photo-1600947871775-082dd97e2d96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDExfFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60", người thuê nhà: "Isaac", rentDueDate: "11-09-2021", }, { id: 5, roomNo: 5, coverImg: "https://images.unsplash.com/photo-1651342490124-c2042b78d41c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDIzfFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60", người thuê nhà Tên: "Victor", rentDueDate: "11-09-2021", }, { id: 6, roomNo: 6, coverImg: "https://images.unsplash.com/photo-1653162100655-88a23594835f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDI2fFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60", personnelName: "Melvin", rentDueDate: "01-08-2021", },];

Tại đây, chúng tôi đã thêm danh sách người thuê nhà và thông tin chi tiết của họ.

Tạo móc xác thực người dùng​

Hãy tạo một móc để lấy chi tiết của người dùng và xác thực chúng. Để thực hiện việc này, trong thư mục gốc của ứng dụng, hãy tạo một thư mục mới, hooks và trong đó tạo một tệp mới, getUser.js. Thêm mã bên dưới:

import { useEffect, useState } from "react";import { useOktaAuth } from "@okta/okta-react";const useAuthUser = () => { const { oktaAuth, authState } = useOktaAuth(); const [userInfo, setUserInfo] = useState(null); useEffect(() => { const getUser = async () => { try { const res = await oktaAuth.getUser(); setUserInfo(res); } catch (error) { console.log(error); } }; authState?.isAuthenticated && getUser(); }, [authState, oktaAuth]); return userInfo;};export default useAuthUser;

Để hoàn thiện ứng dụng, chúng ta sẽ xây dựng các trang Trang chủ và Hồ sơ bằng các thành phần mà chúng ta đã xây dựng trong phần này. Hãy thực hiện ngay bây giờ.

Tạo Trang chủ​

Hãy tạo trang chủ bằng thành phần RoomCard của chúng ta. Trang này sẽ lấy thông tin của người dùng khi họ đăng nhập và hiển thị thông báo chào mừng. Nó cũng sẽ chứa tất cả các phòng và thông tin chi tiết về người ở.

Tạo một thư mục mới, pages, trong thư mục gốc của ứng dụng. Trong đó, tạo một thư mục mới, home, sẽ chứa tệp index.js. Chúng tôi sẽ sớm thêm mã vào đó.

Để xử lý xác thực, chúng tôi đã nhập useOktaAuth từ okta-react. Để tạo kiểu cho trang của mình, chúng tôi đã nhập styled-components. Hãy tạo một tệp data.js chứa tất cả thông tin sẽ được hiển thị trên trang này. Chúng tôi sẽ tạo một hàm để lấy thông tin chi tiết của người dùng từ Okta, sau đó đặt hàm đó vào trạng thái của ứng dụng. Sau đó, chúng tôi sẽ xây dựng một màn hình chào mừng và hiển thị danh sách tất cả người ở trong khu dân cư của mình. Hãy thực hiện điều đó:

import { useOktaAuth } from "@okta/okta-react";import useAuthUser from "../hook/getUser";import styled from "styled-components";import { Data } from "../data";import Card from "../components/Card/Card";const Home = () => { const { authState } = useOktaAuth(); const userInfo = useAuthUser();trả về (  {authState?.isAuthenticated ? (  [HEADING=2]Chào mừng trở lại, {userInfo?.name}[/HEADING]  {Data.map( ({ id, coverImg, roomNo, occupyName, rentDueDate }) => (    ) )}   ) : ( 
 Vui lòng đăng nhập vào xem dữ liệu 
 )}  );};

Trong đoạn mã trên, chúng ta đang kiểm tra xem người dùng đã được xác thực hay chưa. Nếu đã xác thực, chúng ta sẽ hiển thị thông báo chào mừng với tên người dùng và danh sách các thẻ chứa tất cả thông tin về những người cư ngụ trong khu nhà. Để hoàn thiện ứng dụng của mình, hãy thêm một số kiểu:

const Container = styled.section` max-width: 90%; margin: 2rem auto; & h2 { font-weight: 500; margin-bottom: 2rem; font-size: 1.3rem; } & > article { width: 90%; margin: auto; display: flex; flex-wrap: wrap; .card { margin: 1rem; } } `;export default Home;

Tại đây, chúng ta đã thêm các kiểu vào trang chủ của mình. Nếu thực hiện đúng, ứng dụng của chúng ta sẽ trông như thế này:



Trong phần tiếp theo, chúng ta sẽ xây dựng trang hồ sơ của người dùng chính.

Xây dựng trang hồ sơ​

Trong phần này, chúng ta sẽ xây dựng trang hồ sơ cho ứng dụng của mình. Trang này sẽ hiển thị thông tin chi tiết về người dùng, bao gồm tên người dùng, địa chỉ email, tên và email đã xác minh từ Okta. Trong thư mục trang của ứng dụng, hãy tạo một thư mục mới, Profile, và trong đó tạo một tệp mới, index.js, thêm khối mã bên dưới:

import useAuthUser from "../hook/getUser";import styled from "styled-components";const Profile = () => { const userInfo = useAuthUser(); trả về (  [HEADING=2]Chi tiết hồ sơ của tôi[/HEADING]  [LIST] 
[*] Tên người dùng: {userInfo?.preferred_username} 
[*] Email: {userInfo?.email} 
[*] Họ và tên đầy đủ: {userInfo?.name} 
[*] Email đã xác minh: {userInfo?.email_verified ? "Có" : "Không"}  
[*] Khu vực: {userInfo?.zoneinfo} [/LIST]   );};

Tương tự như trang chủ của chúng ta, ở đây chúng ta sẽ lấy thông tin chi tiết của người dùng từ Okta sau khi họ đăng nhập vào ứng dụng. Sau đó, chúng ta tạo một thành phần Wrapper hiển thị thông tin chi tiết của người dùng đã đăng nhập.

Để hoàn thiện ứng dụng, hãy thêm các kiểu vào trang của chúng ta.

const Container = styled.section` max-width: 90%; margin: 2rem auto; & h2 { font-size: 1.3rem; font-weight: 500; margin-bottom: 1rem; } & ul { width: 50%; list-style: none; display: flex; flex-direction: column; background: #f2f3f5; padding: 1rem 2rem; & li { margin: 0.7rem 0; font-size: 1rem; } } `;export default Profile;

Chúng tôi đã thêm thành phần wrapper vào khối mã ở trên và xuất trang của chúng tôi dưới dạng một trang.

Ứng dụng của chúng tôi vẫn chưa hoàn thiện vì chúng tôi chưa định cấu hình xác thực Okta để cho phép người dùng đăng nhập. Vì vậy, chúng tôi sẽ định cấu hình bảng dữ liệu về người cư trú trong khu nhà ở trong phần tiếp theo.

Hoàn thiện ứng dụng của chúng tôi​

Để hoàn thiện ứng dụng của chúng tôi, hãy thêm các tuyến đường vào ứng dụng của chúng tôi. Các tuyến đường cho phép Okta biết người dùng nào sẽ được cấp quyền truy cập cụ thể. Trong trường hợp của chúng tôi, chúng tôi sẽ cung cấp mọi quyền truy cập cho người dùng chính, người có địa chỉ email được sử dụng để đăng ký ứng dụng Okta của chúng tôi.

Hãy tạo một tệp, Routes, trong thư mục gốc của ứng dụng và thêm đoạn mã bên dưới:

import { Route, Switch, useHistory } từ "react-router-dom";import { Security, SecureRoute, LoginCallback } từ "@okta/okta-react";import { OktaAuth, toRelativeUrl } từ "@okta/okta-auth-js";import Home từ "./pages/home";import Profile từ "./pages/profile";import { oktaAuthConfig } từ "./config";import Nav từ "./components/Navbar/Nav";const oktaAuth = new OktaAuth(oktaAuthConfig);const Routes = () => { const history = useHistory(); const restoreOriginalUri = async (_oktaAuth, originalUri) => { history.replace(toRelativeUrl(originalUri || "/", window.location.origin)); }; return (         );};export default Routes;

Trong đoạn mã trên, chúng tôi đã tạo một hàm, Routes, để chuyển hướng người dùng đến ứng dụng của chúng tôi sau khi họ đã đăng nhập bằng tiện ích đăng nhập Okta. Chúng tôi đã khởi tạo một ứng dụng Okta mới bằng Okta config. URL lưu trữ đặt thông tin đăng nhập Okta của chúng tôi. Và gói bảo mật từ Okta xử lý xác thực trong ứng dụng của chúng tôi.

Tuyến đăng nhập xử lý thông tin đăng nhập của người dùng. Tiếp theo, chúng tôi đã thêm các tuyến cho các trang Trang chủ, Hồ sơ và Gọi lại của mình. Và chúng tôi đã nhập gói bảo mật từ Okta.

Để hoàn thiện ứng dụng của mình, hãy nhập các tuyến vào tệp App.js của chúng tôi, như được hiển thị bên dưới:

import { BrowserRouter } from "react-router-dom";import Routes from "./Routes";const App = () => { return (    );};export default App;

Chúng tôi đã nhập tệp Routes, tệp này chứa các tuyến đường cho ứng dụng và quyền của chúng tôi. Ứng dụng của chúng tôi bây giờ sẽ trông giống như hình ảnh bên dưới.

Kết luận​

Xác thực và ủy quyền là hai tính năng thiết yếu trong các ứng dụng web. Bài viết này đã đề cập đến Okta, một nền tảng nhận dạng dưới dạng dịch vụ được xây dựng để xác thực và ủy quyền liền mạch. Chúng tôi cũng đã đề cập đến quy trình xây dựng ứng dụng quản lý bất động sản bằng React. Mã cho ứng dụng React estate của chúng tôi có thể được tìm thấy trên GitHub.

Tài nguyên​

• Tài liệu Okta
• “Thêm xác thực người dùng vào ứng dụng React của bạn”, Nhà phát triển Okta
• “Cấu hình xác thực Okta cho ứng dụng React”, DataHub