将 Azure 静态 Web 应用与 Azure 前门集成并实施 AAD 身份验证

Question

使用 Azure Front Door 配置 Azure 静态 Web 应用程序时，尤其是从 Front Door 管理自定义域时，有几个关键设置可确保使用 Azure Active Directory (AAD) 进行正确的身份验证。

使用 Azure Front Door 配置 Azure 静态 Web 应用程序时，尤其是从 Front Door 管理自定义域时，有几个关键设置可确保使用 Azure Active Directory (AAD) 进行正确的身份验证。

关键配置点：

1. 环境变量:

   1. 静态 Web 应用程序的应用程序设置（环境变量）中输入的唯一值应该是 auth 块中的 CLIENT_ID 和 CLIENT_SECRET。

   2. 此外，请确保包含 TENANT_ID 和 CUSTOM_DOMAIN。

2. 自定义域:

   1. 示例：subdomain.domain.com

   2. 我通过 Front Door Premium 控制自定义域

3. 来源组设置:

   1. 在 Front Door 中设置源组时，请确保主机标头不留空。应该和原点是一样的。

4. AAD 集成:

   1. 虽然将应用程序服务和 Front Door 与 AAD 集成可能看起来很相似，但静态 Web 应用程序需要不同的方法。

示例配置（staticwebapp.config.json）：

{
  "routes": [
    {
      "route": "/*",
      "allowedRoles": ["authenticated"]
    }
  ],
  "networking": {
    "allowedIpRanges": [
      "AzureFrontDoor.Backend"
    ]
  ],
  "forwardingGateway": {
    "allowedForwardedHosts": [
      "your-subdomain.domain.com",
      "another-sub.domain.com"
    ]
  },
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  },
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/your-tenant-id/v2.0",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

其他提示：

•  环境变量：通过静态 Web 应用程序门户 GUI 正确注入环境变量。
•  回调 URI：在您的应用程序注册中包含回调 URI。
•  主机标头：确保原始标头与主机名匹配。

结论：

本指南旨在帮助您将 Azure 静态 Web 应用与 Azure Front Door 集成、管理自定义域并有效实施 AAD 身份验证。由于对此类配置的高需求，提供 Microsoft 类似的详细指南将是有益的。

您可以根据您的经验和需求随意调整或添加任何更具体的细节。

Answer 1

使用 Azure Front Door 配置 Azure 静态 Web 应用程序时，尤其是从 Front Door 管理自定义域时，有几个关键设置可确保使用 Azure Active Directory (AAD) 进行正确的身份验证。

关键配置点：

1. 环境变量:

   1. 静态 Web 应用程序的应用程序设置（环境变量）中输入的唯一值应该是 auth 块中的 CLIENT_ID 和 CLIENT_SECRET。

   2. 此外，请确保包含 TENANT_ID 和 CUSTOM_DOMAIN。

2. 自定义域:

   1. 示例：subdomain.domain.com

   2. 我通过 Front Door Premium 控制自定义域

3. 来源组设置:

   1. 在 Front Door 中设置源组时，请确保主机标头不留空。应该和原点是一样的。

4. AAD 集成:

   1. 虽然将应用程序服务和 Front Door 与 AAD 集成可能看起来很相似，但静态 Web 应用程序需要不同的方法。

示例配置（staticwebapp.config.json）：

{
  "routes": [
    {
      "route": "/*",
      "allowedRoles": ["authenticated"]
    }
  ],
  "networking": {
    "allowedIpRanges": [
      "AzureFrontDoor.Backend"
    ]
  ],
  "forwardingGateway": {
    "allowedForwardedHosts": [
      "your-subdomain.domain.com",
      "another-sub.domain.com"
    ]
  },
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  },
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/your-tenant-id/v2.0",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

其他提示：

  •  环境变量：通过静态 Web 应用程序门户 GUI 正确注入环境变量。
•  回调 URI：在您的应用程序注册中包含回调 URI。
•  主机标头：确保原始标头与主机名匹配。

 

结论：

 

本指南旨在帮助您将 Azure 静态 Web 应用与 Azure Front Door 集成、管理自定义域并有效实施 AAD 身份验证。由于对此类配置的高需求，提供 Microsoft 类似的详细指南将是有益的。

 

您可以根据您的经验和需求随意调整或添加任何更具体的细节。