简介
在前后端分离的架构中，前端向后端请求数据时，需要进行身份验证，以保证请求的安全性。Azure Active Directory 是 Microsoft 提供的一种跨平台的身份验证解决方案，已经成为越来越多企业和应用程序的首选。
在使用 Azure Active Directory 进行身份验证时，我们需要使用 MSAL 库进行身份验证。而 msal-helper 就是一个使用 MSAL 库简化开发的 npm 包。本文将介绍如何使用 msal-helper 进行身份验证。
安装
在项目中使用 npm 安装 msal-helper：
npm install msal-helper
客户端应用程序注册
在使用 msal-helper 进行身份验证之前，我们需要先创建一个 Azure Active Directory 应用程序，并为其分配相应的权限。我们也需要将应用程序配置添加到 msal-helper 配置中。以下是 Azure Active Directory 应用程序的注册过程：
- 访问 Azure 门户，并登录
- 单击左侧菜单栏中的“Azure Active Directory”，然后再单击“应用注册”
- 单击“新建注册”
- 在“注册应用程序”页面上，输入应用程序名称，并选择支持的账户类型（例如“任何组织目录中的帐户”或“仅限特定目录中的帐户”）
- 输入回调URL
- 选择应用程序的级别（例如“单租户”或“多租户”）
- 单击“注册”按钮
- 转到“API 权限”选项卡，向应用程序授予适当的权限
- 转到“身份验证”选项卡，配置身份验证设置，包括重定向 URL、前端所需的各种令牌和配置等。
我们需要将应用程序的域名和客户端 ID 添加到 msal-helper 配置中。同时，我们还需要设置应用程序的权限和令牌类型。
可以这样设置 msal-helper 配置：
----- ---------- - -
----- -
--------- -------------
---------- ---------------------------------------------
-------------------------- -----
--
------ -
-------------- ---------------
----------------------- -----
-
--
----- ----------------- - -
------- ---------- ---------- ----------------------------------------
-使用 msal-helper 进行身份验证
身份验证是一个异步过程，需要向 msal-helper 发送身份验证请求。身份验证请求将花费一些时间来完成，因此我们需要等待身份验证请求返回成功状态。然后才能使用身份验证的令牌来向后端发出请求。
以下是基本的身份验证过程：
- 检查本地缓存中是否有有效的令牌。如果有，执行步骤 6；如果没有，执行步骤 2。
- 向 Azure Active Directory 发送身份验证请求。msal-helper 会弹出一个登录窗口，要求用户输入有效的凭据。
- 用户登录并授予应用程序所需的权限。
- Azure Active Directory 发回包含访问令牌和刷新令牌的响应。
- 将访问令牌和刷新令牌保存在本地存储中。
- 使用访问令牌向后端发送请求。
以下是使用 msal-helper 进行身份验证的示例代码：
------ ---------- ---- --------------
----- ---------- - --- -----------------------
----- -------- ------- -
--- -
----- ------------- - ----- -------------------------------------------
---------------------------------------
-----------------------------------
- ----- ------- -
-------------------
-
-
----- -------- -------------- -
--- -
----- --------------- - ----- --------------------------------------------------
-----------------------------------------
- ----- ------- -
-------------------
-
-总结
在前后端分离的架构中，使用 Azure Active Directory 进行身份验证非常重要。而使用 msal-helper 可以使身份验证过程更简单和更快速。通过本文，您已经了解了如何使用 msal-helper 进行身份验证。如果您在使用 msal-helper 时遇到问题，请查阅 msal-helper 的官方文档。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055c2c81e8991b448d9cb8