使用 Netlify 函数隐藏您的 API 密钥

三月份我发布了一篇教程，讲解了如何在 Gatsby 中处理表单提交以及如何使用 Airtable作为后端。我确信，通过隐藏 API 密钥，process.env它们不会被别人看到。

我读过的教程和博客文章都说，如果你直接使用，你的密钥就会被隐藏process.env。某种程度上来说，这是真的，如果你在浏览器上检查代码，密钥就会被隐藏。

后来Fran Caballero在我的博客上评论说，发出请求后，密钥会显示在网络选项卡中。这是因为 Airtable 要求你将 API 密钥作为参数传递到请求的标头中。

提醒一下，本教程中的代码如下所示：

 handleSubmit = e => {
 const fields = {"fields": {"Name": this.state.name, "Notes": this.state.notes}}
 fetch("<https://api.airtable.com/v0/><account id>/<table name>", {
 method: "POST",
 headers: {"Authorization": `Bearer ${process.env.AIRTABLE_API}`,
 "Content-Type": "application/json"},
 body: JSON.stringify(fields)
 })
 .then(() => alert("Form Sent!"))
 .catch(error => alert(error))

 e.preventDefault();
 }

如您所见，API 密钥在标头中传递，并且当发出请求时，标头会通过网络选项卡公开。这意味着每个人都可以看到 API 密钥。

我需要一个解决方案来隐藏 API 密钥。

Netlify 功能来救援！

我的大多数网站都由 Netlify 提供服务，Netlify 功能看起来像是解决此问题的方法。

Netlify 函数只不过是在服务器上运行的函数而已。因此，API 密钥应该保持隐藏，以免被窥探。

Netlify 功能的一大优点是，每个站点每月可以免费使用 125k 次通话和 100 分钟通话时间。

为你的 Netlify 网站设置函数非常简单。你只需要在项目根目录创建一个文件夹，并将你的函数放入其中。然后告诉 Netlify 在哪里找到这个文件夹。

我喜欢将所有与 Netlify 相关的内容放在一个名为的文件夹中.netlify。在该.netlify文件夹中，我刚刚创建了另一个名为的文件夹functions。

现在我需要做的就是告诉 Netlify 我的函数在哪里。为此，您只需登录您的 Netlify 帐户，选择将使用这些函数的站点，然后点击“函数”选项卡。在此选项卡中，您只需输入文件夹的路径即可。

就我而言，我只是写了.netlify/functions。然后，您可以推送新的更改或重新部署您的网站，Netlify 将自动找到该文件夹 - 您将收到一封电子邮件，告知您现在正在使用网站上的功能。

Netlify 函数规则

Netlify 函数让您无需 AWS 账户即可部署 AWS 函数。目前，您可以使用 JavaScript 或 Go 编写函数。

您的 javascript 函数将需要导出一个处理程序，并且应该如下所示：

 exports.handler = function(event, context, callback) {
 // your server-side functionality
 }

当你调用一个函数时，处理程序将获得一个类似于这样的事件对象：

 {
 "path": "Path parameter",
 "httpMethod": "Incoming request's method name"
 "headers": {Incoming request headers}
 "queryStringParameters": {query string parameters }
 "body": "A JSON string of the request payload."
 "isBase64Encoded": "A boolean flag to indicate if the applicable request payload is Base64-encode"
 }

因此，当您调用 netlify 函数时，您添加的标题、方法和路径将通过编写event.path、event.headers和提供给您event.method。

最后，回调函数就是 Netlify 函数运行时返回的内容。回调函数用于处理成功/失败以及可能需要的任何响应。

为 airtable 创建服务器端函数

我将使用上面的示例来说明如何处理表单提交并将其发送到 airtable。

首先，在 netlify 函数文件夹中创建一个名为的文件airtable.js。

现在你需要将处理程序格式与上面显示的获取请求混合起来。该函数将如下所示：

exports.handler = async (event, context, callback) => {
  const pass = (body) => {callback(null, {statusCode: 200, body: JSON.stringify(body)})}

  try {
    let response = await fetch("https://api.airtable.com/v0/<account id>/<table name>", 
  {
   method: event.httpMethod,
   headers: {
     "Authorization": `Bearer ${process.env.AIRTABLE_API}`, 
     "Content-Type": "application/json"
  },
   body: event.body
  })
   let data = await response.json()
   await pass(data)
 } catch(err) {
     let error = {
       statusCode: err.statusCode || 500,
       body: JSON.stringify({error: err.message})
 }
  await pass(error)
 }
}

请注意，我正在使用process.env获取 Airtable API 密钥。由于它们位于服务器端，Netlify 将自动从环境变量中获取密钥。

将表单连接到 Netlify 函数

现在我们有了函数，剩下要做的就是将表单连接到 netlify 函数。Netlify 可以让我们轻松完成此操作，您只需在 fetch 请求中使用函数的路径即可。

假设我们的表单位于所调用的组件上Notes，其完整路径是your-awesome-site/src/components/Notes.js我们需要将表单更改为：

handleSubmit = e => {
  const fields = {
    "fields": {
      "Name": this.state.name, 
      "Notes": this.state.notes
      }
     }
    fetch("../../.netlify/functions/airtable", {
    method: "POST",
    body: JSON.stringify(fields)
    })
    .then(() => alert("Form Sent!"))
    .catch(error => alert(error))

    e.preventDefault();
 }

请注意，我们正在从根文件夹中获取 Netlify 函数 airtable。此外，由于我们在服务器端函数中使用它，所以我们从请求中获取了 headers 参数。

因此，此获取请求将仅调用 netlify 函数并将表单字段传递到服务器端函数，而该服务器端函数就是调用 Airtable API 的函数。

以上就是隐藏 API 密钥并使用 Netlify 函数所需的全部操作。如果您想记录 Netlify 函数中的事件，可以使用console.log，该日志将在您的 Netlify 帐户中的函数屏幕中显示 - 位于“函数”选项卡中。

文章来源：https://dev.to/fabiorosado/hide-your-api-keys-with-netlify-functions-93m