身份验证是现代 Web 应用程序的一个关键方面，可确保对资源的安全访问并保护用户数据。Microsoft 身份验证库 （MSAL） 是一个功能强大的工具，可简化将身份验证集成到 Vue.js 应用程序的过程。在本指南中，我们将探讨如何使用 Vue 3 组合式 API 实现 MSAL。

先决条件：

在开始之前，请确保您已安装以下先决条件：

1. Node.js 和 npm：确保您的机器上安装了 Node.js 和 npm。

2. Vue CLI：安装 Vue CLI 来搭建和管理 Vue 项目。

3. 旨在用于单页应用程序场景。@azure/msal-browser

4. 在使用之前，您需要在 Azure AD 中注册一个单页应用程序，以获得有效的配置，并注册您的应用程序将接受重定向流量的路由。@azure/msal-browserclientId

设置 Vue 3 项目：

让我们从 Vue CLI 创建一个新的 Vue 3 项目开始：

npm init vue@latest

安装 MSAL：

接下来，我们需要安装 MSAL 库：

npm i @azure/msal-browser

配置 Azure 应用程序注册：

·登录 Azure 门户后，导航到 Azure AD 和应用程序注册，如下图所示。

·单击 New registration（新建注册）以开始预配新 Azure 应用程序的过程。您将看到一些需要填写的选项，具体取决于您的应用程序的工作方式。通常在开发中，在发布适当的终端节点之前，您将使用本地地址来测试身份验证。这可以在以后更改。

·创建后，您可以看到我们有一个具有 1 个 SPA URI 的新 Azure 应用程序注册，下一步是正确配置证书/机密、API 权限、品牌和所有权。

配置 MSAL：

在“src/config”目录中创建名为“msalConfig.ts”的新文件以存储 MSAL 配置：

创建认证方法：

现在，让我们创建一个方法来使用 MSAL 处理认证。在 src/config 目录下创建一个名为 useAuth.ts 的文件：

在 Component 中使用 Authentication 函数：

让我们将身份验证方法集成到一个组件中。修改 App.vue 文件，如下所示：

运行应用程序：

现在，你可以运行你的 Vue 3 应用程序了：

npm run dev

在浏览器中访问“http://localhost:5173”以查看 MSAL 身份验证的运行情况。

祝贺！你已使用组合式 API 在 Vue 3 应用程序中成功实现 MSAL 身份验证。您可以根据应用程序的要求随意进一步自定义代码。

Github 存储库

https://github.com/Shivanik97/msal-auth-vue

原文始发于微信公众号（安全狗的自我修养）：Vue 3 中的 MSAL 3.0 身份验证指南