时间戳

首页 > 解决方案 > Gatsby 如何在前端隐藏 API 密钥

shopify - Gatsby 如何在前端隐藏 API 密钥

问题描述

所以，我很难理解盖茨比是如何工作的。我正在使用https://www.gatsbyjs.org/starters/AlexanderProd/gatsby-shopify-starter/，它使用了一个名为gatsby-source-shopify. 该插件有两个参数：shopName和accessToken. 它看起来像这样gatsby-config.js：

{
  resolve: `gatsby-source-shopify`,
  options: {
    // The domain name of your Shopify shop. This is required.
    shopName: process.env.SHOP_NAME,

    // An API access token to your Shopify shop. This is required.
    accessToken: process.env.SHOPIFY_ACCESS_TOKEN,
  },
},

当我部署应用程序时，访问令牌是否可供人们查看？我是否需要使用无服务器函数之类的东西来隐藏我的 API 密钥，或者这样可以吗？任何关于它在 Gatsby 中如何工作的一般解释都会很棒。

感谢盖茨比的家人！

标签： shopifygatsby

解决方案

如代码所示，它使用process.env.SHOP_NAMEwhereSHOP_NAME是环境变量的名称。这些文件是在项目的根目录中使用一些命名来声明的，例如.env.domain1.com. 在此文件中，您可以存储任何所需的变量以在您的 Gatsby 配置中使用它。在处理微妙的变量（API 密钥、令牌、密码等）时，建议使用这种方式并.env忽略.gitignore.

在 Gatsby 中触发命令时，可以传递一些变量，例如：

"develop": "GATSBY_ACTIVE_ENV=domain1.com gatsby develop"

在这种情况下，GATSBY_ACTIVE_ENVvar 将domain1.com作为一个值。然后，在 you 中gataby-config.js，何时可以使用环境变量（上图module.exports）：

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

然后，您可以.env.domain1.com在根项目中创建一个环境文件并存储任何所需的变量：

SHOP_NAME: 12345

考虑到您在运行develop（我已经解释过的所有内容）命令时提供的代码，它将采用SHOP_NAME12345。

因此，回答您的问题时，您将无法访问该令牌。您需要将它们存储在本地机器和部署服务器中，而不是存储库中。来自盖茨比文档：

请注意，您不应将 .env.* 文件提交到源代码控制，而应使用持续部署 (CD) 提供商提供的选项...

编辑：感谢@Hans Martin Henken 提供以下关于Gatsby 安全性的文章

推荐阅读