Messenger 开放平台

Messenger 体验示例：Original Coast Clothing

Original Coast Clothing (OCC) 是我们创建的虚构服装品牌，用于展示 Messenger 开放平台的主要功能。本指南将向您介绍如何在本地环境或远程服务器中下载此应用示例的代码，以进一步了解 Messenger 提供的功能。

为完整展示具备多个接入点的 Messenger 体验，我们虚构的商家具备以下功能：

开放平台功能

此应用示例运用以下功能：

在 Messenger 中部署此体验

完成本指南所述操作后，您将可以在自己的服务器上运行完整的 Messenger 应用，回复由测试公共主页发出的消息。

准备工作

您将需要：

如果您拥有单独的开发、模拟和生产环境，则每个环境都需要有各自的 Meta 应用和 Facebook 公共主页。

本地环境设置

如要在本地环境中运行此应用示例，您将需要 NodeJS 10.x 或更高版本。

第 1 步：克隆应用示例存储库

克隆本地设备的 original-coast-clothing 存储库。

git clone https://github.com/fbsamples/original-coast-clothing.git
cd original-coast-clothing

第 2 步：安装代码依赖项

yarn install

第 3 步：获取外部地址

如要接收消息，您需能从我们的服务器获得传入 Webhooks。

如要获取外部地址，可以使用 ngrok，因为此方法能够提供外部 https 地址，可为 NodeJS 应用建立传输隧道。

安装 ngrok

npm install -g ngrok

使用首选端口向本地服务器请求隧道

ngrok http 3000

屏幕会显示 ngrok 状态：

Session Status                online
Account                       Redacted (Plan: 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

Connections                   ttl     opn     rt1     rt5     p50     p90
0       0       0.00    0.00    0.00    0.00

注意查看本地设备收到的外部服务器 https 网址。在以上示例中，网址为 https://1c3b838deacb.ngrok.io。

第 4 步：设置 Webhooks 和 Messenger 个人主页

复制您的应用中的环境模板示例

mv .sample.env .env

添加环境值

编辑 .env 文件，以添加 Facebook 应用编号、Facebook 公共主页编号、公共主页访问口令以及应用密钥的值。将 VERIFY_TOKEN 的值设置为随机字符串。您的应用会使用该字符串验证 API 调用。

第 5 步：运行应用

node app.js

现在，您应该能在浏览器内通过 http://localhost:3000 访问应用程序

第 6 步：配置您的应用

运行以下命令以配置应用及公共主页的 Messenger 个人主页的 Webhooks 订阅设置。请注意，您需要使用在 .env 文件中添加的 VERIFY_TOKEN 值。

http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>

第 7 步：测试应用设置

通过 Facebook 或 Messenger 向您的公共主页发送消息。如果 Webhooks 收到事件，则表示您的应用已全部设置完毕！

更改代码

编辑 locales/en_US.json 文件，将 get_started.welcome 下的消息“Hi {{userFirstName}}!Welcome to Original Coast Clothing...”更改为其他内容。

返回第一个终端，每次更改代码时，您都需重启 NodeJS 服务器。使用 Ctrl-C 停止并重启服务器，以重新加载新代码。

node app.js

打开 Messenger，向您的公共主页发送消息“Hi”，您将收到新消息。

Heroku 设置

Heroku 实例可用于托管业务应用或网站的生产或模拟环境。

第 1 步：创建 Heroku 应用

git init
heroku apps:create
# Creating app... done, ⬢ YOUR-APP-NAME
# Created http://YOUR-APP-NAME.herokuapp.com/ | git@heroku.com:YOUR-APP-NAME.git

第 2 步：将代码部署至 Heroku

heroku git:remote -a YOUR-APP-NAME
git push heroku master

第 3 步：设置环境变量

前往“设置”下的 Heroku 应用面板，找到应用的配置变量。添加 Facebook 应用编号、Facebook 公共主页编号、公共主页访问口令以及应用密钥的值，然后创建 VERIFY_TOKEN。

第 4 步：设置 Webhooks 和 Messenger 个人主页

您现在应该能够访问您的应用。使用您创建的配置变量 VERIFY_TOKEN，并调用 /profile 端点。

https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>

可选：以上网址将返回已上传用户画像的编号。由于系统会将这些返回的编号保存在内存中，因此您需将其添加为配置变量，以避免其在重新加载后丢失。

heroku config:set PERSONA_BILLING=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_ORDER=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_SALES=<PERSONA_ID> -a YOUR-APP-NAME

第 5 步：测试应用

从 Facebook 或在 Messenger 中向您的公共主页发送消息。如果 Webhooks 收到事件，则表示您的应用已全部设置完毕！

疑难解答

在本地重新运行应用

运行 ngrok 后，您将获得新的外部地址。更新 .env 文件中的 APP_URL 地址，然后运行 NodeJS 服务器。

node app.js

访问 http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>，更新 Facebook 应用设置中的 Webhooks 地址

我的公共主页只回复我一个人，而不回复其他人

Facebook 应用可能仍处于开发状态。您可以将某用户添加为应用测试员，如果该用户接受，则应用便可向其发送消息。准备好后，您可以请求 pages_messaging 权限，以便能够回复其他用户。

详细了解