使用 Next JS 保护你的 API 密钥

这是马克斯的故事。

马克斯认为他的 API 密钥是安全的，因为他把它们放在了一个.env文件中。

马克斯不知道他的钥匙在网络选项卡中可见。

🥲

Max其实就是我，Max其实就是大家。

尤其是当我们刚刚学习并开始使用需要私钥的公共 API 时。

目前还没有好的（或者说根本没有）方法来保护前端的密钥。
一个好的替代方案是在自己的服务器中创建代理，因为后端代码不会暴露给浏览器。但很多使用这些 API 的人都是新手，对后端还不太了解。

好吧，Next JS 用其集成且随时可用的API Routes来拯救这个问题。它本质上是一个 Node JS 环境，你可以使用它来创建 API 端点，一个随时可用的服务器。

让我们来看看。

初始设置

首先让我们创建一个下一个 js 应用程序。

在终端运行

npx create-next-app next-api-key
# or
yarn create next-app next-api-key

然后移动到应用程序文件夹

cd next-api-key

不同的 .env 文件

进入项目后，我们可以创建一个文件。如果你熟悉.env.local普通文件，它看起来和普通文件一样。不同之处在于，里面的变量仅在 Next 的 Node.js 环境中可用。这意味着浏览器无法访问它们。.env.env.local

那么我们可以在哪里使用这些变量呢？

在里面pages，还有一个名为的文件夹api，这里的任何文件都将被视为 API 端点。

它的工作原理大致如下。

在服务器端我们有pages/api/hello.js

export default (req, res) => {
  res.status(200).json({ name: 'John Doe' })
}

在客户端我们可以调用。

const fetchHello = async (page) => {
  const res = await fetch(`/api/hello`); // notice the naming
  const data = await res.json();
// data = { name: "John Doe" }
  return data;
};

保护密钥

现在我们知道了它是如何工作的，让我们在.env.local文件中添加一个密钥。

假设我有一个密钥，需要将其发送到我的请求的 URL 中。

让我们添加里面的键.env.local

SECRET_KEY=someSecretKeyThatNoOneShouldSee

我们不是在客户端使用密钥，而是在内部使用它hello.js。

无论如何，此变量在客户端不起作用，请在此处阅读更多信息

// pages/api/hello.js
import axios from "axios";

export default async (req, res) => {
  const URL = `https://api.i.require.keys/?&api_key=${process.env.SECRET_KEY}`;
  const response = await axios.get(URL);
  res.status(200).json({ data: response.data })
}

您将需要安装 axios、node-fetch 或类似的库来管理获取，因为fetchNode 中没有 API。

客户端实际上没有任何变化，但axios由于我们已经为服务器安装了它，所以我们就使用它吧。

const fetchHello = (page) => axios.get('/api/hello')

就是这样，我们的密钥在网络选项卡中无处可见。

那不是太难吧？

如果您发现这有帮助，请点赞并分享。

直到下次！