如何在React应用中读取Azure Key Vault密钥？求解决方案

首先明确：客户端React应用无法直接使用DefaultAzureCredentials访问Key Vault，这个认证方式依赖服务端环境变量、本地Azure CLI等系统级配置，浏览器环境不具备这些条件，且直接在客户端处理密钥会带来严重安全风险。

以下是两种可行方案：

方案一：通过后端代理访问（推荐，安全级别最高） #

核心思路是让你的后端服务作为中间层，用DefaultAzureCredentials访问Key Vault，React客户端通过调用后端API获取密钥。

后端示例（Node.js/Express） #

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

const app = express();
const port = process.env.PORT || 3001;

// 初始化Key Vault客户端
const credential = new DefaultAzureCredential();
const secretClient = new SecretClient("https://<你的Key Vault名称>.vault.azure.net/", credential);

// 提供给前端的接口
app.get('/api/secret/:secretName', async (req, res) => {
  try {
    const secret = await secretClient.getSecret(req.params.secretName);
    res.json({ value: secret.value });
  } catch (error) {
    res.status(500).json({ error: '获取密钥失败' });
  }
});

app.listen(port, () => {
  console.log(`后端服务运行在端口 ${port}`);
});

React客户端调用示例 #

async function fetchSecret(secretName) {
  try {
    const response = await fetch(`/api/secret/${secretName}`);
    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    // 使用获取到的密钥值
    console.log(data.value);
  } catch (error) {
    console.error('获取密钥出错:', error);
  }
}

方案二：Azure AD客户端认证访问（仅限非敏感场景） #

如果必须在客户端直接访问，可通过Azure AD注册SPA应用，配置Key Vault权限后，使用交互式认证方式获取密钥。注意：此方式需用户登录Azure账号，且密钥会在浏览器端传输，仅适用于非敏感密钥场景

步骤与代码示例 #

1. 在Azure AD注册单页应用（SPA），配置重定向URI为你的React应用地址（如http://localhost:3000）
2. 在Key Vault的「访问策略」中，添加该AD应用，授予「密钥-读取」权限
3. React代码实现：

import { InteractiveBrowserCredential } from "@azure/identity";
import { SecretClient } from "@azure/keyvault-secrets";

// 初始化认证客户端
const credential = new InteractiveBrowserCredential({
  clientId: "<你的AD应用客户端ID>",
  tenantId: "<你的Azure租户ID>"
});

// 初始化Key Vault客户端
const secretClient = new SecretClient("https://<你的Key Vault名称>.vault.azure.net/", credential);

async function getSecret(secretName) {
  try {
    const secret = await secretClient.getSecret(secretName);
    console.log('密钥值:', secret.value);
    return secret.value;
  } catch (error) {
    console.error('获取密钥失败:', error);
    return null;
  }
}

关键注意事项 #

• 禁止在客户端代码中硬编码任何敏感信息（如租户密钥、服务主体密码等）
• 配置Key Vault的网络访问策略：后端代理方式需允许后端服务器IP访问；客户端方式需允许客户端所在网络或启用「允许Azure服务和受信任的访问连接」
• 高敏感密钥必须使用后端代理方案，避免密钥暴露在客户端

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