如何在ReactJs应用中访问Google Secret Manager API创建的密钥？

首先必须明确：@google-cloud/secret-manager是服务端SDK，绝对不能直接在浏览器端的React应用中使用——这样会把你的Google Cloud服务账号密钥暴露给所有用户，引发严重的安全风险。正确的做法是通过自建后端API代理请求，由后端调用Secret Manager获取密钥后，再返回给React前端。

推荐方案：后端代理模式 #

1. 搭建后端服务（以Node.js/Express为例） #

先在后端项目安装依赖：

npm install @google-cloud/secret-manager express cors

2. 后端配置与密钥获取代码 #

创建后端路由，提供获取密钥的API接口：

const express = require('express');
const { SecretManagerServiceClient } = require('@google-cloud/secret-manager');
const cors = require('cors');

const app = express();
app.use(cors()); // 允许前端跨域请求

// 初始化Secret Manager客户端
const client = new SecretManagerServiceClient();

// 定义获取密钥的接口
app.get('/api/get-secret', async (req, res) => {
  try {
    // 替换为你的密钥资源ID，格式：projects/{项目ID}/secrets/{密钥名称}/versions/{版本号（如latest）}
    const name = 'projects/your-project-id/secrets/your-secret-name/versions/latest';
    
    // 调用API获取密钥
    const [version] = await client.accessSecretVersion({ name });
    const secretValue = version.payload.data.toString();
    
    res.json({ secret: secretValue });
  } catch (error) {
    console.error('获取密钥失败:', error);
    res.status(500).json({ error: '无法获取密钥' });
  }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`后端服务运行在端口 ${PORT}`);
});

3. 后端授权配置 #

确保后端运行环境（如Google Cloud Functions、VM实例或本地机器）拥有Secret Manager Secret Accessor角色权限。如果是本地开发，需设置环境变量指向你的服务账号密钥文件：

export GOOGLE_APPLICATION_CREDENTIALS="/本地路径/你的服务账号密钥文件.json"

4. React前端调用后端API #

在React组件中通过fetch或axios请求后端接口获取密钥：

import { useEffect, useState } from 'react';

function App() {
  const [secret, setSecret] = useState('');

  useEffect(() => {
    const fetchSecret = async () => {
      try {
        const response = await fetch('http://localhost:3001/api/get-secret');
        const data = await response.json();
        setSecret(data.secret);
      } catch (error) {
        console.error('请求密钥失败:', error);
      }
    };

    fetchSecret();
  }, []);

  return (
    <div>
      {secret ? <p>获取到的密钥内容：{secret}</p> : <p>加载中...</p>}
    </div>
  );
}

export default App;

不推荐的前端直接调用（仅本地测试用，禁止生产环境） #

如果只是本地临时测试，非要在前端尝试（强烈不建议生产环境使用），需要：

• 下载服务账号密钥文件，但绝对不能将其打包到React应用中
• 在前端代码中初始化客户端（注意：此操作会暴露服务账号密钥，风险极高）

import { SecretManagerServiceClient } from '@google-cloud/secret-manager';

async function getSecret() {
  const client = new SecretManagerServiceClient({
    credentials: {
      // 填入你的服务账号密钥JSON内容，生产环境绝对禁止这么做！
      client_email: '你的服务账号邮箱@你的项目ID.iam.gserviceaccount.com',
      private_key: '-----BEGIN PRIVATE KEY-----\n你的私钥内容\n-----END PRIVATE KEY-----\n'
    }
  });

  const name = 'projects/你的项目ID/secrets/你的密钥名称/versions/latest';
  const [version] = await client.accessSecretVersion({ name });
  const secretValue = version.payload.data.toString();
  console.log(secretValue);
}

再次提醒：生产环境必须使用后端代理模式，前端直接调用会导致Google Cloud资源被恶意利用，造成不可挽回的损失。

内容的提问来源于stack exchange，提问作者Mahalakshmi B S