无法从静态 Web 应用程序读取配置值

Question

我已经在 Azure 中部署了一个具有以下配置设置的静态 Web 应用程序：

    REACT_APP_AAD_UI_APP_CLIENT_ID: 'xxxx'
    REACT_APP_AAD_API_APP_CLIENT_ID: 'yyyy'
    REACT_APP_AAD_APP_TENANT_ID: 'abcd'
    REACT_APP_AAD_APP_SERVICE_BASE_URI: 'https://xxx.api.azurewebsites.net'

山药：

steps:
  - task: AzureResourceManagerTemplateDeployment@3
    displayName: 'Deploy WebApp compute resources'
    inputs:
      azureResourceManagerConnection: ${{parameters.serviceConnection}}
      subscriptionId: ${{parameters.subscriptionId}}
      resourceGroupName: ${{parameters.resourceGroupName}}
      location: ${{parameters.location}}
      csmFile: ${{ parameters.root }}/compute/template.bicep
      csmParametersFile: ${{ parameters.root }}/compute/parameters.json      
      deploymentMode: 'Incremental'
      deploymentOutputs: deploymentOutputs

  - task: AzureStaticWebApp@0
    name: DeployStaticWebApp
    displayName: Deploy Static Web App
    inputs:
      app_location: 'web-app'
      cwd: '${{ parameters.root }}/webapp_package'
      azure_static_web_apps_api_token: $(deployment_token)

template.bicep

resource staticWebApp 'Microsoft.Web/staticSites@2022-03-01' = {
  name: '${solutionAbbreviation}-ui'
  location: location
  sku: {
    name: 'Free'
    tier: 'Free'
  }
  properties: {
    allowConfigFileUpdates: true
    branch: branch
    buildProperties: {
      appLocation: 'UI/web-app'
      skipGithubActionWorkflowGeneration: true
    }
    enterpriseGradeCdnStatus: 'Disabled'
    provider: 'DevOps'
    repositoryUrl: repositoryUrl
    stagingEnvironmentPolicy: 'Disabled'
  }
}

resource staticWebAppAppSettings 'Microsoft.Web/staticSites/config@2022-03-01' = {
  parent: staticWebApp
  name: 'appsettings'
  properties: {
    REACT_APP_AAD_UI_APP_CLIENT_ID: 'ui-client-id'
    REACT_APP_AAD_API_APP_CLIENT_ID: 'api-client-id'
    REACT_APP_AAD_APP_TENANT_ID: 'tenant-id'
    REACT_APP_AAD_APP_SERVICE_BASE_URI: 'url'
  }
}

我有以下 authConfig.ts：

import { Configuration } from "@azure/msal-browser";

// Config object to be passed to Msal on creation
export const msalConfig: Configuration = {
    auth: {
        clientId: `${process.env["REACT_APP_AAD_UI_APP_CLIENT_ID"]}`,
        authority: `https://login.microsoftonline.com/${process.env["REACT_APP_AAD_APP_TENANT_ID"]}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    }
};

// scopes
export const loginRequest = {
    scopes: [`api://${process.env["REACT_APP_AAD_API_APP_CLIENT_ID"]}/user_impersonation`]
  };

// endpoints 
export const config = {
    endpoint: `${process.env["REACT_APP_AAD_APP_SERVICE_BASE_URI"]}/api/v1/items`
};

在部署后运行它，我看到这个错误：

未捕获（承诺）ClientAuthError：endpoints_resolution_error：错误：无法解析端点。请检查网络并重试。详细信息：ClientAuthError：openid_config_error：无法检索端点。检查您的权限并验证 .well-known/openid-configuration 端点返回所需的端点。尝试从以下位置检索端点：https://login.microsoftonline.com/v2.0/.well-known/openid-configuration

看起来它无法从配置设置中获取值（看起来它没有从配置中读取 tenantId）

在控制台中运行 process.env["REACT_APP_AAD_APP_TENANT_ID"] 时，我看到 Uncaught ReferenceError: process is not defined at :1:1

我错过了什么？

这是在我添加具有以下值的 .env 文件后在本地运行的：

    REACT_APP_AAD_UI_APP_CLIENT_ID= 'xxxx'
    REACT_APP_AAD_API_APP_CLIENT_ID= 'yyyy'
    REACT_APP_AAD_APP_TENANT_ID= 'abcd'
    REACT_APP_AAD_APP_SERVICE_BASE_URI= 'https://xxx.api.azurewebsites.net'

Answer 1

process

对象在 node.js 环境中可用。您无法从浏览器控制台访问它。但是，当应用程序在 node.js 上下文中运行时，您可以将其记录在代码中以检查日志。

当您添加 .env 文件时，它开始在本地运行，因为 node.js 应用程序在其引导过程中加载它并使变量可用。在 Azure 服务器上运行构建的代码时，如果您没有在 node.js 上下文中运行它，那么您需要执行以下操作。

你需要有一个来源来获取它。在构建期间，您需要将 .env 文件中的值转换为部署包中包含的类似 config.json 或 yaml 文件的文件。在您的代码中，您读取此文件并将值合并到您的配置对象中。但是，请注意，从该文件读取时，您的配置值将被公开。

如果您在 Azure 服务器上的 node.js 上下文中运行它，则需要包含 .env 文件。这不会暴露您的配置值。

另一种方法是从运行应用程序的容器中提供配置值 - 假设您有一个 Web 应用程序并且您的 React 应用程序正在其上下文中运行，然后您可以将配置提升到全局窗口对象中并使用它。假设你将它加载到 window.appname.config 并从那里读取它。

希望这有帮助。

Answer 2

import { Configuration } from "@azure/msal-browser";

// Config object to be passed to Msal on creation
export const msalConfig: Configuration = {
    auth: {
        clientId: `${process.env.REACT_APP_AAD_UI_APP_CLIENT_ID}`,
        authority: `https://login.microsoftonline.com/${process.env.REACT_APP_AAD_APP_TENANT_ID}`,
        redirectUri: "/",
        postLogoutRedirectUri: "/"
    }
};

// scopes
export const loginRequest = {
    scopes: [`api://${process.env.REACT_APP_AAD_API_APP_CLIENT_ID}/user_impersonation`]
  };

// endpoints 
export const config = {
    endpoint: `${process.env.REACT_APP_AAD_APP_SERVICE_BASE_URI}/api/v1/items`
};