javascript - 如何隐藏普通 HTML/CSS/JS GitHub Pages 项目的数据库连接信息？

Question

我正在使用香草 HTML、CSS 和 JS 做一个学校项目。竞争时，我们希望通过 GitHub Pages 让 repo 工作。它超出了任务的范围，但我想连接到 Firebase Firestore 数据库。

问题是，我如何隐藏 API 密钥/信息，仅使用普通 HTML、CSS 和 JS（无框架），并有一个有效的 GitHub Pages 演示供教师标记？

我查看了许多网站和 YouTube 视频，但我遇到的每个教程要么使用框架，要么使用一些违反作业“规则”的包。我可以使用 .env 文件，但据我了解，因为 repo 是公开的，所以密钥是公开的。

任何建议将不胜感激。

标签： javascripthtmldatabasegoogle-cloud-firestoregithub-pages

Answer 1

答案是 .env 文件（有点）。

如果您正在构建一个前端项目并将前端直接连接到您的数据库，您的凭据将是可见的。

处理密钥的正确方法是将它们放在后端 API 中。当然，当我问这个问题时，我还没有“到那里”。

您的后端 API 可以有一个公共端点来监听传入的请求。您无需在来自前端应用程序的请求中包含您的数据库凭据。它在其公共端点处访问您的后端 api，然后您的后端代码在该处处理传入的请求。在您的后端，您可以使用必要的凭据连接到您的数据库。这就是你应该构建它的方式。

对于初学者，您可能想尝试Google Firebase。使用 Firebase，您可以创建 Firebase 函数。有了这些，您可以创建一个简化的 API 端点来定位您的前端请求。它触发 Firebase 函数运行，并且在此函数中，您可以存储您的私钥/凭证。由于您的 Firebase 函数在您自己的安全后端上运行，因此客户端永远不会看到密钥。

如果您正在学习或熟悉 Vue3，这里有一篇很好的文章可以查看：https ://www.bezkoder.com/vue-3-firebase/#more-9260