随着用户权限和数据保护的重要性日益增加，许多应用程序都需要用到身份验证和授权的功能。Microsoft 的身份鉴别和授权服务 Microsoft Authentication Library（MSAL）是目前广泛使用的解决方案之一。而 @jbuschke/react-msal 是一个基于 React 的 MSAL 包，帮助开发者轻松地在 React 应用程序中实现身份鉴别和授权。
概述
@jbuschke/react-msal 包通过提供一组 React 组件，帮助开发者在 React 应用程序中轻松地集成 MSAL。以及使用 Microsoft 身份验证门户（Azure Portal）管理身份验证的应用程序。该包还提供了 TypeScript 类型声明。
使用该包不需要自己编写任何与 MSAL 相关的代码，只需要了解一些配置和使用方法。使用该包可以快速构建面向企业的身份验证和授权应用程序。
安装
安装 @jbuschke/react-msal 包的最新稳定版本：
npm install @jbuschke/react-msal
使用
以下是一些使用 @jbuschke/react-msal 的示例代码。
配置文件
首先，需要在应用程序中创建一个 MSAL 配置文件。该配置文件应该包含应用程序的客户 ID，租户 ID 和其他必要的信息。这个文件的格式如下：
-- -------------------- ---- -------
----- -------- - -
--------- -------------
--------- -------------
------------ -----------------------
---------- -
--------- -----------------------------
--
-------------- --------------
--AuthProvider 组件
然后，需要使用 <AuthProvider> 组件包装 React 应用程序的根节点。该组件从配置文件中加载 MSAL 配置，并在应用程序中配置身份鉴别和授权。
-- -------------------- ---- -------
------ - ------------ - ---- -----------------------
-------- ----- -
------ -
------------- --------------------
---------- -----------
---------------
--
-useMsal Hook
接下来，可以使用 useMsal 钩子访问 MSAL 函数和状态。
-- -------------------- ---- -------
------ - ------- - ---- -----------------------
-------- --------- -
----- - --------- --------- ---------- - - ----------
-- ----------- --- ------- -- ---------- --- --------- -
------ ----------------------
-
-- ---------------- - -- -
------ -
-----
------- -------------------------
------- ----------- -- ------------------------------
------
--
-
------ ------- ----------- -- -----------------------------------
-该钩子向组件提供了 accounts、instance 和 inProgress 等状态和函数。
withInteractionRequired 高阶组件
使用 withInteractionRequired 高阶组件，可以将操作要求用户进行交互的功能包装在单独的组件中。组件将在用户完成交互后，使用 MSAL 身份鉴别信息进行验证。
import { withInteractionRequired } from '@jbuschke/react-msal';
class MyComponent extends React.Component {
...
}
export default withInteractionRequired(MyComponent);这将返回一个新的组件，它包装了 MyComponent 并添加一个名为 interactionRequired 的 prop。当用户进行了与 MSAL 相关的交互时，这个 prop 将设置为一个对象，包含重要的身份验证信息。
withMsal 高阶组件
该组件将把 accounts、instance 和 inProgress 等状态和函数作为 props 添加到组件中。
-- -------------------- ---- -------
------ - -------- - ---- -----------------------
----- ----------- ------- --------------- -
-------- -
----- - --------- --------- ---------- - - -----------
---
-
-
------ ------- ----------------------这将返回一个新的组件，它包装了 MyComponent 并添加了 accounts、instance 和 inProgress 等状态和函数作为 props。
总结
本文介绍了如何使用 @jbuschke/react-msal 包来快速构建身份验证和授权功能。我们讨论了配置文件、AuthProvider 组件、useMsal 钩子，以及 withInteractionRequired 和 withMsal 高阶组件的使用。使用这些工具，React 开发者可以通过 MSAL 轻松构建安全的企业级应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067354890c4f72775839a6