在 React 和 Shopify 中安全地存储第三方 API 机密

Question

首先，我对 React 和 Shopify 都很陌生，所以请在回答时牢记这一点。

我使用他们提供 React 应用的 CLI 工具创建了一个基本的 Shopify 应用。我现在需要将此应用程序连接到管理自定义运输选项的第三方。因此，我需要通过该第三方进行身份验证，然后返回一个我可以在我的 API 调用中使用的令牌。我在这里阅读了许多关于存储此类令牌的答案，有些人推荐 localstorage/cookies，其他人则表示从不这样做，但没有提供一个明确的答案来说明应该做什么。

目前我有以下内容：

let data = {
  grant_type: 'client_credentials',
  client_id: process.env.REACT_APP_THIRDPARTY_API_KEY,
  client_secret: process.env.REACT_APP_THIRDPARTY_API_SECRET  
}

axios.post('https://oauth.somethirdparty.se/v1/token', data).then(res => {
  if (typeof window !== 'undefined') { // Check for browser
    localStorage.setItem('t', res.data.token);
  }
});

但是，我收到这些环境变量的“未定义”错误，因此 axios.post 失败（如果我直接在此处输入密钥/秘密而不是 .env，则可以正常工作）。除了这里的许多帖子不安全之外，我想知道我是否可以做一些类似于 Shopify 正在做的事情，只是我缺乏知识让我无法准确理解他们正在做的事情！

生成的 Shopify 应用在其 server.js 文件中使用 .env 文件，如下所示：

Shopify.Context.initialize({
  API_KEY: process.env.SHOPIFY_API_KEY,
  API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
  SCOPES: process.env.SCOPES.split(","),
  HOST_NAME: process.env.HOST.replace(/https:\/\//, ""),
  API_VERSION: ApiVersion.October20,
  IS_EMBEDDED_APP: true,
  // This should be replaced with your preferred storage strategy
  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});

在我的情况下，如何安全地存储 API 凭据？并请提供一个实际的例子。

编辑 我发现如果我将 Shopify server.js 文件修改为console.log(process.env)，我会在终端中看到所有使用的环境变量，我猜想当我尝试将它们记录到我的应用程序时这些是“未定义”的原因组件是故意的，因此它们不会暴露，这很好。不幸的是，当我需要连接到第三方服务并获取令牌等时，它仍然没有帮助 - 在这种情况下我该怎么做？

Answer 1

这是一个很容易回答的问题。确实，您总是希望将您的秘密存储在 dotenv 文件之类的文件中。像 Rails 这样的现代高级框架甚至可以让你加密它们，尽管最终你确实需要确保你的服务器上存在密钥。

因此，您的公共托管服务允许您设置环境变量。那是您确保它们存在的地方。您不会将这些值签入您的代码的公共/私有 GitHub 副本。

所以现在，当您的代码执行时，它可以访问您的秘密。似乎当您运行代码时，您会得到未定义的值，这是由于您未能正确设置环境。阅读您托管服务的文档以了解这一点。

请注意，Shopify 并不是唯一的，99% 的服务都以这种方式运行。因此，您应该可以轻松找到问题的答案。