使用开发人员帐户在本地开发期间向 Azure 服务验证 JavaScript 应用

创建云应用程序时,开发人员需要在其本地工作站上调试和测试应用程序。 在本地开发期间,当应用程序在开发人员的工作站上运行时,它仍然必须向应用使用的任何 Azure 服务进行身份验证。 本文介绍如何在本地开发期间使用开发人员的 Azure 凭据对访问 Azure 的应用进行身份验证。

显示运行从 .env 文件获取服务主体并使用该标识连接到 Azure 资源的本地开发应用的关系图。

要使应用在使用开发人员的 Azure 凭据进行本地开发期间向 Azure 进行身份验证,开发人员必须从 Visual Studio Code Azure 工具扩展、Azure CLI 或 Azure PowerShell 登录到 Azure。 Azure SDK for JavaScript 能够检测开发人员是否从其中一个工具登录,然后从凭据缓存中获取必要的凭据,以将应用作为登录用户向 Azure 进行身份验证。

这种方法对于开发团队而言最容易设置,因为它利用开发人员的现有 Azure 帐户。 但是,开发人员的帐户可能比应用程序所需的权限更多,因此超出了应用在生产环境中运行的权限。 作为替代方法,可以创建在本地开发期间使用的应用程序服务主体,其权限范围仅限应用所需的访问权限。

1 - 为本地开发创建 Microsoft Entra 组

由于几乎总是有多个开发人员在应用程序中工作,因此建议先创建一个Microsoft Entra 组来封装应用在本地开发中所需的角色(权限)。 这种做法的优势如下。

  • 由于角色是在组级别分配的,因此可以确保为每个开发人员分配相同的角色。
  • 如果应用需要新角色,则只需将其添加到应用的 Microsoft Entra 组即可。
  • 如果新的开发人员加入团队,只需将他们添加到正确的 Microsoft Entra 组,他们即可获得处理应用程序的正确权限。

如果开发团队已有一个 Microsoft Entra 组,则你可以使用该组。 否则,请完成以下步骤来创建 Microsoft Entra 组。

说明 屏幕快照
通过在页面顶部的搜索框中键入 Microsoft Entra ID,然后从“服务”下选择“Microsoft Entra ID”,导航到 Azure 门户中的“Microsoft Entra ID”页。 显示如何使用 Azure 门户顶部的搜索栏搜索并导航到 Microsoft Entra ID 页面的屏幕截图。
在“Microsoft Entra ID”页上,从左侧菜单中选择“组”。 显示“组”菜单项在“Microsoft Entra ID 默认目录”页左侧菜单中的位置的屏幕截图。
在“所有组”页上,选择“新建组”。 显示“新建组”按钮在“所有组”页中的位置的屏幕截图。
在“新建组”页上
  1. 组类型 → 安全性
  2. 组名称 → 安全组的名称,通常是基于应用程序名称创建的。 在组的名称中加入类似于 local-dev 的字符串来指示组的用途也很有帮助。
  3. 组说明 → 组的用途说明。
  4. 在“成员”下选择“未选择成员”链接,以将成员添加到组中。
显示如何新建 Microsoft Entra 组的屏幕截图。突出显示了选择要将成员添加到此组的链接的位置。
在“添加成员”对话框中
  1. 使用搜索框筛选列表中的用户名。
  2. 选择一个或多个应用对此应用进行本地开发。 选择对象时,该对象将移动到对话框底部的“选定项”列表。
  3. 完成后,选中“选择”按钮。
“添加成员”对话框的屏幕截图,其中显示了如何选择要包含在组中的开发人员帐户。
返回“新建组”页,选择“创建”以创建组。

随后会创建组,你将返回到“所有组”页。 最长可能需要在 30 秒后才会显示该组,由于 Azure 门户中会进行缓存,你可能需要刷新页面。
“新建组”页的屏幕截图,其中显示了如何选择“创建”按钮来完成该过程。

2 - 将角色分配给 Microsoft Entra 组

接下来,需要确定应用在哪些资源上需要哪些角色(权限),并将这些角色分配到应用。 在此示例中,角色将分配给在步骤 1 中创建的 Microsoft Entra 组。 可以在资源、资源组或订阅范围分配角色。 此示例演示如何在资源组范围分配角色,因为大多数应用程序将其所有 Azure 资源分组到单个资源组中。

说明 屏幕快照
使用 Azure 门户顶部的搜索框搜索资源组名称,找到应用程序的资源组。

在对话框中的“资源组”标题下选择资源组名称,导航到该资源组。
显示如何使用 Azure 门户中的顶部搜索框来查找并导航到要为其分配角色(权限)的资源组的屏幕截图。
在资源组的页面上,从左侧菜单中选择“访问控制(IAM)”。 资源组页面的屏幕截图,其中显示了“访问控制(IAM)”菜单项的位置。
在“访问控制(IAM)”页上
  1. 选择“角色分配”选项卡。
  2. 从顶部菜单中选择“+ 添加”,然后从出现的下拉菜单中选择“添加角色分配”。
显示如何导航到角色分配选项卡,以及用于将角色分配添加到资源组的按钮的位置的屏幕截图。
“添加角色分配”页列出了可为资源组分配的所有角色。
  1. 使用搜索框筛选列表,以便以更容易操作的大小显示内容。 此示例演示如何筛选存储 Blob 角色。
  2. 选择要分配的角色。
    选择“下一步”转到下一屏幕。
显示如何筛选和选择要添加到资源组的角色分配的屏幕截图。
在下一个“添加角色分配”页面中,可以指定要将角色分配给哪个用户。
  1. 在“将访问权限分配给”下选择“用户、组或服务主体”。
  2. 在“成员”下选择“+ 选择成员”
Azure 门户的右侧会打开一个对话框。
该屏幕截图显示了用于选择将角色分配到 Microsoft Entra 组的单选按钮,以及用于选择要将角色分配到的组的链接。
在“选择成员”对话框中
  1. “选择”文本框可用于筛选订阅中的用户和组列表。 如果需要,请键入为应用创建的本地开发 Microsoft Entra 组的前几个字符。
  2. 选择与应用程序关联的本地开发 Microsoft Entra 组。
在对话框底部选择“选择”以继续。
显示如何在“选择成员”对话框中为应用程序筛选和选择 Microsoft Entra 组的屏幕截图。
现在,该 Microsoft Entra 组将在“添加角色分配”屏幕上显示为选中状态。

选择“查看 + 分配”转到最后一页,然后再次选择“查看 + 分配”完成该过程。
显示已完成的“添加角色分配”页,以及用于完成该过程的“查看 + 分配”按钮的位置的屏幕截图。

3 - 使用 VS Code、Azure CLI 或 Azure PowerShell 登录到 Azure

在开发人员工作站上打开终端,然后从 Azure PowerShell 登录到 Azure。

Connect-AzAccount

4 - 在应用程序中实现 DefaultAzureCredential

若要向 Azure 对 Azure SDK 客户端对象进行身份验证,应用程序应使用 @azure/identity 包中的 DefaultAzureCredential 类。 在此方案中, DefaultAzureCredential 将按顺序检查开发人员是否已使用 VS Code Azure 工具扩展、Azure CLI 或 Azure PowerShell 登录到 Azure。 如果开发人员使用其中任何工具登录到 Azure,则用于登录该工具的凭据将由应用用来向 Azure 进行身份验证。

首先将 @azure/标识 包添加到应用程序。

npm install @azure/identity

接下来,对于在应用中创建 Azure SDK 客户端对象的任何 JavaScript 代码,你需要:

  1. @azure/identity 模块中导入 DefaultAzureCredential 类。
  2. 创建 DefaultAzureCredential 对象。
  3. DefaultAzureCredential 对象传递给 Azure SDK 客户端对象构造函数。

以下代码片段中显示了此操作的示例。

import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';

// Acquire a credential object
const tokenCredential = DefaultAzureCredential();

const blobServiceClient = BlobServiceClient(
        `https://${accountName}.blob.core.windows.net`,
        tokenCredential
);

DefaultAzureCredential 将自动检测为应用配置的身份验证机制,并获取必要的令牌,以便向 Azure 对应用进行身份验证。 如果应用程序使用多个 SDK 客户端,则同一凭据对象可与每个 SDK 客户端对象一起使用。