如何在React+Shopify应用中安全存储第三方API密钥

核心问题说明 #

你当前的写法有两个核心问题：

• 所有前端代码中的内容（包括硬编码的密钥、带REACT_APP_前缀的环境变量）都可以通过浏览器调试工具被用户获取，绝对不能把client_secret这类敏感凭证放到前端
• 带REACT_APP_前缀的环境变量只在前端构建时注入，后端是读取不到的，反之你不想暴露到前端的敏感变量不要加这个前缀，只在后端使用

Shopify本身的实现逻辑也是如此：SHOPIFY_API_SECRET只在server.js后端代码里使用，永远不会暴露到前端。你对接第三方服务也应该遵循同样的逻辑：所有敏感交互都走自带的Node.js后端，前端只和自己的后端通信，完全不接触任何敏感凭证和token。

具体实现步骤 #

步骤1：更新.env配置 #

在项目根目录的.env文件中添加第三方服务的配置，和原有Shopify配置放在一起，不要加REACT_APP_前缀，确保只有后端可以读取：

# 原有Shopify配置保持不变即可
SHOPIFY_API_KEY=xxx
SHOPIFY_API_SECRET=xxx
SCOPES=xxx
HOST=xxx

# 新增第三方服务配置
THIRDPARTY_API_KEY=替换为你的第三方API Key
THIRDPARTY_API_SECRET=替换为你的第三方API Secret
THIRDPARTY_TOKEN_URL=https://oauth.somethirdparty.se/v1/token

步骤2：修改server.js添加后端代理逻辑 #

我们在后端实现两个能力：自动获取/缓存第三方token，封装第三方接口供前端调用，全程敏感信息不会流出后端。
首先安装依赖（如果没装axios的话）：

npm install axios

然后修改server.js，在已有路由之前添加如下代码：

const axios = require('axios');

// 全局token缓存，避免重复请求第三方接口
// 如果第三方token需要按商户区分，可以存在Shopify的SessionStorage中与商户session绑定
let thirdPartyToken = null;
let tokenExpireTime = 0;

// 封装获取第三方token的方法
async function fetchThirdPartyToken() {
  // token未过期直接返回缓存
  if (thirdPartyToken && Date.now() < tokenExpireTime) {
    return thirdPartyToken;
  }
  // 过期重新请求
  const tokenRes = await axios.post(process.env.THIRDPARTY_TOKEN_URL, {
    grant_type: 'client_credentials',
    client_id: process.env.THIRDPARTY_API_KEY,
    client_secret: process.env.THIRDPARTY_API_SECRET
  });
  thirdPartyToken = tokenRes.data.token;
  // 根据第三方返回的有效期设置过期时间，这里默认1小时，提前5分钟刷新
  const expiresIn = tokenRes.data.expires_in || 3600;
  tokenExpireTime = Date.now() + (expiresIn - 300) * 1000;
  return thirdPartyToken;
}

// 封装第三方物流接口作为你的后端接口，前端直接调用即可
// 这里以获取物流选项接口为例，你可以根据自己的需求添加更多接口
app.get('/api/thirdparty/shipping-options', async (req, res) => {
  try {
    const token = await fetchThirdPartyToken();
    // 调用第三方接口，透传前端参数
    const thirdPartyRes = await axios.get('https://api.somethirdparty.se/v1/shipping-options', {
      headers: {
        Authorization: `Bearer ${token}`
      },
      params: req.query
    });
    // 返回结果给前端
    res.json(thirdPartyRes.data);
  } catch (err) {
    console.error('调用第三方物流接口失败：', err);
    res.status(500).json({ error: '获取物流选项失败' });
  }
});

步骤3：前端React代码调用自有接口 #

前端完全不需要处理token、密钥这类敏感信息，直接调用你自己的后端接口即可：

import axios from 'axios';

// 在你的组件中调用
async function getShippingOptions() {
  try {
    const res = await axios.get('/api/thirdparty/shipping-options', {
      params: {
        // 传入你需要的参数，比如收货地址、商品重量等
        address: '测试地址',
        weight: '1kg'
      }
    });
    console.log('获取到的物流选项：', res.data);
  } catch (err) {
    console.error('请求失败：', err);
  }
}

额外说明 #

如果你的第三方服务是每个商户单独授权，需要存储对应每个商户的token，可以直接使用Shopify已经初始化好的SESSION_STORAGE来存储，和商户的Shopify session绑定，不会出现数据串用的问题。

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