Angular中的安全API密钥（2+）

Question

我使用Angular开发了一个引用Google Map的小前端。 GMap文档说我必须在我的index.html页面中使用API​​密钥添加引用：

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=API_KEY" async defer></script>

由于这个项目在GitHub上，因此API密钥对每个人都是公开的。我该如何保护它？

在Angular中，有一个envrionment.ts文件（生产等效），我存储敏感信息，如密钥，但我如何通过代码注入API密钥？

Answer 1

你可以创建一个名为environment.ts.dist的文件，它是你的environment.ts文件，但没有你的个人API密钥 - 用注释或虚拟值替换它（其他合理的信息也是如此）。复制项目的人将看到文件的外观，并且可以在重命名文件后插入自己的api密钥。您的environment.ts应该被添加到gitignore中，以便它永远不会存储在存储库中。

可以像这样访问环境变量

import {environment} from "../environments/environment";

...
let apiKey: string = environment.apiKey; // or what ever your variable is named insteat of "apiKey"

你应该记得 - 正如在@bugs链接的帖子中所说 - 角度应用程序可以进行逆向工程，并且你的密钥不是完全保存在你部署的应用程序中，但是像这样你可以防止它被推入git而仍然提供使用该项目可能需要的所有信息。