如何使用 dotenv 在 script.js 文件中隐藏我的 API 密钥

Question

我想使用 dotenv 隐藏我的 Api 密钥。

当我删除 require('dotenv').config(); 时从我的代码中将我的 API 密钥放入 apiKey: process.env.API_KEY，而不是 process.env.API_KEY 代码正在运行。

我已经安装了 dotenv 并检查了我的依赖项

我创建了 .env 文件夹并提到 API_KEY=2947****

我创建了 .gitignore 文件并将 .env 放入其中

但是当我尝试在 script.js 文件中使用它时，它不起作用

require('dotenv').config();

let weather = {

  apiKey: process.env.API_KEY,
  
  fetchWeather: function (city) {
    fetch(
      "https://api.openweathermap.org/data/2.5/weather?q=" +
        city +
        "&units=metric&appid=" +
        this.apiKey
    )
      .then((response) => {
        if (!response.ok) {
          alert("No weather found.");
          throw new Error("No weather found.");
        }
        return response.json();
      })
      .then((data) => this.displayWeather(data));
  },

  displayWeather: function (data) {

    const { name } = data;
    const { icon, description } = data.weather[0];
    const { temp, humidity,temp_min,temp_max } = data.main;
    const { speed } = data.wind;
    // const { sunrise, sunset } = data.sys;

    document.querySelector(".city").innerText = "Weather in " + name;

    document.querySelector(".icon").src ="https://openweathermap.org/img/wn/" + icon + ".png";

    document.querySelector(".description").innerText = description;

    document.querySelector(".temp").innerText = temp + " °C";

    document.querySelector(".humidity").innerText ="Humidity: " + humidity + "%";

    document.querySelector(".wind").innerText ="Wind speed: " + speed + " km/h";

      document.querySelector(".min").innerText ="Min Temp: " + temp_min + " °C";

      document.querySelector(".max").innerText ="Max Temp: " + temp_max + " °C";

      // document.querySelector(".sunrise").innerText =
      // "Sunrise: " + sunrise + " °C";
      // document.querySelector(".sunset").innerText =
      // "Sunset: " + sunset + " °C";

    document.querySelector(".weather").classList.remove("loading");

    // document.body.style.backgroundImage =
    //   "url('https://source.unsplash.com/1600x900/?" + name + "')";

  },

  search: function () {
    this.fetchWeather(document.querySelector(".search-bar").value);
  },

};

document.querySelector(".search button").addEventListener("click", function () {
  weather.search();
});

document
  .querySelector(".search-bar")
  .addEventListener("keyup", function (event) {
    if (event.key == "Enter") {
      weather.search();
    }
  });

weather.fetchWeather("Pune");

Answer 1

我认为你误解了“隐藏你的 Api 密钥”的工作原理。

首先，您无法真正向客户端隐藏 API 密钥，因为客户端需要使用它才能与（API-）服务器通信。您想要隐藏密钥的地方是源代码管理，这主要是为了能够在不同的环境中使用不同的密钥，而不必更改源代码管理中的源代码。其次，您需要一个构建步骤才能使用 dot env 之类的东西。如果你的 script.js 直接包含在 html 文件中，你不能在其中使用 dotenv 。这就是 env 的正常使用方式：

1. 您有一些源代码，src.js，它需要秘密才能工作（例如 API 密钥），这些在源代码中使用

   process.env.[NAME_OF_THE_VARIABLE]

进行引用
2. 然后使用 webpack vite babel 等构建源代码，在此构建过程中，

   process.env.[...]

   的所有引用都将替换为

   .env

中的相应内容
3. 结果是一个文件

   dest.js

   ，其中包含秘密纯文本，不再引用

   process.env.[...]

   ，该文件可以直接在html中引用

我希望这能解决问题

Answer 2

正如 Alex 所说，没有办法对浏览器隐藏它。您可以在捆绑时添加它，但它仍然在源代码中。 那么有哪些可用的选项

1. 您可以将整个天气 API 获取移至您的自定义服务器，并创建一个端点，用户可以通过该端点获取所需的数据。

Answer 3

git rm --cached .env
git commit -m "Remove .env from Git tracking"
git push

将这三个命令粘贴到项目目录中的 VS Code 终端上

cd project-name 

有时，如果推送了 env 文件，它会显示在 GitHub 存储库中；这可能是历史的展示。您只需使用此命令从 GitHub 存储库中删除该文件，然后再次推送修改后的代码。那么 env 文件将不会显示 github 存储库。