静态Web应用中安全存储ClientID与TenantID的实现方案

虽然Azure静态Web应用的应用设置直接引用Key Vault的功能默认是为后端API设计的，但可以通过以下两种实用方案实现前端React应用获取这些敏感配置：

方案一：通过静态Web应用API作为中间层（动态获取，推荐） #

这是官方支持的方式，配置可动态更新无需重新部署前端：

1. 配置静态Web应用的应用设置
   在静态Web应用的Azure门户配置页，添加引用Key Vault的应用设置：

   • 变量名：AZURE_CLIENT_ID，值：@Microsoft.KeyVault(SecretUri=https://你的密钥保管库名称.vault.azure.net/secrets/clientid/)
   • 变量名：AZURE_TENANT_ID，值：@Microsoft.KeyVault(SecretUri=https://你的密钥保管库名称.vault.azure.net/secrets/tenantid/)
     同时要确保静态Web应用的系统分配身份拥有Key Vault的Secret Get权限。

2. 创建API接口返回配置
   在静态Web应用的api目录下创建一个简单的API函数（以Node.js为例）：

   module.exports = async function (context, req) {
       context.res = {
           body: {
               clientId: process.env.AZURE_CLIENT_ID,
               tenantId: process.env.AZURE_TENANT_ID
           },
           headers: {
               'Content-Type': 'application/json'
           }
       };
   };
   

   部署后，这个接口的访问路径为/api/getConfig（根据你创建的文件名调整）。

3. 前端React调用接口获取配置
   在React应用初始化时调用该接口，获取配置后用于认证初始化（比如MSAL.js）：

   import { useEffect, useState } from 'react';
   import { PublicClientApplication } from '@azure/msal-browser';
   
   function App() {
       const [authConfig, setAuthConfig] = useState(null);
   
       useEffect(() => {
           fetch('/api/getConfig')
               .then(res => res.json())
               .then(config => {
                   const msalInstance = new PublicClientApplication({
                       auth: {
                           clientId: config.clientId,
                           authority: `https://login.microsoftonline.com/${config.tenantId}`
                       }
                   });
                   // 保存实例或继续后续逻辑
                   setAuthConfig(config);
               })
               .catch(err => console.error('获取配置失败:', err));
       }, []);
   
       if (!authConfig) return <div>加载中...</div>;
   
       return (
           // 你的应用组件
           <div>应用内容</div>
       );
   }
   
   export default App;
   

方案二：构建阶段注入环境变量（静态注入） #

适合配置不需要频繁变更的场景，构建时直接将Key Vault的Secret注入到前端代码：

1. CI/CD管道中拉取Key Vault Secret
   在你的CI/CD流程（比如GitHub Actions、Azure DevOps）中，先通过Azure CLI拉取Secret并设置为环境变量：

   # 示例：Azure CLI拉取Secret
   CLIENT_ID=$(az keyvault secret show --name clientid --vault-name 你的密钥保管库名称 --query value -o tsv)
   TENANT_ID=$(az keyvault secret show --name tenantid --vault-name 你的密钥保管库名称 --query value -o tsv)
   # 设置为React可识别的环境变量（前缀必须为REACT_APP_）
   export REACT_APP_CLIENT_ID=$CLIENT_ID
   export REACT_APP_TENANT_ID=$TENANT_ID
   

2. 前端代码中直接引用环境变量
   React会自动嵌入以REACT_APP_开头的环境变量，代码中直接使用：

   import { PublicClientApplication } from '@azure/msal-browser';
   
   const msalInstance = new PublicClientApplication({
       auth: {
           clientId: process.env.REACT_APP_CLIENT_ID,
           authority: `https://login.microsoftonline.com/${process.env.REACT_APP_TENANT_ID}`
       }
   });
   

注意事项 #

• 方案一的API接口因为和前端同源，无需额外配置跨域；若单独部署API，需配置CORS规则。
• 方案二的配置在构建后固化在静态文件中，修改配置需要重新构建部署。
• 无论哪种方案，都要确保Key Vault的访问权限配置正确，避免泄露敏感信息。

内容的提问来源于stack exchange，提问作者Jason_Hough