如何在 5 分钟内集成 Google Sheets API

设置你的 Pizzly 🐻

回到代码👩‍💻👨‍💻

结论

几个月前，我写了一篇关于如何在 2 秒内将数据发送到 Google 电子表格的文章。这篇文章获得了大量的浏览量和点赞。过去 30 天内，近千人使用它发送了超过 30 万个 API 请求的数据 😱 🚀

最近，Bearer决定将其大部分代码库开源到代号为Pizzly的 GitHub 仓库。这部分代码库正是我们称之为“推送到 GSheet”功能如此易于构建和使用的基础。

今天，我想向您展示如何构建您自己的 Google Sheets 集成。

这是一个快速演示👇

您可以通过打开 CodePen查看完整的源代码，但我想重点介绍下面的一些关键部分，以帮助您构建您自己的 API 集成。

设置你的 Pizzly 🐻

Pizzly是一个自托管的 API 集成工具包。它提供了开发人员所需的一切，使其能够轻松使用基于 OAuth 的 API（即使用 OAuth 作为身份验证方法的 API）。

现在大多数 API 都使用OAuth 框架来授权需要访问用户数据的应用程序。我认为，主要原因之一是 OAuth 在非常安全的同时提供了最佳的用户体验。但说实话，对于开发者来说，实现和使用它要困难得多。

当不涉及用户数据时，API 密钥更受欢迎，因为它们更易于实现和使用。例如，Stripe 或 Google 地图使用 API 密钥。而 Facebook、Twitter 或 Google Sheets 则使用 OAuth。

Pizzly 致力于为使用基于 OAuth 的 API 的开发者提供最佳体验。其强大功能之一是完全处理 OAuth 流程（包括刷新令牌），这意味着开发者可以专注于请求端点，而无需花费大量时间处理身份验证。

让我们看看如何使用它。

安装 Pizzly

Pizzly 是一个自托管解决方案。这意味着您可以将其安装在您的机器或任何平台即服务 (PaaS) 上。我们将使用Heroku作为示例，因为它是一个免费且知名的解决方案。但您应该能够在 AWS、Google Cloud 等平台上使用它。

首先，点击下面的按钮将 Pizzly 部署到 Heroku ：

您可能需要在 Heroku 上登录或创建一个帐户。无需任何费用，直接登录即可。出现提示时，请为您的应用命名，然后向下滚动并点击“部署应用”。部署大约需要 2 到 3 分钟。

部署完成后，打开应用程序，您应该会看到如下内容：

这意味着您的 Pizzly 实例已启动并正在运行🎉作为简短的概述，Pizzly 提供了多种工具来帮助您进行集成，包括：

• 仪表板 -您现在所在的位置；
• API——以编程方式执行仪表板所能够执行的操作；
• 一项/auth/服务——处理 OAuth-dance；
• 代理——向 API 发出经过身份验证的请求；
• JS 库——连接用户并从您的应用程序请求 API。

这只是给您一个概述。您可以在Pizzly Wiki上了解更多信息，但现在我们先回到如何连接 Google 表格。

配置 Google 表格集成

现在，让我们配置您的 Google Sheets 与 Pizzly 的集成。在您的 Pizzly 实例中，点击“打开仪表板”，然后前往 Google Sheets API 并点击“创建您的第一个配置”。

下面是一个 GIF，其中显示了需要遵循的不同步骤：

您现在应该看到类似这样的内容：

您将在此处保存 Google Sheets 应用程序的凭据。

如果您已拥有这些，请在表单中填写您的客户端 ID、客户端密钥以及以下范围：https://www.googleapis.com/auth/drive.file。请确保您已在 Google Cloud 控制台上注册了 Pizzly 提供的回调 URL。然后跳过下一部分。

您可以在 Pizzly 中使用任何作用域。我提供这个作用域是为了确保下面的代码片段能够与您的实例兼容。但如果您想使用其他作用域，请随意！

如果您还没有 Google Sheets 应用，请继续阅读。下一节，我们将学习如何创建一个。

创建 Google Sheets 应用程序🔑

我们将完成检索您的凭据所需的步骤。流程如下：

1. 登录Google Cloud Console；
2. 创建或选择一个组织和项目；
3. 启用 Google Sheets API；
4. 启用后，在 API 管理器中选择“凭据” ，然后创建凭据> OAuth 客户端 ID：
5. 应用程序类型为Web 应用程序。请确保在仪表板上将 Pizzly 提供的回调 URL 添加到“授权重定向 URI”中。如果您已在 Heroku 上部署 Pizzly，它应该如下所示：https://[project-name].herokuapp.com/auth/callback。
6. 返回 Pizzly，保存您的客户端 ID 和客户端密钥。在范围字段中输入https://www.googleapis.com/auth/drive.file

点击“保存”，就完成了！您已成功配置与 Google 表格的集成。

测试您的集成

为了确保您的集成配置良好，我建议您尝试使用 Pizzly connect 自行连接。

在 Pizzly 的信息中心中，打开 Google Sheets API 并点击“连接到 Google Sheets”。这将打开以下页面：

现在，再次点击“连接到 Google 表格”。这将打开一个弹出窗口，其中包含 Google 的 OAuth 同意屏幕。请授予您的应用程序访问权限。

成功后，仪表盘会显示“已连接！”的消息。这意味着你的应用程序已配置完毕👍 干得好！

如果出现问题，可能是由于重定向回调网址造成的。请确保您已在 Google Cloud 控制台中注册您自己的回调网址。

为此，请返回Google Cloud 控制台中的Google 表格信息中心。确认您位于正确的项目和正确的组织中。修改您的 OAuth 客户端 ID，并确认授权重定向 URI 已正确注册。

如果您仍然遇到问题，请在下面发表评论，我会进一步指导您。

回到代码👩‍💻👨‍💻

在本文的前一部分中，您已成功安装 Pizzly 并配置了 Google Sheets 集成。做得好！

在本部分中，我们将了解如何连接用户并向 Google Sheets API 发出请求。开始吧！

将用户连接到 Google 表格🔐

Pizzly 附带一个 JavaScript 库 ( pizzly-js)，其中包含与实例交互的高级方法。在这里，我们将使用.connect()一种能够轻松连接用户的方法。

<script src="https://cdn.jsdelivr.net/npm/pizzly-js@v0.2.3/dist/index.umd.min.js"></script>
<script>
// Initializing Pizzly JS with a demo instance
const demoKey = "pope8Qy8qfYyppnHRMgLMpQ8MuEUKDGeyhfGCj";
const demoInstance = "https://pushtogsheet.herokuapp.com/";
const pizzly = new Pizzly(demoKey, demoInstance)

// Connecting a user
pizzly
  .connect('google-sheets')
  .then((data) => console.log("Successfully connected!", data))
  .catch((error) => console.error("It failed!", error))
</script>

这段代码做了两件事：

1. 首先，它使用一个演示实例初始化 Pizzly JS 客户端。demoKey是一个可选键，您可以在自己的实例上进行配置（了解如何配置）。demoInstance只是我自己的演示实例的 URL 😉
2. 然后，也是最有趣的部分，该.connect()方法以 API 名称作为参数触发。由于它使用了promises，我可以使用then/catch来处理成功或错误。

如果您在浏览器上运行此代码片段，它将打开一个弹出窗口，立即提示来自 Google 的授权同意屏幕。

第一次运行它的时候感觉有点神奇（好吧，至少对我来说是这样的😅）。只需几行代码，你就能将用户连接到 Google 表格。这就是 Pizzly 的强大之处：专注于开发者体验。

更棒的是，Pizzly 负责处理 OAuth 的刷新序列。如果你熟悉 OAuth，你可能知道处理令牌刷新是多么的繁琐。而 Pizzly 完全隐藏了这一点（详见此处）。

更棒的是，Pizzly 预置了数十个 API（例如 Facebook、Twitter、Salesforce、Pipedrive 等）。这意味着您可以在几分钟内创建与 Google Sheets 的集成，并使用相同的代码与许多其他平台集成！

如果您对它在幕后如何工作感到好奇...运行时pizzly.connect('google-sheets')，它会在浏览器中打开一个弹出窗口，首先重定向到 Pizzly 实例。

收到该请求后，实例将在其数据库中获取 API 配置，并尽快重定向到同意屏幕

用户授予访问权限后，API 会将其重定向回所谓的 实例callback URL。这就是为什么在配置应用程序时必须注册 Pizzly URL 的原因。

该回调 URL 会告知 Pizzly JS 连接是否成功（或失败），然后关闭弹出窗口。

向 Google Sheets API 发出经过身份验证的请求👾

将用户连接到 API 后，您可以再次使用 Pizzly JS 查询所有 API 端点。以下是略加改进并具有交互性的上述代码片段：

如果您在之前的 CodePen 中单击“创建新电子表格”，Pizzly JS 将连接自身，然后向 Google Sheets API 发送请求以创建新电子表格。

我们已经知道如何连接某人，所以让我们集中讨论请求部分。这是之前 CodePen 中负责该请求的代码摘要：

pizzly
  .integration("google-sheets")
  .auth(userAuthId)
  .post("/spreadsheets")
  .then((response) => response.json())
  .then((data) => {
    // Do what you want with the data
  });

此代码片段有三个有趣的部分：

1. 首先，它使用该.integration()方法来指定我们正在使用哪种集成（google-sheets在本例中）。
2. 然后，它告诉 Pizzly 使用authId。身份验证就在这里进行。authId当您使用 时，Pizzly 会生成.connect()。我不会在authId这里详细介绍 ，但它是 Pizzly 引入的一个强大概念。我强烈推荐您阅读这篇文章来了解更多信息。
3. 最后，它会运行.post("/spreadsheets")并向端点创建 POST 请求/spreadsheets。这就是 Google Sheets API 的工作原理 -您可以在 Google Sheets API 文档中了解更多信息。

Pizzly JS 接受所有 HTTP 方法，包括.get()、.put()等。

从后端进行身份验证🤖

Pizzly 并不局限于浏览器。一旦您连接了用户并获取了其authId，您就可以从服务器向 API 发出请求。

这是创建电子表格的相同请求，但使用 cURL

curl -X POST https://pushtogsheet.herokuapp.com/proxy/google-sheets/spreadsheets?pizzly_pkey=pope8Qy8qfYyppnHRMgLMpQ8MuEUKDGeyhfGCj \
 -H "Pizzly-Auth-Id: REPLACE-WITH-YOUR-AUTH-ID"

Node.js 中也有同样的方法：

const axios = require("axios");

const authId = "REPLACE-WITH-YOUR-AUTH-ID";
const demoKey = "pope8Qy8qfYyppnHRMgLMpQ8MuEUKDGeyhfGCj";
const demoInstance = "https://pushtogsheet.herokuapp.com";

axios
  .post(demoInstance + "/proxy/google-sheets/spreadsheets" + "?pizzly_pkey=" + demoKey, null, {
    headers: { "Pizzly-Auth-Id": authId },
  })
  .then(({ data }) => {
    console.log(data);
    // Do what you want with the data
  })
  .catch(console.error);

确保将其替换REPLACE-WITH-YOUR-AUTH-ID为有效的authId。如果您想知道如何获取，请使用以下代码片段：

pizzly
  .connect('google-sheets')
  .then(({authId}) => console.log(authId))
  .catch((error) => console.error("It failed!", error))

结论

如果您已经读到这里，首先感谢您！这可能是您熟悉或想要了解更多的主题。如果您有任何不清楚的地方，请随时添加评论。您也可以查看Pizzly 在 GitHub 上的项目，尤其是它的wiki。

其次，我快速提到了 Pizzly 是开源软件（MIT 许可证）。这意味着您可以随时免费获取代码并为其做出贡献。OAuth 是一个庞大的话题，所有开发人员都不得不重新发明轮子。让我们尝试让它成为处理 OAuth 的完美平台吧？

最后，同样重要的是，既然你已经设置好了 Pizzly 实例，记得确保它的安全。默认情况下，它是不安全的，以帮助你入门，但你不应该让它保持原样。