安全API密钥.环境变量.正确部署安全密钥的方法

Question

我有一个用Angular构建的项目。我想托管它，但它使用API KEY调用API。根据我的理解，没有办法从客户那里保护你的密钥。我一直在研究如何做到这一点，但我找不到任何有用的。

我想将这个小应用程序部署到Heroku来学习如何做到这一点。在我的环境中。我应该用.env文件中的变量替换值，构建应用程序，然后将键/值对添加到Heroku的配置变量中吗?

Answer 1

可以创建两个环境文件。一个用于开发一个用于生产:

environment.dev.ts:

export const environment = {
API_KEY: "XXX"
};

environment.prod.ts:

export const environment = {
API_KEY: process.env.API_KEY
};

在angular.cli.json中定义这些文件:

"environments": {
"dev": "environment.dev.ts",
"prod": "environment.prod.ts"
}

在package.json中为Heroku添加--prod到postinstall脚本:

"postinstall": "ng build --aot --prod"

最后，在Heroku仪表板中添加配置变量或使用Heroku -cli:

heroku config:set API_KEY=PROD_XXX

Answer 2

您考虑过为API调用创建后端吗?您的服务器可以充当中间人，对您的用户进行身份验证，并且只执行代码打算执行的API调用。不清楚你的应用程序中使用的是哪种API，但暴露不打算公开使用的API密钥可能是危险的(不像Firebase API密钥是公开的)。

无论如何，您都不应该通过配置文件存储硬编码的凭据或将凭据提交到存储库。基本步骤如下:

1. 在项目根目录下创建.env文件，并将其添加到.gitignore中。这是针对local的发展。
2. 设置生产在Heroku CLI或Dashboard中配置参数
3. 更新environment.ts:

export const environment = {
...rest,
exampleApiKey: process.env.EXAMPLE_API_KEY,
};