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

编程问答 2022-05-21

问题描述

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

我想将这个小应用程序部署到 Heroku 以了解如何执行此操作。在我的 environment.ts 文件中，我是否应该用 .env 文件中的变量替换值，构建应用程序，然后将键/值对添加到 Heroku 的配置变量中？

解决方法

您可以创建两个环境文件。一种用于开发，一种用于生产：

environment.dev.ts：

initdb

environment.prod.ts：

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

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

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

在 package.json 中为 Heroku 部署添加 "environments": { "dev": "environment.dev.ts","prod": "environment.prod.ts" } 到 --prod 脚本：

postinstall

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

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

您是否考虑过为 API 调用创建后端？您的服务器可以作为中间人来验证您的用户，并且只进行 API 调用您打算进行的代码。不清楚您的应用中使用了哪种 API，但公开非公开使用的 API 密钥可能会很危险（与本应公开的 Firebase API 密钥不同）。

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

  1. 在您的项目根目录中创建一个 .env 文件并将其添加到 .gitignore。这是用于本地开发。
  2. 在 Heroku CLI 或仪表板中设置 production config vars。
  3. 更新environment.ts：
export const environment = {
  ...rest,exampleApiKey: process.env.EXAMPLE_API_KEY,};
angularangulardotenvherokuherokuheroku