支持 Instagram 的 Messenger API 体验示例 - Original Coast Clothing
Original Coast Clothing (OC) 是一个虚构的服装品牌，用于展示 Instagram 开放平台有哪些主要功能可以提供出色的客户体验。在此示例的启发下，任何人都能利用自动化功能和实时客户支持功能，创建令用户满意的支持 Instagram 的 Messenger API 体验。已提供应用的开源代码和关于如何在本地环境或远程服务器上部署体验的指南。还有对应的 Messenger 体验示例。 立即行动，尝试向 @originalcoastclothing 发消息或评论一篇帖子。 |  |
在 Instagram 上部署此体验
完成本指南所述操作后，您将可以在自己的服务器上运行完整的 Instagram 应用，回复由您帐户发出的消息。
此体验采用的是开源代码。任何人都能轻松上手，打造出色的消息收发体验。
该代码是在 BSD 许可下发布的，因此您可根据业务需求随意使用这类代码。我们已将代码托管在 GitHub 上，供您做进一步参考。
部署 Instagram 应用的要求
- Instagram 专业帐户（创作者帐户或业务帐户）。
- 已关联对应 Instagram 帐户的Facebook 公共主页。确保您拥有 Facebook 公共主页，在联系用户时，可以代表您的 Instagram 专业帐户身份。如要新建公共主页，请访问 https://www.facebook.com/pages/create。您也可以先设置一个测试公共主页。
- 可以在您的公共主页上执行任务的开发者帐户。开发者帐户支持创建新应用，这是所有 Facebook 集成的核心。您可前往 Facebook 开发者网站，点击“开始”按钮，注册成为开发者。
- 已配置好基本设置的 Facebook 应用。如要创建新应用，请访问 https://developers.facebook.com/，点击添加新应用
设置步骤
此部分旨在收集所有需要的访问口令和编号，以便 Instagram 应用成功发送和接收消息。开始前，请确保您已满足上述所有要求。此时，您应该拥有公共主页和已注册的 Facebook 应用，以及一个 Instagram 专业帐户。
如果您刚刚新建了 Facebook 应用，则该应用可能还处于开发模式。请注意，该模式下的应用只能向关联至此应用的用户（管理员、开发者和测试者）发送消息。您可在此模式下继续使用本指南，但当您准备发布应用时，该应用需通过应用审核，获得 instagram_manage_messages 权限。如需了解详情，请参阅应用审核
- 按照以下入门指南文档的要求，配置您的 Instagram 集成。
- 添加一些要用于测试体验的 Instagram 测试帐户。
此时，您应该拥有以下内容
- 应用编号
- 应用密钥
- 公共主页编号
- 公共主页访问口令
- 已关联公共主页的 Instagram 帐户
- 注册为测试帐户的 Instagram 帐户
使用 Heroku 或 Glitch 一键部署
使用以下按钮可以将体验自动部署到 Heroku 或 Glitch。系统将提示您输入所需的环境变量以完成设置。
在 Heroku 上进行部署在 Glitch 上进行部署使用 ngrok 进行本地部署
隧道服务会将您的本地 Web 服务器公开给 Facebook Webhooks 可以访问的外部网址。这样的服务还有很多。在这个例子中，我们将使用 ngrok。
1.克隆存储库
将存储库克隆到您的本地设备：
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2.安装隧道服务
如未安装 ngrok，请点击 下载或通过命令行安装：
$ npm install -g ngrok
在此代码库目录下，使用首选端口向本地服务器请求隧道
$ ngrok http 3000
屏幕会显示 ngrok 状态：
Session Status online
Account Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln Free)
Version 2.3.35
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding https://1c3b838deacb.ngrok.io -> http://localhost:3000
记录转发到本地设备的外部服务器的 https 网址。在以上示例中，网址为 https://1c3b838deacb.ngrok.io。
3.安装依赖项
同样地，在存储库目录中打开一个新的终端选项卡。
$ npm install
或者，您也可以使用 Yarn：
$ yarn install
4.设置 .env 文件
将文件 .sample.env 复制到 .env
$ cp .sample.env .env
编辑 .env 文件，为您的应用和公共主页添加所有值。
5.在本地运行应用
$ node app.js
您现在应该能够在浏览器中输入 http://localhost:3000，访问应用的默认公共主页
确认您也可以通过第 2 步的外部网址访问应用。
使用 Heroku 进行部署
1.克隆存储库
将存储库克隆到您的本地设备：
git clone https://github.com/fbsamples/original-coast-clothing-ig.git cd original-coast-clothing-ig
2.安装 Heroku 命令行界面
如果目录还不是 git 存储库，请创建一个：
$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"
3.安装 Heroku 命令行界面
如果还没有安装 Heroku 命令行界面，请下载并安装
4.通过命令行界面创建应用
$ heroku apps:create
Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git
记录您的应用名称。在本例中，其为 mystic-wind-83。
5.设置环境变量
在 Heroku 应用面板上，找到您的应用，并按文件 .sample.env 中的注释设置配置变量
或者，您可以根据下面的示例，通过命令行设置 env 变量：
$ heroku config:set PAGE_ID=XXXX
6.部署代码
$ git push heroku master
7.查看记录输出
$ heroku logs --tail
关联 Webhooks
现在您的服务器正在运行，您的 Webhooks 端点位于路径 /webhook 中。在上面的 Heroku 示例中，路径将是 http://mystic-wind-83.herokuapp.com/webhook。
设置您的 Webhooks，方法可参见 [Messenger 开放平台 Webhooks 指南] (https://developers.facebook.com/docs/messenger-platform/webhooks)
在 Webhooks 订阅生效后，订阅以下事件：
- comments
- messages
- messaging_postbacks
点击已订阅事件旁边的“测试”按钮来测试 Webhooks。您可以在服务器的记录输出中看到测试事件。
测试应用设置是否成功
当您以“Instagram 测试者”的身份登录帐户时，试着向与公共主页关联的 Instagram 帐户发一条信息，或者在帖子上留言。
如果您在 Instagram 上收到对该消息的回复，则表示您的应用已完全设置就绪！就是如此简单！
疑难解答
应用只回复我一个人，而不回复其他人
Facebook 应用可能仍处于开发模式。您可以将某用户添加为应用测试者，如果该用户接受，则应用便可向其发送消息。准备好后，您可以请求 instagram_manage_messages 权限，进而回复其他用户。
其他问题
本指南是否存在错误？提出问题，让我们得知您的建议