如何在create-react-app中隐藏API密钥？

Question

我在create-react-app中制作了一个天气应用程序。如何隐藏API密钥以便我可以提交给GitHub？

现在关键是在App.js中：const API_KEY =“123456”;

Answer 1

免责声明

除非您正在制作教程应用程序，否则不要在客户端（即React应用程序）中放置api密钥等秘密。

从React文档中，

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

原始答案

然后，Elrobore的Arup Rakshit的评论，

首先，你应该在你的src文件夹之外创建.env文件。

然后加

REACT_APP_WEATHER_API_KEY=123456

在提交之前，您应该排除此.env文件，以便找到.gitignore文件并添加.env。

现在你可以自由地去。

不要忘记在.gitignore文件中添加.env。

---

添加：

1. 如何在代码中使用env变量：

const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

2. env变量未定义。我如何解决它？

为了读取env变量，您应该重新启动服务器。

Answer 2

事实证明，create-react-app有一些内置功能可以帮助您实现这一目标。感谢George Karametas的见解。要访问该功能，您需要：

1.在项目目录的根目录中创建一个名为.env的文件。

- your_project_folder
  - node_modules
  - public
  - src
  - .env         <-- create it here
  - .gitignore
  - package-lock.json
  - package.json

2.在.env文件中，将REACT_APP_添加到您选择的API密钥名称并进行分配。

create-react-app工具使用REACT_APP_来识别这些变量。如果你没有用它启动你的API密钥名称，create-react-app将不会看到它。

// .env

REACT_APP_API_KEY=your_api_key  <-- yes
API_KEY=your_api_key            <-- no

// Example (from 이준형's response):
REACT_APP_WEATHER_API_KEY=123456

3.将.env文件添加到.gitignore文件中。

添加下面的行后，保存.gitignore文件并执行git status以确保您的.env文件不会在git中显示为新文件。

// .gitignore

# api keys
.env       <-- add this line

# dependencies
/node_modules
...

4.通过process.env对象访问API密钥。

要检查您是否可以访问API密钥，请转到App.js文件，并在console.log语句下方的顶部添加require。保存文件并重新加载页面后，如果控制台日志未显示您的API密钥，请尝试重新启动react服务器。在提交代码之前，请务必删除控制台日志行。

// src/App.js

import React, { Component } from 'react';
import './App.css';

console.log(process.env.REACT_APP_WEATHER_API_KEY)

class App extends Component {
...

Answer 3

从反应documentation：

警告：不要在React应用程序中存储任何秘密（例如私有API密钥）！

环境变量嵌入到构建中，这意味着任何人都可以通过检查应用程序的文件来查看它们。

Answer 4

这对我有用：

我在根文件夹中创建了.env。在该文件夹中，我添加了我的密钥：

 REACT_APP_API_KEY_YT = "key"
//I added YT for youtube which is where my api key is from

然后我去了.gitignore ||如果您没有，请在根目录中创建.gitignore。在.gitignore中，我添加了.env

 #api key
 .env

然后我回到我的app js文件的根目录。对于我来说，这是其他的index.js，它可能是App.js我创建了一个const API_KEY

 const API_KEY =`${process.env.REACT_APP_API_KEY_YT}`

我检查它是否通过控制台记录它。

 console.log("API", API_KEY)

我得到了undefined。我停止了服务器（Control + C）并重新启动了服务器。之后我才能看到钥匙。

Answer 5

不幸的是，即使您使用gitignore和.env文件，保留React客户端中的任何密钥也不安全。正如@ClaudiuCreanga所指出的，React环境变量嵌入在构建中并可公开访问。

您应该只在后端保存API密钥或机密，例如Node / Express。您可以让客户端向您的后端API发送请求，然后API可以使用API​​密钥进行实际的API调用，并将数据发送回客户端。

Answer 6

希望不会迟到，所以我就是这样做的。在根文件夹上，如果你正在使用react，那么你可以在REACT_APP_前面添加环境变量，所以就像这样。 REACT_APP_API_KEY=<keye here>你没有。 React环境将查看.env检查，如果你在REACT_APP_前面，那么你可以使用它。

import React from 'React';
console.log(`${process.env.REACT_APP_API_KEY}`);

这会让你变成你的变数。

如果您正在使用节点，那么您需要一个包https://www.npmjs.com/package/dotenv

而已。请享用 ：）

Answer 7

您可以创建一个包含所有凭据的单独文件，并在那里声明您的密钥。并将此文件添加到.gitignore

//credentials.js
export const API_KEY = '12345'

Answer 8

创建一个包含密钥的config_keys.js文件。将它们导出为默认值

const API_K = "123456788345345235"
export default API_K

然后在app.js或目标.js文件中导入它们

IMPORT API_K from './config_keys/js'
const API_KEY = API_K

然后将config_keys.js添加到.gitignore