你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

使用用户登录保护单页应用程序

  • 项目

以下指南适用于内容服务器上托管的应用程序或对 Web 服务器依赖性最小的应用程序。 应用程序提供仅对 Microsoft Entra 用户而言安全的受保护资源。 此方案的目标是使 Web 应用能够对 Microsoft Entra ID 进行身份验证，并代表用户调用 Azure Maps REST API。

若要在 Azure 门户中查看 Azure Maps 帐户身份验证详细信息：

  1. 登录 Azure 门户。

  2. 导航到 Azure 门户菜单。 选择“所有资源”，然后选择你的 Azure Maps 帐户。

  3. 在左侧窗格中的“设置”下，选择“身份验证” 。

    Screenshot showing your Azure Maps authentication options in the Azure portal.

创建 Azure 地图帐户时，将创建三个值。 这些值将用于在 Azure Maps 中支持两种类型的身份验证：

  • Microsoft Entra 身份验证：Client ID 表示要用于 REST API 请求的帐户。 Client ID 值应存储在应用程序配置中，然后在发出使用 Microsoft Entra 身份验证的 Azure Maps HTTP 请求之前检索该值。
  • 共享密钥身份验证：Primary Key 和 Secondary Key 用作共享密钥身份验证的订阅密钥。 共享密钥身份验证依赖于将 Azure Maps 帐户生成的密钥连同每个请求一起传递到 Azure Maps。 建议定期重新生成密钥。 为在重新生成期间保持当前连接，有两个密钥可供使用。 重新生成另一个密钥期间，可使用其中一个密钥。 重新生成密钥时，必须将访问此帐户的所有应用程序更新为使用新密钥。 有关详细信息，请参阅向 Azure Maps 进行身份验证

在 Microsoft Entra ID 中创建应用程序注册

在 Microsoft Entra ID 中创建 Web 应用，以便用户登录。 Web 应用程序将用户访问权限委托给 Azure Maps REST API。

  1. 在 Azure 门户的 Azure 服务列表中，依次选择“Microsoft Entra ID”>“应用注册”>“新注册”。

    A screenshot showing application registration in Microsoft Entra ID.

  2. 输入“名称”，选择“支持帐户类型”，提供重定向 URI，它表示 Microsoft Entra ID 将颁发令牌的 url，是用于托管地图控件的 url。 有关详细示例，请参阅 Azure Maps Microsoft Entra ID 示例。 然后选择“注册”。

  3. 若要将委托的 API 权限分配给 Azure Maps，请访问应用程序。 然后在“应用注册”下，选择“API 权限”>“添加权限” 。 在“我的组织使用的 API”下，搜索并选择“Azure Maps” 。

    Screenshot showing a list of APIs my organization uses.

  4. 选中“访问 Azure Maps”旁边的复选框，然后选择“添加权限” 。

    Screenshot showing the request app API permissions screen.

  5. 启用 oauth2AllowImplicitFlow。 若要启用它，请在应用注册的“清单”部分，将 oauth2AllowImplicitFlow 设为 true。

  6. 复制应用注册中的 Microsoft Entra 应用程序 ID 和 Microsoft Entra 租户 ID，以在 Web SDK 中使用。 将 Microsoft Entra 应用注册详细信息和 x-ms-client-id 从 Azure Map 帐户添加到 Web SDK。

        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js" />
    <script>
        var map = new atlas.Map("map", {
            center: [-122.33, 47.64],
            zoom: 12,
            language: "en-US",
            authOptions: {
                authType: "aad",
                clientId: "<insert>",  // azure map account client id
                aadAppId: "<insert>",  // azure ad app registration id
                aadTenant: "<insert>", // azure ad tenant id
                aadInstance: "https://login.microsoftonline.com/"
            }
        });
    </script>

  7. 为用户或组配置 Azure 基于角色的访问控制 (Azure RBAC)。 请参阅以下部分，了解如何启用 Azure RBAC。

向用户授予对 Azure Maps 基于角色的访问权限

通过将 Microsoft Entra 组或安全主体分配到一个或多个 Azure Maps 角色定义，可授予 Azure 基于角色的访问控制 (Azure RBAC)。

若要查看 Azure Maps 的可用 Azure 角色定义，请参阅查看内置的 Azure Maps 角色定义。

若要详细了解如何将可用的 Azure Maps 角色分配给创建的托管标识或服务主体，请参阅使用 Azure 门户分配 Azure 角色

若要高效管理大量用户对 Azure Maps 应用和资源的访问，请参阅 Microsoft Entra 组。

重要

要允许用户对应用程序进行身份验证，必须先在 Microsoft Entra ID 中创建用户。 有关详细信息，请参阅使用 Microsoft Entra ID 添加或删除用户。

若要了解如何有效地管理大型用户目录，请参阅 Microsoft Entra ID。

警告

Azure Maps 内置角色定义提供了一种范围很广的授权访问权限，可以访问许多 Azure Maps REST API。 若要将 API 访问权限限制为最小范围，请参阅创建自定义角色定义并将系统分配的标识分配给自定义角色定义。 这样即可将访问权限限制为应用程序访问 Azure Maps 所需的最少特权。

后续步骤

进一步了解单页应用程序场景：

单页应用程序

查找 Azure Maps 帐户的 API 使用指标：

查看使用情况指标

探索演示如何将 Microsoft Entra ID 与 Azure Maps 集成的示例：

Azure Maps 示例