如何在React应用程序中从KeyVault检索机密[typescript]

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

async function getSecretFromKeyVault(secretName: string): Promise<string> {
  const keyVaultName = "your-key-vault-name";
  const vaultUri = `https://${keyVaultName}.vault.azure.net`;

  // 创建默认凭证
  const credential = new DefaultAzureCredential();

  // 创建密钥客户端
  const client = new SecretClient(vaultUri, credential);

  // 检索机密值
  const secret = await client.getSecret(secretName);

  return secret.value;
}

import React, { useEffect, useState } from "react";

function App() {
  const [secretValue, setSecretValue] = useState<string>();

  useEffect(() => {
    // 在组件挂载时获取机密值
    const fetchSecret = async () => {
      const secret = await getSecretFromKeyVault("your-secret-name");
      setSecretValue(secret);
    };

    fetchSecret();
  }, []);

  return (
    <div>
      <h1>机密值：{secretValue}</h1>
    </div>
  );
}

export default App;

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