API 的乐趣：构建 Slack 公告板应用程序！

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

注意：本文部分内容（2019 年）提及使用 Bearer 连接 Slack API。现在，我们建议您使用我们的开源项目Pizzly。您可以使用 Pizzly 来处理本文中提到的 OAuth 相关部分。

和大家一样， Bearer也经常使用 Slack 。我们有很多频道，有些是团队通用的，有些只供公会使用。我们甚至还有一些专门用于远程咖啡交流的频道 #coffee。

和其他团队一样，Slack 上的信息也很容易丢失。所以我们努力做好的一件事就是把重要信息置顶在每个频道里。

它可以是快速启动项目的命令，也可以是我们最喜欢的餐厅菜单链接。现在，置顶消息已经成为我们 Slack 日常操作的重要组成部分——我们甚至会在私信中置顶消息。

在 Slack 中，你可以通过频道顶部的📌图标查看置顶消息。点击该图标会打开一个侧边栏，显示消息的精简版本。你需要点击每条消息才能查看其完整内容。

问题在于，Slack 的免费版本不允许用户访问旧消息。但事实证明，API 可以做到！所以，我们为此开发了一个应用程序。

我们来看看做得怎么样？

了解 Slack API

我们先来看一下Slack 的 API 文档，其中引用了一个具有以下摘要的pins.list端点：

该请求需要以下参数：

Slack 文档中的 token 是用户 token，更常见的说法是访问 token。而 channel 参数是频道标识符，这意味着我们需要先查询另一个端点channels.list。

由此我们可以推断出我们的 API 调用流程：

• 首先，我们将查询频道列表；
• 然后，我们将使用频道标识符并列出其置顶消息。

现在，该玩啦🤓！

配置 Slack API 并生成令牌

为了帮助我们使用 Slack API，我们将使用 Bearer。首先，我们将 Slack API 添加到 Bearer 的控制面板，并按照提供的说明进行操作：

我们需要创建一个新的 Slack 应用：

然后，我们配置 OAuth 回调 URL：

以及所需的范围：

最后，我们获取 Slack 凭证并将其添加到 Bearer 中：

好了，Slack 配置看起来没问题！我们开始发送 API 请求吧。不过首先，我们需要生成一个访问令牌，这是所有 OAuth API 都需要的。这个令牌代表用户身份。

通常处理 OAuth 比较棘手，但这里我们将使用 Bearer 生成此令牌。返回Bearer 控制面板上的 Slack API，然后点击 Bearer 的“连接到 Slack”按钮：

Bearer 会检索并存储此令牌，并返回一个身份验证标识符（authId）。使用 Bearer 调用 API 时，我们将使用此身份验证authId标识符代替令牌。

这样，Bearer 将始终确保传递令牌，并在需要时自动管理刷新令牌✨！

调用 Slack API

我们已准备好调用 API。以下是向该channels.list端点发送的请求示例：

$ curl "https://proxy.bearer.sh/slack/channels.list" \
-H "Authorization: _REPLACE-WITH-YOUR-BEARER-SECRET-KEY_" \
-H "Bearer-Auth-Id: _REPLACE-WITH-YOUR-AUTH-ID_"

如果您将上述参数替换为您自己的参数，Slack 将成功响应您的 API 调用 🎉！它将返回您所有频道的列表。

pins.list现在，我们可以使用先前检索到的通道 ID 之一（例如C4FE4TW9K ）向端点发送请求。

$ curl "https://proxy.bearer.sh/slack/pins.list?channel=C4FE4TW9K" \
-H "Authorization: _REPLACE-WITH-YOUR-BEARER-SECRET-KEY_" \
-H "Bearer-Auth-Id: _REPLACE-WITH-YOUR-AUTH-ID_"

我仿佛听到你们中的一些人在问：难道我们不需要token也传递令牌吗？嗯，正如我们之前所说，使用连接按钮时，Bearer 会处理令牌参数。它知道该把令牌传递到哪里以及它的值是什么！

整个逻辑和API流程都运行正常。现在是时候将Slack API集成到真正的应用程序中了。

一个用于检索置顶消息的应用程序

我们将使用 Vue.js，这是一个非常棒的框架，可以用来构建像这样的简单应用程序。没有后端，只有纯 HTML、CSS 和少量 JS 代码。

如果再加上 Bearer 的 Javascript API 客户端来执行 API 调用，那就简直太神奇了。

例如，以下是该应用获取 Slack 频道的方式：

slack
  .auth("AN-AUTH-ID-GENERATED")
  .get('/channels.list')
  .then(({ data }) => {
    if (data.ok && data.channels) {
      this.channels = channels
    }
  })

以及从先前选定的频道中获取置顶消息的功能：

slack
  .auth("AN-AUTH-ID-GENERATED")
  .get(`/pins.list?channel=${this.selectedChannelId}`)
  .then(({ data }) => {
    if (data.ok && data.items) {
      this.messages = data.items
    }
  })

关于前端 API 调用的说明：从客户端调用 API 时，您需要格外注意安全性。Bearer 允许您使用可发布的密钥来启用客户端调用。

我们的应用快完成了，但还有一些功能没有完善。目前，我们一直使用自己的 Slack 身份，但我们希望任何人都能使用自己的 Slack 身份连接，并查看自己置顶的消息。这样，它就能适用于任何 Slack 工作区。

添加 Slack 身份验证

要让用户检索自己的 Slack 频道和置顶消息，我们需要让他/她使用自己的 Slack 身份进行连接。

Bearer 提供了一个JavaScript 客户端（以及一个 React 组件）来处理此类逻辑。

添加此组件后，我们的用户即可使用其 Slack 帐户登录。通过使用用户的身份信息，我们的应用程序将代表用户向 Slack 发出 API 调用。这正是我们想要的。

总结一下！我们刚刚使用 Slack API 构建了一个静态应用。整个 OAuth 流程和 API 调用都由 Bearer 处理。并且它已使用 Netlify 部署到生产环境🚀

立即在此试用，并打开源代码以获取完整概览。