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

システム開発Tips

概要

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

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

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

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

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

Facebook Workplaceに登録する

ビジネス向けコミュニケーションツール
Workplace from Facebookの使い慣れたビデオ通信とコラボレーションツールで社員のつながりを作りましょう。

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

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

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

カスタム統合を作成する

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

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

file


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

file

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

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

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

graph-api-webhooks-samples

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

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

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

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

SDK

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

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

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

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

logo/fbfordevelopers

ソースコードを修正する

さて、いよいよソースの修正なのですが、
ライセンス上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

が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

カスタム統合を設定する

これが最後です。
再びWorkplaceにログインし

左側メニューから「管理者用パネル」を選択。統合から作成したカスタム統合を選択してください。

詳細が表示されると思うので、統合へのアクセス許可とWebhookを設定を設定します。

統合へのアクセス許可

メンバーへのメッセージ送信にチェックを入れます。
これでボットアプリケーションからユーザに対してメッセージを送信可能となります。
file

Webhookを設定

コールバックURLとトークンを認証に値を入力します。
コールバックURLは先程ngrokで作成したもの、トークンは統合の詳細で取得したものですね。

またmessagesにチェックを入れてください。
これにチェックを入れることでユーザがカスタム統合に対して発言した際にメッセージ受信イベントをWebhookコールバックURLに送信するようになります。

file

上記を行ったあとに画面下部にある保存ボタンを押せば準備完了です。
保存時に何らかのエラーが出た場合はトークンがおかしいかngrokのトンネリングがうまく行ってないはずです。
URL直接叩いたりして原因を調査してください。

完成、おめでとう

左側のメニューからサンプルを選択してチャットを行います。

試しに入力してくるとちゃんと返してくれましたね。

file

やったぜ!(ニッコリ

参考

Facebook Workplaceでチャットボットを使用する方法
https://developers.facebook.com/docs/workplace/bots

Node.jsのサンプルアプリの概要
https://developers.facebook.com/docs/graph-api/webhooks/sample-apps/

Webhookのメッセージ受信イベントの構造
https://developers.facebook.com/docs/messenger-platform/reference/webhook-events/messages

送信APIの構造
https://developers.facebook.com/docs/messenger-platform/reference/webhook-events/messages

フォローお願いします!

コメント

タイトルとURLをコピーしました