什么是 msal-react？
msal-react 是一个使用 Microsoft Authentication Library (MSAL) 提供的功能进行身份验证和授权的库。它允许您在React应用程序中轻松添加身份验证和授权功能。
当您使用msal-react进行身份验证和授权时，您的用户可以使用与Microsoft身份验证相同的登录凭据登录。这使得将 Office 365、Microsoft Teams、Microsoft Graph 等 Microsoft 服务集成到您的 React 应用程序中变得非常容易。
开始使用 msal-react
安装 msal-react
要开始使用msal-react，请首先使用 npm 包管理器安装依赖。
npm install msal msal-react
初始化 msal-react
在您的 React 应用程序中，您需要进行以下步骤以初始化并配置 msal-react：
-- -------------------- ---- -------
------ - ----------------------- - ---- ----------------------
------ - ------------ - ---- --------------------
----- ---------- - -
----- -
--------- -------------------
------------ -----------------
--
--
----- ------------ - --- ------------------------------------
-------- ------- -
------ -
------------- ------------------------
- -- ---- --- ---- ---- -- -
---------------
--
-在上例中，我们首先导入了 PublicClientApplication 和 MsalProvider，然后创建了一个“msalConfig”对象。该对象将用于配置 azure/msal-browser 库。
const msalConfig = {
auth: {
clientId: "<your_client_id>",
redirectUri: "<redirect_uri>",
},
};在这里，你应该设置你的客户端ID和重定向URI。clientId 是用于识别你的应用程序的字符串，而 redirectUri 指定了用户在进行身份验证后被重定向到你的应用程序的URL。
接下来，我们创建 PublicClientApplication 的一个实例。
const msalInstance = new PublicClientApplication(msalConfig);
最后，在您的应用程序层次结构中使用 MsalProvider 包装您的应用程序代码。
<MsalProvider instance={msalInstance}>
{ /* Your app code here */ }
</MsalProvider>这使得您的应用程序能够访问您的 msal-react 实例。
使用 msal-react
上面的步骤完成后，您就可以开始使用 msal-react 进行身份验证和授权了。
首先，您需要在您的应用程序中使用 useMsal 钩子来访问您的 msal-react 实例。
-- -------------------- ---- -------
------ - ------- - ---- --------------------
-------- ------------- -
----- - --------- --------- ---------- - - ----------
------ -
-----
- -- ---- --------- ---- ---- -- -
------
--
-在上例中，我们导入了 useMsal 钩子并使用它来访问 msal-react 实例，帐户和 inProgress 布尔值。帐户是一个数组，包含与当前访问 TokenCache 中的用户帐户信息。inProgress 布尔值指示是否有与当前请求相关联的呈现过程。例如，在登录过程中，该值将设置为 true。
接下来，您可以使用自己的自定义样式和逻辑来呈现您的登录和注销按钮。
-- -------------------- ---- -------
------ - ------- - ---- --------------------
-------- ------------- -
----- - --------- --------- ---------- - - ----------
----- ----------- - -- -- -
-------------------------
-
----- ------------ - -- -- -
------------------------ -- -
-------------------------
---------------------- -----------------------------
-------- --------
---
---
-
------ -
-----
---------------- - - -
------- -------------------------------------- -
------- -------------------------------------
------
--
-在这个例子中，我们创建了两个处理程序 handleLogIn 和 handleLogOut。handleLogIn 处理程序在用户单击“登录”按钮时使用 msalInstance 的 loginRedirect 方法引导用户进行身份验证。handleLogOut 处理程序则检查帐户是否存在，如果存在，则使用 msalInstance 的 logoutRedirect 方法引导用户退出登录。
接下来，我们使用自己的自定义样式和逻辑来呈现登录和注销按钮。
最后，我们需要为路由守卫创建一个自定义组件。
-- -------------------- ---- -------
------ - -------------------------- - ---- --------------------
------ - ------------- -- ------- ------- ----- - ---- -------------------
-------- ---------------- -------- -- -
------ -
----------------------------
----------
-----------------------------
--
-
-------- ------- -
------ -
--------
----------------
--------
------ ----- ---------
--------- --
--------
------ ----- ----------------
------------ --
--------
---------
-----------------
---------
--
-在这个例子中，我们首先导入用于呈现路由视图的 React Router 组件。接下来，我们创建了一个名为 MyAuthProvider 的自定义组件。这个组件简单的返回谷歌 msal-react 组件中的 MsalAuthenticationTemplate 组件。最后，我们将其与路由器和子视图组件一起使用。
结论
msal-react 简化了使用 MSAL 进行身份验证和授权的过程，使得将 Office 365、Microsoft Teams、Microsoft Graph 等 Microsoft 服务集成到您的 React 应用程序中变得非常容易。这篇教程中，我们详细介绍了如何安装、配置和使用 msal-react 进行身份验证和授权。这些步骤不仅直观易懂，而且能够让您上手使用 msal-react 和 MSAL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067354890c4f72775839a5