如何在 Heroku React 应用程序中访问 API 密钥

如何在 Heroku React 应用程序中访问 API 密钥

Image by MasterTux, PixaBay.com, licensed under CC0

所以你花了几个小时在你的新 React 应用程序上工作，你已经完成了 Heroku 部署过程，现在你终于导航到了你的应用程序的新 Heroku 地址 aaaaand...... .你瞧，你添加的那个很酷的特性（在我的例子中是一个使用地理定位服务的谷歌地图），它使 API 调用到某个后端的某个地方在部署后不再可以访问你的密钥，而且你有很多红色在你的安慰。哎呀……

在开发中隐藏密钥

在部署之前，隐藏 API 密钥的过程非常简单。根据您的开发设置，您（像我一样）可以简单地将您的 API 密钥添加到 dotenv 文件中，方法是预先添加 REACT_APP_ 到任何你想命名的键，像这样：

然后，您可以将该文件添加到您的 gitignore 中，这样文件中的一个或多个密钥就不会意外地被推送到您的 Github 存储库：

然后，您的应用程序中的代码只需使用 dotenv 文件调用 API 密钥 过程 模块和 环境 财产 ：

googleMapsApiKey={${ 进程.env .REACT_APP_YOUR_API_KEY_HERE}}

这种方法在开发中很好，并且允许您的代码访问您的 API 密钥，而无需将它们推送到您的 GitHub 存储库，在那里它们可以被窃取并用于更邪恶的目的（是的，那里有精通技术的网络犯罪分子会梳理 GitHub 帐户对于 API 密钥...为什么人们不能做正确的事……）。

部署后隐藏密钥

虽然上述方法对您的开发环境很简单且非常有用，但它在您的生产环境中不起作用，因为您忽略了 .env 文件不会被推送到 Heroku……至少不会以你想要的方式……

重要的是： 您的代码在部署期间被打包在称为块的 .js 文件中，并且您的超级密钥稍后可以在部署后的 bundle.js 文件中找到。显然，我们不希望这些信息公开提供给密钥梳理者，因此最好删除您的任何秘密 .env 在完成部署过程之前提交文件，这样它们就不会被打包在构建中。别担心，我们可以将它们添加到 Heroku，这样您的应用程序仍然可以运行。

将密钥添加到 Heroku 配置也是一个相对简单的过程。

首先，首先导航到 Heroku 并登录您的帐户：

然后，登录到您的帐户后，单击仪表板中列出的 Heroku 项目的名称：

进入项目目录后，单击 设置 选项卡，然后是 显示配置变量 按钮：

这将显示您的 Heroku 应用程序的配置变量。列表中已经有一些变量，但不要担心其中任何一个。向下滚动到列表底部，您会看到空白键/值输入 添加 按钮：

最后，添加您在应用程序中定义的 API 密钥名称 .env 文件和值（如果您选择在配置变量中重命名键，则需要将 React 代码中的名称更改为新名称才能使您的功能正常工作），再次确保在前面添加 REACT_APP_ 到名称，然后单击 添加 ：

中提琴！假设命名约定在您的 Heroku 配置变量和您的 React 应用程序 js 代码中匹配，您现在应该看到您的功能在您的生产构建中正常工作，没有控制台错误（注意：您可能需要刷新浏览器）。

结论

将代码的秘密保密是应用程序开发的重要组成部分，对于像我这样的新手程序员来说，这个过程可能有点让人头疼。希望我已经为您简化了流程，以防止将来出现上述问题。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/11592/46360311