每个环境的 React MSAL 身份验证

问题描述 投票:0回答:0

我正在学习每个环境的 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: []
  },
};

如何根据环境选择配置值?如何查看环境?

reactjs msal
© www.soinside.com 2019 - 2024. All rights reserved.