如何通过非交互式登录保护单页 Web 应用程序

即便在用户无法登录到 Microsoft Entra ID 时，也可以使用 Microsoft Entra ID 保护单页 Web 应用程序。

为了创建此非交互式身份验证流，首先创建一个负责从 Microsoft Entra ID 获取访问令牌的 Azure 函数安全 Web 服务。 此 Web 服务仅适用于单页 Web 应用程序。

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

1. 登录 Azure 门户。

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

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

   

创建 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 进行身份验证

创建 Azure 函数

若要创建一个受保护的 Web 服务应用程序（负责向 Microsoft Entra ID 进行身份验证），请执行以下操作：

1. 在 Azure 门户中创建函数。 有关详细信息，请参阅 Azure Functions 入门。

2. 在 Azure 函数上配置 CORS 策略，供单页 Web 应用程序访问。 CORS 策略可确保浏览器客户端仅访问允许的 Web 应用程序源。 有关详细信息，请参阅添加 CORS 功能。

3. 在 Azure 函数上添加系统分配的标识，以便创建用于对 Microsoft Entra ID 进行身份验证的服务主体。

4. 向系统分配的标识授予对 Azure Maps 帐户的基于角色的访问权限。 有关详细信息，请参阅授予基于角色的访问权限。

5. 为 Azure 函数编写代码，以使用系统分配的标识通过受支持的机制之一或 REST 协议获取 Azure Maps 访问令牌。 有关详细信息，请参阅获取 Azure 资源的令牌。

   下面是一个示例 REST 协议：

   GET /MSI/token?resource=https://atlas.microsoft.com/&api-version=2019-08-01 HTTP/1.1
   Host: localhost:4141
   

   下面是一个示例响应：

   HTTP/1.1 200 OK
   Content-Type: application/json
   
   {
       "access_token": "eyJ0eXAi…",
       "expires_on": "1586984735",
       "resource": "https://atlas.microsoft.com/",
       "token_type": "Bearer",
       "client_id": "..."
   }
   

6. 为 Azure 函数 HttpTrigger 配置安全性：

   1. 创建函数访问密钥
   2. 在生产环境中保护 Azure 函数的 HTTP 终结点。

7. 配置 Web 应用程序 Azure Maps Web SDK。

   //URL to custom endpoint to fetch Access token
   var url = 'https://{App-Name}.azurewebsites.net/api/{Function-Name}?code={API-Key}';
   
   var map = new atlas.Map('myMap', {
               center: [-122.33, 47.6],
               zoom: 12,
               language: 'en-US',
               view: "Auto",
           authOptions: {
               authType: "anonymous",
               clientId: "<insert>", // azure map account client id
               getToken: function(resolve, reject, map) {
                   fetch(url).then(function(response) {
                       return response.text();
                   }).then(function(token) {
                       resolve(token);
                   });
               }
           }
       });
   
       // use the following events to debug, you can remove them at any time.
       map.events.add("tokenacquired", function () {
           console.log("token acquired");
       });
       map.events.add("error", function (err) {
           console.log(JSON.stringify(err.error));
       });
   

向用户授予对 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。

后续步骤

进一步了解单页应用程序方案：

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

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