纯JavaScript Azure Web应用私有API密钥存储方案咨询

嘿，这个场景我太熟了！你选Azure Key Vault存API密钥绝对是正确的思路——毕竟把密钥直接写在前端HTML/JS里，那跟把密码贴在脑门上没区别😂。下面我给你一步步捋清楚权限配置和安全获取密钥的方法，都是实操过的，跟着来就行：

要让Web App能安全访问Key Vault，首先得给它一个“合法身份”，不用手动存任何凭据：

• 打开你的Azure Web App资源，左侧导航栏找到「标识」（Identity）
• 切换到「系统分配」标签，把状态改成「开启」，点击保存，确认启用。这时候Azure会自动给这个Web App创建一个专属的服务主体，用来做身份认证。

现在要给刚才的Web App身份开权限，让它能从Key Vault里拿密钥：

• 打开你的Key Vault资源，左侧导航找「访问策略」（Access Policies）
• 点击「添加访问策略」，在「机密权限」里只勾选「获取」（Get）和「列出」（List）——这俩权限足够拿密钥了，别给多余的，遵循最小权限原则
• 切换到「选择主体」，搜索你刚才启用系统标识的Web App的名称，选中它，完成添加
• 最后一定要点击「保存」，让策略生效

你之前想的用前端REST请求拿密钥的路子行不通——前端代码是完全公开的，哪怕你藏得再好，别人都能扒到请求逻辑，等于把密钥的访问权限拱手让人。正确的做法是：所有敏感操作（拿密钥、调用Bing API）都放在Web App的后端里，前端只跟自己的后端要最终的图表数据。

下面给你两种安全获取密钥的实操方案：

方案一：用App Service应用设置直接引用Key Vault（最简单，不用写代码） #

这个方法不用改任何代码，让Azure帮你自动把密钥注入到Web App的环境变量里：

• 打开Web App的「配置」（Configuration），进入「应用程序设置」，点击「新建应用程序设置」
• 名称填个好记的，比如BING_API_KEY，值填@Microsoft.KeyVault(SecretUri=你的密钥完整URI)——密钥的URI可以在Key Vault的「机密」里找到，点对应机密，看「当前版本」里的「机密标识符」
• 保存设置，Web App会自动重启。之后你在后端代码里就能直接读取这个环境变量（比如Node.js用process.env.BING_API_KEY，Python用os.getenv("BING_API_KEY")），然后用它调用Bing API，再把处理好的图表数据返回给前端。

方案二：用代码在后端获取密钥（适合需要自定义逻辑的情况） #

如果你的Web App有简单的后端（比如Node.js、Python），可以用Azure的官方SDK来获取密钥：
以Node.js为例，先装依赖：

npm install @azure/keyvault-secrets @azure/identity

然后写代码：

const { SecretClient } = require("@azure/keyvault-secrets");
const { DefaultAzureCredential } = require("@azure/identity");

// 获取Bing API密钥
async function getBingApiKey() {
  const vaultUrl = "https://你的KeyVault名称.vault.azure.net";
  // DefaultAzureCredential会自动用Web App的系统托管标识认证，不用手动填凭据
  const credential = new DefaultAzureCredential();
  const client = new SecretClient(vaultUrl, credential);
  
  const secret = await client.getSecret("你的机密名称");
  return secret.value;
}

// 调用Bing API并返回数据给前端
async function fetchBingData() {
  const apiKey = await getBingApiKey();
  const response = await fetch("Bing API的请求URL", {
    headers: { "Ocp-Apim-Subscription-Key": apiKey }
  });
  const data = await response.json();
  // 这里可以把数据处理成chartjs需要的格式再返回
  return data;
}

这个方法完全不用暴露任何凭据，所有认证都是Azure内部自动处理的，非常安全。

• 永远不要让前端代码接触API密钥或者Key Vault，所有敏感逻辑都放后端
• Key Vault的访问策略只给必要的权限，别贪多
• 如果你的Web App是纯静态的（没有后端），那可以考虑加个简单的Azure Functions作为后端中转，同样用托管标识访问Key Vault，逻辑跟上面一样

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