在 Azure 静态 Web 应用程序中启用 Angular 应用程序身份验证时出错

Question

我在 Azure 静态 Web 应用程序中托管 Angular 应用程序，但在实现身份验证时遇到一些问题。我的目标是让整个 Web 应用程序支持 Entra ID 身份验证。我的 staticwebapp.config.json 看起来像这样：

{
  "navigationFallback": {
    "rewrite": "index.html"
  },
  "routes": [
    {
      "route": "/*",
      "allowedRoles": ["authenticated"],
      "headers": {
        "Cache-Control": "no-store"
      }
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  },
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "ISSUER",
          "clientIdSettingName": "AZURE_CLIENT_ID",
          "clientSecretSettingName": "AZURE_CLIENT_SECRET"
        }
      }
    }
  }
}

我遇到的问题是，有时页面无法加载，并且我在控制台中收到以下错误

Refused to apply style from 'https://<url>/.auth/login/aad' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

在 root-url 上

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

/.auth/complete

当我尝试删除responseOverrides时，我可以看到一些获取js文件的请求失败并返回401。这有点奇怪，因为每次我重新加载页面时，它都会在不同的文件上失败。失败和成功的请求的 cookie 值是相同的。

我的配置文件是否做错了什么？

Answer 1

请参阅以下步骤以在 Javascript Azure 静态 Web 应用程序中成功添加身份验证：-

我的 Azure 静态 Web 身份验证应用程序 示例存储库。

创建新的 Azure AD 应用程序注册并添加 以下设置：-

复制应用程序（客户端）ID 和目录（租户）ID。

在 Azure AD 应用程序的“身份验证”选项卡中 > 添加平台 > Web 并添加重定向 URI>

yourstaticwebappurl/.auth/login/aad/callback

> ID 令牌（用于隐式流和混合流）

创建一个客户端密钥并将其复制到某处：-

在 API 权限中检查是否存在

User.Read

权限：-

在存储库中创建一个新文件：-

添加上面从 Azure AD 应用程序概述选项卡复制的

Directory (Tenant) ID

：-

staticwebapp.config.json

{
     “routes”: [
          {
         “route”: “/”,
                “allowedRoles”: [ “authenticated” ]
       }
     ],
     “responseOverrides”: {
             “401”: {
               “redirect”: “/.auth/login/aad”,
               “statusCode”: 302
             }
           },
     “auth”: {
       “identityProviders”: {
         “azureActiveDirectory”: {
           “registration”: {
             “openIdIssuer”: “https://login.microsoftonline.com/DirectoryTenantId“</font>,
             “clientIdSettingName”: “AADClientID”,
             “clientSecretSettingName”: “AADSecret”
           },”userDetailsClaim”: “http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name”
                 }
       }
     }
   }
</font></p>

在 Azure 静态 Web 应用程序配置或环境变量中添加复制的应用程序（客户端）ID 和客户端密钥：-

AADClientID:xxxxxxxx7ff6b5
AADSecret:XxxxxxxxxNaRW

确保您使用

Azure static web app

创建您的

Standard hosting plan

:-

输出：-

参考：-

演练静态 Web 应用程序和 Aad 身份验证 | Jeff Sanders 技术博客 (jsandersrocksblog.github.io)