如何将 ClientID 和 Authority 存储在托管在 Azure 和公共的 React 应用程序中？

问：

我正在开发一个 React 应用程序，并且正在为 PublicClientApplication 配置 msalconfig.我是 Azure 和前端开发的新手。此外，我们是一个非常小的团队:(

我的问题： 硬编码 clientID 和权限：我阅读了多篇帖子，建议 clientID 和权限不是机密，可以直接存储在应用程序中。但是，我不愿对这些值进行硬编码，因为这似乎有风险。

Azure 应用服务配置：我还阅读了 Azure 应用服务在“配置”部分具有连接字符串/应用程序设置。但是，我不确定如何在 React 应用程序的代码中访问或使用这些设置，因为我是 Azure 新手。

我的第一个 Keyvault 注意事项：最初，我考虑通过 Azure Keyvault 检索 clientId 和颁发机构。但是，要访问 Keyvault，我需要提供机密，但我希望避免将任何此类机密存储在可能公开的客户端应用程序中。

问题： 对 clientID 和权限进行硬编码是一种安全的做法吗？有哪些安全隐患？

如何在 React 应用程序中从 Azure 应用服务访问连接字符串/应用程序设置？或者我什至应该使用它们？

使用的技术： 反应 维特 Azure 服务

后端只是 nodejs

import {Configuration, AccountInfo} from '@azure/msal-browser';

let MSAL_CONFIG: Configuration;

export const setupMSALConfig = async () => {
  MSAL_CONFIG = {
    auth: {
      clientId: import.meta.env.VITE_CLIENT_ID as string,
      authority: import.meta.env.VITE_AUTHORITY as string,
      redirectUri: '/',
    },
    cache: {
      cacheLocation: 'sessionStorage',
      storeAuthStateInCookie: true,
    },
    telemetry: {
      application: {
        appName: 'App',
        appVersion: '1.0.0',
      },
    },
  };
  return MSAL_CONFIG;
};

export type {AccountInfo};

export const loginRequest = {
  scopes: ['openid', 'profile', 'User.Read'],
};

我尝试对其进行硬编码/从密钥保管库获取信息。这有效，但有其缺点。