为 Azure 静态 Web 应用程序 (React MSAL) 配置应用程序设置

Question

我正在学习每个环境的 React 应用程序中的 MSAL 身份验证。

authConfig.ts

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

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

// scopes
export const loginRequest = {
    scopes: envConfig.msalConfig.scopes
  };

// endpoints 
export const config = {
    endpoint: `${envConfig.msalConfig.serviceBaseUrl}/api/v1/items`
};

IEnvConfig:

export interface IEnvConfig {  
  env: string;
  msalConfig: {
    uiClientId: string;
    authority: string;
    apiClientId: string;
    tenantId: string;
    serviceBaseUrl: string;
    scopes: string[];
  };
}

产品.ts

import { IEnvConfig } from "../config";

export const prod: IEnvConfig = {  
  env: "PROD",
  msalConfig: {
    uiClientId: "",
    authority: "https://login.microsoftonline.com/",
    apiClientId: "",
    tenantId: "tenantId",
    serviceBaseUrl: "https://xxx.azurewebsites.net",
    scopes: []
  },

};

内部

export const int: IEnvConfig = {  
  env: "INT",
  msalConfig: {
    uiClientId: "",
    authority: "https://login.microsoftonline.com/",
    apiClientId: "",
    tenantId: "tenantId",
    serviceBaseUrl: "https://xxx.azurewebsites.net",
    scopes: []
  },
};

UA:

export const ua: IEnvConfig = {  
  env: "UA",
  msalConfig: {
    uiClientId: "",
    authority: "https://login.microsoftonline.com/",
    apiClientId: "",
    tenantId: "tenantId",
    serviceBaseUrl: "https://xxx.azurewebsites.net",
    scopes: []
  },
};

如何根据环境选择配置值？如何查看我所处的环境？

Answer 1

与其为每个环境声明一个对象（

ua, int, prod

等），不如仅使用 1 个全局对象（即

config

）并在构建期间设置其值。查看为任意构建环境自定义环境变量和添加自定义环境变量了解更多信息。