[Node.js]Facebook Workplaceでチャットボットを作成する方法

概要
Facebook Workplaceに登録する
カスタム統合を作成する
ボットアプリケーションを準備する。
ボットアプリケーションを動作させる。
カスタム統合を設定する
1. 統合へのアクセス許可
2. Webhookを設定
完成、おめでとう
参考

概要

Facebook Workplaceでチャットボットを実現するにはカスタム統合アプリとWebhookを使用します。

公式の説明を引用するとこんな感じです。

カスタム統合アプリでWorkplaceのイベントをサブスクライブし、更新をリアルタイムで受信します。Workplaceで変更が発生するとWebhookトピックにサブスクライブしている各カスタム統合アプリのコールバックURLにHTTPS POSTでリクエストが送信されます。

図解するとこのようなイメージですかね。

なんとなくイメージ湧きましたか？

Facebook Workplaceに登録する

ビジネス向けコラボレーションツール

Metaが提供するオールインワンのビジネスコミュニケーションプラットフォームで、チャット、ビデオ、グループ、イントラネットを、すでにお使いの仕事用ツールに安全に組み込めます。

上記のサイトの「Workplaceを試す」ボタンでアカウント登録をしてください。

最初の登録はアドバンスプランとなるはず。

詳細な説明はないが、施行期間が終了後に無料のエッセンシャルプランに切り替わると思われま
す。
作成後はログインし、カスタム統合を作成してください。

カスタム統合を作成する

左側メニューから「管理者用パネル」をクリックして統合を選択してください。

表示された画面で「カスタム統合を作成」をクリックしましょう。

任意の名前をつけて「作成する」をクリックすると以下のようにカスタム統合が作成されます。

これでWorkplaceからのイベントを受信するいわゆるサブスクライブするカスタム統合が作成できました。

ボットアプリケーションを準備する。

次にカスタム統合からWebhookを受け取ってユーザにメッセージを返却するボットアプリケーションを作成しないといけません。さらで修正するのはいよいよめんどくさいので何かないかと漁っていたらありました。

graph-api-webhooks-samples

まんまのタイトルですね。
公式にNode.jsのサンプルが転がっていたので、ベースは以下のサンプルアプリを使用します。

Herokuで動くサンプルだよ！と書いてますね。サンキュー Kilenaitor！

Commits · fbsamples/graph-api-webhooks-samples

These are sample clients for Facebook's Graph API Webhooks and Instagram's Real-time Photo Updates API. - Commits · fbsamples/graph-api-webhooks-samples

ただ、このサンプルソース。カスタム統合からWebhookを受信するのみなので、ユーザにメッセージを返却するように変更しないといけません。

SDK

ユーザにメッセージを送るためにはGraph APIを経由する必要があるため、SDKにFBgraphを使用することにしました。

選定基準はぱっとみ簡単そう、かつ新しそうだからです。

SDKは下記の公式のURLに各言語に対応するサードパーティ製SDKの一覧があります。

FBgraphもこの中から見つけました。他にもあるので色々使いやすいやつ探してみるもいいかですね。参考にしてください。

Meta開発者向けドキュメント | Meta API、SDK、ガイド

ソースコードを修正する

さて、いよいよソースの修正なのですが、
ライセンス上Apacheだったので、直接変更して再配布しても良さそうだけど、がっつりヘッダにコメントとか書いてあるのがめんどうなので、変更点だけ記載しておきます。

index.jsの以下の処理を書き換えてください。

var bodyParser = require('body-parser');
var express = require('express');
var app = express();
var xhub = require('express-x-hub');

app.set('port', (process.env.PORT || 5000));
app.listen(app.get('port'));

app.use(xhub({ algorithm: 'sha1', secret: 'xxx' })); // ★変更：process.env.APP_SECRETをカスタム統合の詳細から転記
app.use(bodyParser.json());

var token = process.env.TOKEN || 'token'; // ★変更：process.env.TOKENをカスタム統合の詳細から転記
var received_updates = [];

// ★追加------------------------
// npm i fbgraph をしてモジュールを取り込んでおくこと
var graph = require('fbgraph');
graph.setAccessToken(token);
// ★------------------------

// 中略-----

app.post('/facebook', function(req, res) {
    console.log('Facebook request body:', req.body);

    if (!req.isXHubValid()) {
      console.log('Warning - request header X-Hub-Signature not present or invalid');
      res.sendStatus(401);
      return;
    }

    console.log('request header X-Hub-Signature validated');
    // Process the Facebook updates here
    received_updates.unshift(req.body);
// ★追加--------------------------------
    var wallPost = {
      "messaging_type": "RESPONSE",
      "recipient": {
        "id": req.body.entry[0].messaging[0].sender.id
      },
      "message": {
        "text": "hello, world!"
      }
    };

    graph.post("/me/messages", wallPost, function(err, res) {
      // returns the post id
      console.error(res); // { id: xxxxx}
    });
// ★--------------------------------

    res.sendStatus(200);
});

上記ではWorkplaceのカスタム統合アプリ（サンプル）でインベントが発生した際、イベント発生させたユーザにGraph APIを通じてテキストメッセージ（hello, world!）を送信しています。

ボットアプリケーションを動作させる。

このままアプリケーションをHerokuにデプロイしてもいいのですが、いちいちgithubやらherokugitでリポジトリを作るのがめんどくさいので動作確認をngrokで行います。

ngrokの詳細は以下のサイトを参照してください。
https://parashuto.com/rriver/tools/secure-tunneling-service-ngrok

webhookはHTTPSしか受け付けないのでローカルホストをHTTPSでトンネルして接続できるようにするのがngrokです。

ngrokを使えるようにして以下のコマンドを実行すれば結果が得れるので、httpsのほうを使ってください。
以下のコマンドを実行した場合だと、

https://5633d89aec69.ngrok.io/facebook
ngrok is the fastest way to put anything on the internet with a single command.
5633d89aec69.ngrok.io

がHTTPSをトンネルしたURLとなります。

$ ngrok http 5000

Session Status                online
Session Expires               1 hour, 58 minutes
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://5633d89aec69.ngrok.io -> http://localhost:5000
Forwarding                    https://5633d89aec69.ngrok.io -> http://localhost:5000