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

Question

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

<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.distwhich is your environment.tsfile 的文件，但没有您的个人 API 密钥 - 将其替换为注释或虚拟值（还有其他敏感信息）。复制该项目的人将看到该文件的外观，并且可以在重命名该文件后插入自己的 API 密钥。然后应该将您的environment.ts内容添加到.gitignore存储库中，以便它永远不会出现在存储库中。

可以这样访问环境变量

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

...
let apiKey: string = environment.apiKey; // or whatever your variable is named instead of "apiKey"

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