在 React 中隐藏 API 密钥

Posted 2023-02-22

【中文标题】在 React 中隐藏 API 密钥

【英文标题】：Hiding API Key in React

【发布时间】：2019-03-11 03:46:42

【问题描述】：

首先我想说我遵循了How do I hide API key in create-react-app? 的所有建议，但没有一个奏效。我已经搜索了一个多小时试图找到答案，但什么也没有。下面是我的解释。

我使用create-react-app 来搭建我的项目 我正在使用 Google 地图，但尚未使用任何其他 API 我在项目的根目录中创建了一个.env 文件 在那个文件中我添加了REACT_APP_GOOGLE_MAPS_API_KEY = api key 在我的组件文件Map.js 中，我添加了const GM_API_KEY = $process.env.REACT_APP_GOOGLE_MAPS_API_KEY;（我的文件中的这个变量周围有刻度线，但它们不会显示在这里） 在我的地图网址中，我添加了这样的键"https://maps.googleapis.com/maps/api/js?key=GM_API_KEY&callback=initMap" 另外，在我的 Map.js 文件的顶部，我添加了一个 console.log(GM_API_KEY); 以确保它正常工作。 我导出了我的地图组件，然后将它导入到我的App.js 我重新启动了我的服务器

当页面加载时，我的密钥会在控制台中输出，但我仍然收到来自 Google 的错误消息，说我的 API 密钥无效。另外，如果我在页面加载后手动console.log(GM_API_KEY)，我会收到一个参考错误，指出GM_API_KEY is undefined

如果有人有任何建议或可以提供任何帮助，我将不胜感激！感谢您花时间查看我的问题。

【问题讨论】：

请出示minimal reproducible example 以配合您的英文描述。

感谢您分享这些指南，我很抱歉没有提供这些指南。这是我在未来对其他人有用的示例： 在.env 文件中：REACT_APP_GOOGLE_MAPS_API_KEY = api key here 在我的Map.js 组件中：const GM_API_KEY = '$process.env.REACT_APP_GOOGLE_MAPS_API_KEY';（使用反引号而不是引号来包围所有这些）在 url致电：'https://maps.googleapis.com/maps/api/js?key=$GM_API_KEY&callback=initMap'（也使用反引号代替引号）

无需道歉。只需 edit 您的问题即可包含所请求的信息。

【参考方案1】：

我对敏感数据所做的甚至没​​有将它们保存在.env 我在项目的根目录中打开终端并运行export API_KEY=sdf54vvetvf... 然后在您的应用程序中您可以通过process.env.API_KEY 访问它注意 每次从该会话关闭终端时，您都需要手动添加它

【讨论】：

谢谢你的回答，我以后一定会试试看的！

“请注意，每次从该会话关闭终端时，您都需要手动添加它”或在 .bashrc 中设置

@Code-Apprentice 是的，但我更喜欢“按项目”保留它（假设我有几个不同的 GOOGLE_API 项目？.bashrc 在这种情况下不是一个好主意

@obiwankenoobi 好点。在这种情况下，用于自动化每个项目的其他一些 bash 脚本将很有帮助。

它不会仍然在 DOM 中结束吗？

【参考方案2】：

尝试在像componentWillMount这样的生命周期钩子中定义保存api键的常量（尽管这个方法现在不安全），以确保该变量在组件挂载时可用：

componentWillMount() const GM_API_KEY = $process.env.REACT_APP_GOOGLE_MAPS_API_KEY;

然后

https://maps.googleapis.com/maps/api/js?key=$GM_API_KEY&callback=initMap

【讨论】：

我这样做了，只是我在我的 URL 周围添加了刻度线，而之前我只是将变量插入到 URL 中。所以我的网址现在是https://maps.googleapis.com/maps/api/js?key=$GM_API_KEY&callback=initMap，而以前我的网址有双引号，忘记包含$ 谢谢您的回答！