如何在 Squarespace 上隐藏 API 密钥？

Question

我在代码注入中使用 fetch 来获取一些事件数据以显示在我的 Squarespace 网站上。获取的代码正在工作并返回我能够显示的响应。

获取看起来像这样

let response = fetch(
            "https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=MYAPIKEY"
          )
            .then((response) => //...

在 Squarespace 网站中保持 MYAPIKEY 安全和可访问的最佳做法是什么？

我的第一个猜测是，我必须创建一个新的未链接且受密码保护的页面，在那里创建一个新的代码注入，然后在 API 调用期间以某种方式链接到该页面 - 但我不确定这是否真的安全的。

感谢您的帮助！

Answer 1

最简单的方法之一可能是从 npm 包中安装和使用 "dotenv"。 https://www.npmjs.com/package/dotenv。

安装此软件包后，您将创建一个名为 ".env" 的文件夹。您可以在此文件夹中键入 apikey。像这样：API_KEY = 12313123213ASDAD;然后您将包包含在您的项目中，您可以使用 api 密钥作为 "process.env"。

所以一旦你完成了这些事情，你现在可以通过这种方式使用 apikey：

let response = fetch(
            "https://api.seatgeek.com/2/events?per_page=100&venue.city=boston&client_id=process.env.API_KEY // Its your api key
          )
            .then((response) => //...

对于 git，你必须在 ".gitignore" 中添加 ".env"。

祝你好运！