Facebook Messenger開發，這一篇文章就夠了

時間 2019-12-01

標籤 messenger 開發一篇文章夠了欄目硅谷简体版

原文原文鏈接

一篇很基礎入門的Messenger開發文檔，開發語言基於node.js，初學者建議你認真閱讀這篇文章，一篇文章學會Messenger開發 node

Messenger簡介

Messenger是Facebook的聊天軟件，相似於微信，基於Messenger的開發就至關於公衆號的開發，瞭解更多，請點擊官方文檔web

開發準備

1.新建項目

mkdir messenger-webhook         // Creates a project directory
cd messenger-webhook            // Navigates to the new directory
touch index.js                  // Creates empty index.js file.
npm init                        // Creates package.json. Accept default for all questions.
npm install express body-parser --save // Installs the express.js http server framework module, 
                                               // and then adds them to the dependencies section of package.json file
複製代碼

比較簡單，新建完，項目目錄以下：express

index.js	
node_modules
package.json
複製代碼

2.建立HTTP服務器，監聽服務

'use strict';

// Imports dependencies and set up http server
const
  express = require('express'),
  bodyParser = require('body-parser'),
  app = express().use(bodyParser.json()); // creates express http server
  require('dotenv').config();

// Sets server port and logs message on success
app.listen(process.env.PORT, () => console.log('webhook is listening'));
複製代碼

此代碼用於監聽服務器請求，本次項目開發，用的node.js的express框架，其中require('dotenv').config() 做用是加載環境變量.envnpm

3.建立webhook，接收用戶事件

app.post('/webhook', (req, res) => {
    let body = req.body;
    // Checks this is an event from a page subscription
    if (body.object === 'page') {
        // Iterates over each entry - there may be multiple if batched
        body.entry.forEach(function(entry) {
            entry.messaging.forEach(messagingEvent => {
                if (messagingEvent.message) {
                    //message爲用戶向平臺發送消息事件
                } else if (messagingEvent.postback) {
                    //postback爲用戶點擊開始按鈕，點擊固定菜單等回調事件
                } else if (messagingEvent.referral) {
                    //m.me連接，廣告，印章等
                } else {
                    console.log("Webhook received unknown messagingEvent: ", messagingEvent);
                }
            })

        });
        // Returns a '200 OK' response to all requests
        res.status(200).send('EVENT_RECEIVED');
    } else {
        // Returns a '404 Not Found' if event is not from a page subscription
        res.sendStatus(404);
    }
});
複製代碼

此代碼將建立一個 /webhook 端點，用於接收 POST 請求，驗證請求是否爲 webhook 事件，而後解析消息。Messenger 平臺會經過該端點發送全部 webhook 事件。用戶在messenger發消息，監聽到的body.object是'page'，entry爲包含事件數據的陣列，我這裏開發了entry.messaging的三種用戶基本事件json

4.添加webhook驗證，驗證口令一致

// Adds support for GET requests to our webhook
app.get('/webhook', (req, res) => {

    // Your verify token. Should be a random string.
    let VERIFY_TOKEN = PAGE_ACCESS_TOKEN;

    // Parse the query params
    let mode = req.query['hub.mode'];
    let token = req.query['hub.verify_token'];
    let challenge = req.query['hub.challenge'];

    // Checks if a token and mode is in the query string of the request
    if (mode && token) {

        // Checks the mode and token sent is correct
        if (mode === 'subscribe' && token === VERIFY_TOKEN) {

            // Responds with the challenge token from the request
            console.log('WEBHOOK_VERIFIED');
            res.status(200).send(challenge);

        } else {
            // Responds with '403 Forbidden' if verify tokens do not match
            res.sendStatus(403);
        }
    }
});
複製代碼

5.測試webhook

1 本地主機上啓動 webhook：

node index.js
複製代碼

2 測試 webhook 驗證：

curl -X GET "localhost:1337/webhook?hub.verify_token=<YOUR_VERIFY_TOKEN>&hub.challenge=CHALLENGE_ACCEPTED&hub.mode=subscribe"
複製代碼

3 測試 webhook請求：

curl -H "Content-Type: application/json" -X POST "localhost:1337/webhook" -d '{"object": "page", "entry": [{"messaging": [{"message": "TEST_MESSAGE"}]}]}'
複製代碼

6. 部署webhook

爲了能接收經過 HTTPS 發送的請求，必須將 webhook 部署到擁有有效 SSL 證書的服務器中數組

7. 將 webhook 訂閱到 Facebook 應用

到如今，準備工做已經完成，可是尚未app接收webhook事件，最後一步，要將webhook訂閱到facebook應用，官方文檔很詳細，這裏再也不作教程，官方文檔入口bash

消息模板

捕捉到用戶的事件，用於自動回覆預約義信息，消息模板的做用是結構化消息，呈現用戶更好更豐富的體驗。消息模板的使用是開發Messenger的基礎，也是Messenger開發中應用最多的。Messenger預約義支持如下模板：服務器

常規模板
列表模板
按鈕模板
開放圖譜模板
回執模板
航班信息模板
媒體模板

模板的標準格式以下，其中 message.attachment.payload 屬性包含針對各種具體模板的類型和內容詳情微信

{
  "recipient":{
    "id":"<PSID>" // 發消息用戶的psid
  },
  "message":{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"<TEMPLATE_TYPE>",
        ...
      }
    }
  }
}
複製代碼

1. 常規模板

常規模板是一種簡單的結構化消息，其中包含標題、副標題、圖片和最多三個按鈕：您還能夠指定 default_action 對象（可選），設置用戶輕觸模板後將在 Messenger 網頁視圖中打開的網址。重點介紹常規模板，其餘模板的內容大同小異，不一樣就在於，不同的模板設置的屬性不同。 app

常規模板格式以下：

"payload": {
  "template_type":"generic",
  "elements":[
     {
      "title":"<TITLE_TEXT>",//消息title
      "image_url":"<IMAGE_URL_TO_DISPLAY>",//消息圖片
      "subtitle":"<SUBTITLE_TEXT>",//消息內容
      "default_action": {//默認點擊消息跳轉，type只能是web_url
        "type": "web_url",
        "url": "<DEFAULT_URL_TO_OPEN>",
        "messenger_extensions": <TRUE | FALSE>,
        "webview_height_ratio": "<COMPACT | TALL | FULL>"
      },
      "buttons":[<BUTTON_OBJECT>, ...]  //按鈕    
    },
    ...
  ]
}
複製代碼

發送模板輪播

"payload": {
  "template_type":"generic",
  "elements":[
    <GENERIC_TEMPLATE>,
    <GENERIC_TEMPLATE>,
    ...
  ]
}
複製代碼

即發送模板輪播，要在 payload 的 elements 數組中添加最多 10 個常規模板，注意最多10個常規模板。

請求示例

curl -X POST -H "Content-Type: application/json" -d '{ "recipient":{ "id":"<PSID>" }, "message":{ "attachment":{ "type":"template", "payload":{ "template_type":"generic", "elements":[ { "title":"Welcome!", "image_url":"https://petersfancybrownhats.com/company_image.png", "subtitle":"We have the right hat for everyone.", "default_action": { "type": "web_url", "url": "https://petersfancybrownhats.com/view?item=103", "messenger_extensions": false, "webview_height_ratio": "tall", "fallback_url": "https://petersfancybrownhats.com/" }, "buttons":[ { "type":"web_url", "url":"https://petersfancybrownhats.com", "title":"View Website" },{ "type":"postback", "title":"Start Chatting", "payload":"DEVELOPER_DEFINED_PAYLOAD" } ] } ] } } } }' "https://graph.facebook.com/v2.6/me/messages?access_token=<PAGE_ACCESS_TOKEN>"
複製代碼

回傳示例

{
  "recipient_id": "1254477777772919",
  "message_id": "m_AG5Hz2Uq7tuwNEhXfYYKj8mJEM_QPpz5jdCK48PnKAjSdjfipqxqMvK8ma6AC8fplwlqLP_5cgXIbu7I3rBN0P"
}  
複製代碼

在此介紹一下按鈕的模板

網址按鈕

{
 "type": "web_url",
 "url": "<URL_TO_OPEN_IN_WEBVIEW>",
 "title": "<BUTTON_TEXT>",
}
複製代碼

回傳按鈕

{
 "type": "postback",
 "title": "<BUTTON_TEXT>",
 "payload": "<STRING_SENT_TO_WEBHOOK>"
}
複製代碼

分享按鈕

{
 "type": "element_share",
 "share_contents": { 
   "attachment": {
     "type": "template",
     "payload": {//對於使用 element_share 功能的分享按鈕，僅支持包含一個網址按鈕的常規模板，即分享的內容中，button的type只能是web_url
       <GENERIC_TEMPLATE_OBJECT>
     }
   }
 }
}
複製代碼

購買按鈕（僅向美國用戶開放）

{
 "type":"payment",
 "title":"<BUTTON_TEXT>",
 "payload":"<STRING_SENT_TO_WEBHOOK>",
 "payment_summary":{
   "currency":"<CURRENCY_ABBREVIATION>",
   "payment_type":"<FIXED_AMOUNT | FLEXIBLE_AMOUNT>",
   "is_test_payment" : <TRUE | FALSE >, 
   "merchant_name":"<YOUR_BUSINESS_NAME>",
   "requested_user_info":[
     "shipping_address",
     "contact_name",
     "contact_phone",
     "contact_email"
   ],
   "price_list":[
     {
       "label":"<ITEM_NAME>",
       "amount":"<ITEM_PRICE>"
     },
     ...
   ]
 }
}
複製代碼

呼叫按鈕

{
 "type":"phone_number",
 "title":"<BUTTON_TEXT>",
 "payload":"<PHONE_NUMBER>"
}
複製代碼

登錄按鈕

{
 "type": "account_link",
 "url": "<YOUR_LOGIN_URL>"
}
複製代碼

退出按鈕

{
 "type": "account_unlink"
}
複製代碼

玩遊戲按鈕

{
 "type":"game_play",
 "title":"Play",
 "payload":"{<SERIALIZED_JSON_PAYLOAD>}",
 "game_metadata": { // Only one of the below
   "player_id": "<PLAYER_ID>",
   "context_id": "<CONTEXT_ID>"
 }
}
複製代碼

2. 列表模板

列表模板是 2-4 個結構化項目組成的列表，可在底部選擇性地顯示全局按鈕。每一個項目可包含一個縮略圖、標題、副標題和一個按鈕。一樣也能夠指定 default_action 對象，設置用戶輕觸項目後將在 Messenger 網頁視圖中打開的網址。

列表模板格式：

"payload": {
  "template_type": "list",
  "top_element_style": "<LARGE | COMPACT>",
  "elements": [
    {
      "title": "<TITLE_TEXT>",
      "subtitle": "<SUBTITLE_TEXT>",
      "image_url": "<IMAGE_URL_FOR_THUMBNAIL>",          
      "buttons": [<BUTTON_OBJECT>],
      "default_action": {
        "type": "web_url",
        "url": "<URL_TO_OPEN_WHEN_ITEM_IS_TAPPED>",
        "messenger_extensions": <TRUE | FALSE>,
        "webview_height_ratio": "<COMPACT | TALL | FULL>"
      }
    },
    ...
  ],
   "buttons": [<BUTTON_OBJECT>]  
}
複製代碼

這裏指的注意的是默認狀況下，列表中的第一個項目將做爲包含疊加文本的封面圖片顯示。能夠經過設置 "top_element_style": "compact"，將第一個項目顯示爲標準的列表項目。

請求示例

請求示例大同小異，見常規模板

回傳示例

回傳示例也同樣，見常規模板

3. 按鈕模板

按鈕模板可發送最多能包含三個按鈕的文本消息。這種模板適用於爲消息接收人提供可選擇的選項，如預約義的問題回覆或能夠採起的操做。

按鈕模板格式

"payload": {
  "template_type":"button",
  "text":"<MESSAGE_TEXT>",
  "buttons":[
    <BUTTON_OBJECT>, 
    <BUTTON_OBJECT>, 
    ...
  ]
}
複製代碼

按鈕模板比較簡單

由於請求示例和回傳示例都類似，下文將再也不作介紹，能夠直接參考官方文檔

4. 開放圖譜模板

開放圖譜模板能夠發送結構化消息，並在其中添加開放圖譜網址和可選按鈕。目前，這種模板僅支持分享歌曲。歌曲會以聊天氣泡的方式顯示，消息接收人能夠在這個氣泡中看到專輯封面和歌曲預覽。

開放圖譜模板格式：

"payload": {
  "template_type":"open_graph",
  "elements":[
     {
      "url":"<OPEN_GRAPH_URL>",
      "buttons":[<BUTTON_OBJECT>]             
    }
  ]
}
複製代碼