标签: azure-static-web-app

我有一个托管在 Azure 静态 Web 应用上的 Vue 网站。它不通过 Azure Functions 使用受支持的 API 端点。我们的后端 API 托管在应用服务上，并且通常放置在与 ExpressRoute 对等的 VNET 中以访问本地资源。

由于我们不希望互联网上的任何人在应用服务 (example.azurewebsites.net) 上调用我们的 API，因此我们将它们放在 APIM 基本层后面，并设置访问限制以仅接受来自 APIM IP 的连接。

由于这是一个静态 Web 应用程序，我们必须将 APIM 订阅密钥放置在代码中，以便每个人都可以看到。通常，我们会通过 Microsoft 身份平台实施 Azure AD 身份验证，以对我们的应用程序的用户进行身份验证（隐式授权流或身份验证代码流）。此过程接收access_token包含我们可以在应用程序中使用的用户信息（例如姓名和电子邮件）。这样做的副产品是我们可以access_token使用标头将其传递给 APIM Authorization，APIM 可以自动验证此令牌，因此应用程序可以调用我们的 API。

我们正在评估Azure Static Web Apps中内置的身份验证和授权功能，希望用户身份验证开发能够更加轻松快捷。这确实更容易，我们只需将用户重定向到/.auth/login/aad，一切都由应用程序处理。然而，当我们检查的响应时/.auth/me，它仅显示identityProvider、userId和。userDetailsuserRoles

如果我们使用此身份验证功能，我们如何对 APIM 调用进行身份验证？没有access_token收到。

另一件事是，由于userDetails在本例中我们仅收到电子邮件地址，因此我们如何向 Microsoft Graph API 进行身份验证以获取用户的全名和其他信息？

我想要通过内置身份验证功能实现的目标是否可行？还是我们仍然需要自己实现身份验证？是否有任何解决方法可以避免我们自己实施此操作？使用内置的身份验证功能非常简单，前提是它也可以返回access_token …

更新3

抱歉我把这个更新放在这里，但我做了一个很好的发现。请阅读下面标题为“原始问题”的内容，回顾一下我所做的事情。

在完成以下相关内容之后，我意识到缓存发生了一些事情。但是，我也注意到在不同的计算机上错误仍然存​​在。在玩弄了 url 后我发现这个

https://yellow-hill-0ce1f0e10-4.centralus.azurestaticapps.net/contacto

和这个

https://yellow-hill-0ce1f0e10-4.centralus.azurestaticapps.net/contacto/

加载不同的网站。唯一的区别是尾部斜杠。

当我从 Visual Studio Code 本地运行此命令时，本地服务器会自动添加斜杠；Azure静态Web应用程序，没有

原始问题

我正在制作一个基于天蓝色静态网络应用程序的简单网站。我使用了本指南https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps。

我想制作一个新页面，因此我将所需的文件复制到新的 contacto 文件夹中。并进行所有更改。然后部署成功。

但是，部署的文件不是我修改的文件，而是原始文件，就好像没有检测到任何更改（如果需要检测更改）。例如。我在 github 中有这个 styles.css 文件

 body {
     font-family: ff-dagny-web-pro, sans-serif;
     font-weight: 300;
     font-style: normal;
 }

 .nopadding {
     padding: 0 !important;
 }

 .btn-primary {
     color: #383835;
     background-color: #ffd225;
     border-color: #ffd225;
 }

 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
     color: #383835;
     background-color: #ffd225;
     border-color: #ffd225;
     /*set the color you want here*/
 }


 ul.nav li a, ul.nav li a:visited {
     color: #3C3C3A !important; …

我使用Azure 静态 Web 应用创建了一个静态网站（目前在免费计划下 - 不确定这是否与当前的问题相关）。我可以通过 URL 访问该网站***.azurestaticapps.net。

然后，我尝试按照 Microsoft 此页面中的说明 测试Azure Active Directory 身份验证： https://learn.microsoft.com/en-us/azure/static-web-apps/authentication-authorization

我的问题是，注销似乎不像我在正常网站上所期望的那样工作。我可以注销，但当我尝试再次登录（希望使用不同的 Azure AD 帐户）时，Microsoft 登录屏幕会闪烁，我会使用刚刚注销的用户重新登录。切换到不同的选项卡没有帮助。

重现步骤：

1. 导航到/.auth/login/aadMicrosoft 帐户并使用它登录。对“保持登录状态？”说“不” 迅速的。
2. 导航到/.auth/me查看已登录帐户的基本信息，以证明我处于已登录状态。
3. 导航至/.auth/logout注销。立即再次导航/.auth/me以确认我的静态 Web 应用程序将我视为“已注销”。我会看到这个：

{"clientPrincipal": null}

4. 再次导航至/.auth/login/aad。Microsoft 登录页面一闪而过，我立即以之前注销的用户身份重新登录。

有效的事情

仅以下两个操作中的任何一个似乎都会使浏览器忘记我的登录状态：

1. 关闭整个浏览器并重新启动它。系统会要求我选择以前的用户（然后输入密码）或选择新用户。这种方法确实有效，但让我想起 15-20 年前的一些网站，上面写着“出于安全原因，请不要忘记从该选项卡注销后关闭整个浏览器。”
2. 在同一浏览器中打开一个新选项卡，然后导航到hotmail.com. 该选项卡将享受我在“静态 Web 应用程序”选项卡中的登录状态。我会立即看到我的邮件。然后我从该选项卡注销hotmail.com，切换回***.azurestaticapps.net选项卡，发现我仍然登录到我的静态 Web 应用程序。好的！然后，如果我从静态 Web 应用程序注销并尝试重新登录，它这次会忘记我的登录状态 …

我创建了一个具有以下文件结构的简单站点：

/index.html /down.html /.github/workflows/azure-static-web-apps-xxxx.yml /staticwebapp.config.json

这样就可以部署了，我可以看到我的索引和下页，如果我修改其中任何一个，它就会神奇地出现在网站上。

问题是它忽略 staticwebapp.config.json

我不知道该把它放在哪里，但我猜测根源。它不起作用。据推测它没有被读取或处理。

yaml 文件如下所示。我不知道它从哪里来，也不知道我是否需要它，因为该网站将是纯 HTML（非库、js 或框架）：

名称：Azure 静态 Web 应用 CI/CD

在：
  推：
    分支机构：
      - 主要的
  拉请求：
    类型：[打开、同步、重新打开、关闭]
    分支机构：
      - 主要的

工作：
  构建和部署作业：
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != '关闭')
    运行：ubuntu-latest
    名称：构建和部署作业
    脚步：
      - 使用：actions/checkout@v2
        和：
          子模块：true
      - 名称：构建和部署
        id: 构建部署
        使用：Azure/static-web-apps-deploy@v0.0.1-preview
        和：
          azure_static_web_apps_api_token：${{secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_xxx }}
          repo_token: ${{ Secrets.GITHUB_TOKEN }} # 用于Github集成（即PR评论）
          动作：“上传”
          ###### 存储库/构建配置 - 可以配置这些值以满足您的应用程序要求。######
          # 有关静态 Web 应用程序工作流配置的更多信息，请访问：https://aka.ms/swaworkflowconfig
          app_location: "/" # 应用源代码路径
          api_location: "api" # Api源代码路径 …

我有一个 Github Action 将我的静态 Web 应用程序部署到 Azure。

在构建和部署步骤中失败并显示 deployment_token was not provided.

下面是我的工作流程 yml 文件。我已经从我的完整 Azure 静态名称发布的文件中更改了 Secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_scrubbed 。

我创建了一个名为：Azure-new-host 的 Github 环境，其中包含一个秘密 AZURE_STATIC_WEB_APPS_API_TOKEN_scrubbed 以及来自 Azure 的部署令牌。

我查看了 Github 环境 secerts 和 Azure KeyVault

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    environment:
      name:Azure-new-host
      url:https://github.com
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - …

我已经设置了带有自定义域的 Azure 静态 Web 应用程序。example.com 和www.example.com均已正确设置并运行。

我现在想在 staticwebapp.config.json 中创建一些规则，以便所有传入https://example.com/ * 的请求都将重定向到https://www.example.com/ *。

有没有办法做到这一点？我知道我可以使用前门或类似的方式来完成此操作，但是我可以通过静态 Web 应用程序中的规则来完成此操作吗？

我正在尝试将 API 调用从静态 Web 应用程序重定向到另一个函数应用程序，但我无法使用通配符。

路线匹配正确，但我希望该*部分包含在重定向中。这是我的一个例子staticwebapp.config.json

  {
        "route": "/api/client/*",
        "redirect": "https://xx.yy.net/api/client/*"
  }

我希望请求/api/client/customer/get?customerId=xx成为https://xx.yy.net/api/client/customer/get?customerId=xx.

但无论我尝试什么，它都只是硬路由到我在重定向中放入的内容。通过代理，这可以通过函数实现，但我无法在静态 Web 应用程序中找到方法。

我在 Azure 中使用 GitHub 创建了一个静态 Web 应用程序。该应用程序和 API 运行良好，URL 类似于https://[random-name].azurestaticapps.net，来源是mainGitHub 中的分支。我的问题是我想将静态 Web 应用程序配置中的 GitHub 工作流文件的名称从 更改azure-static-web-apps-[random-name].yml为release-build.yml. 这是 GitHub 存储库目录中的文件：.github/workflows/。

回顾一下，我可以将 GitHub 中的工作流文件从 重命名azure-static-web-apps-[random-name].yml为release-build.yml，但无法在 Azure 中的静态 Web 应用程序资源中执行此操作。在Azure中哪里可以重命名该配置？我已经浏览了文档和配置，但我不知道在哪里执行此操作。

所附图片是我在 Azure 中的配置和我在 GitHub 中的配置。任何帮助表示赞赏。

天蓝色：

GitHub：

当我选择 GitHub 作为源提供程序时设置 Azure 静态 WebApp 时，UI 提供了一个选项以从现有分支之一中进行选择。但是应用程序创建后，我看不到任何更改源的选项。而在 Azure“应用服务”中，您可以断开与 GitHub 的连接，然后与不同的分支再次建立连接。

那么，是否可以更改 Azure SWA 中的源分支？

我在 Azure 中创建了一个静态 Web 应用程序。这只是一个只有 HTML 页面的普通网站。我能够部署和访问该应用程序。

问题是当我尝试将 Azure Active Directory 与此服务集成时。我的 staticwebapp.config.json 如下。

{
  "routes":[
    {
      "route": "/login",
      "rewrite": "/.auth/login/aad"
    },
    {
        "route": "/*",
        "allowedRoles": ["authenticated"]
    }
  ],
  "auth": {
    "identityProviders": {
      "azureActiveDirectory": {
        "registration": {
          "openIdIssuer": "https://login.microsoftonline.com/<tenant id removed>",
          "clientIdSettingName": "<client id value>",
          "clientSecretSettingName": "<client secret value>"
        }
      }
    }
  },
  "responseOverrides": {
    "401": {
      "redirect": "/login",
      "statusCode": 302
    }
  }
}

此后，当我尝试访问任何页面时，它会被重定向到 /login 并收到 404 页面。我预计它会转到天蓝色身份验证页面（由于重定向规则）。是否还需要进行任何其他配置来验证静态 Web 应用程序？