2-1 Line Bot測試

一、Webhook

Webhook 指的是一個「網址」，透過伺服器建立 Webhook 網址後，有串接 Webhook 的位置就能使用 HTTP 的 POST 方法，向伺服器傳送或接收特定的資料。

二、LINE BOT 與 WebHook 的關係 

當使用者在 LINE 聊天室裡跟 LINE BOT 聊天，會發生下列的步驟：

• Step 1：向使用 Message API 所建立的 LINE BOT 發送訊息。
• Step 2：訊息透過 Webhook 傳遞到使用者部署 GAS 程式的伺服器。
• Step 3：根據 GAS 程式的邏輯，處理訊息。
• Step 4：透過 Webhook 回傳結果到 LINE BOT。
• Step 5：LINE BOT 發送訊息到 LINE 聊天室裡。

三、路由

1. GAS可以接受「POST」、「GET」請求
2. POST => doPost()
3. GET => doGet()
4. 由於在GAS部署出來的網址，只有一個，但要做的事情有許多，所以必須建立「路由」來分類
5. Line Bot WebHook 是使用「POST」，所以需在 doPost()增加路由

6.   Route.path("Webhook", Webhook);//post

    

7. 第一個參數： "Webhook"是指關鍵字：https://網址?op=Webhook，請將此網址設定至 Line Bot 的 Webhook 網址
8. 第二個參數：Webhook 是指 函數：必須 找一個地方 建立 函數 function Webhook(e){.....}
9. 新增 指令碼 prog_line_bot
   因 指令碼與HTML(樣版)，不能同名，故我通常在指令碼會加上前綴「prog_」
10. prog_line_bot.gs

    function Webhook(e) {
      //---------------------------------- 記錄Line Bot 訊息
      // e.postData.contents
      let formData = {
        sn: '',
        timestamp: '',
        type: 'prog_line_bot / Webhook(e)',
        code: e
      }    
      insert_sheet_record(formData);
      //---------------------------------- 記錄Line Bot 訊息 end
    
      return;  
    }

    Webhook：是函數名稱
    Webhook(e)：e 是外部傳進來的參數
    insert_sheet_record(formData)：是將 formData 記錄寫到「記錄工作表」，方便我們查看 LineBot傳什麼值進來

11. Line Developers 設定 Webhook URL：
    將部署的正式網址 https://網址+?op=Webhook 填上
    Use webhook 啟用
    回到 程式碼.gs，設定「CHANNEL_ACCESS_TOKEN」

    
    var CHANNEL_ACCESS_TOKEN = 'Line Bot 的 CHANNEL_ACCESS_TOKEN';

    只要程式碼有異動，正式網址一定要「重新部署」
    執行「Verify」驗證(請至記錄工作表檢查是否有記錄寫入)，只要有記錄則代表設定無誤

    {
      "sn":14,
      "timestamp":"2023/04/28 14:34:33",
      "type":"prog_line_bot / Webhook()",
      "code":{
        "parameter":{"op":"Webhook"},
        "postData":{
          "contents":"{\"destination\":\"Ub0e2772a46889b075d8ccb039135e9b1\",\"events\":[]}","length":63,
          "name":"postData",
          "type":"application/json"},
        "contentLength":63,
        "contextPath":"",
        "queryString":"op=Webhook",
        "parameters":{"op":["Webhook"]}
      }
    }

12. Javascript 物件、陣列說明
13. 請將 Line Bot加好友，然後去 line 官方 找到 Line Bot 隨便聊天，送出一個訊息，再去記錄工作表，觀看記錄
14. 此時，e.postData.contents.events 不再是一個空陣列
15. 既然我們要看是「e.postData.contents」，所以再把函數修改為
    而且傳進的是 JSON 的字串，所以用 JSON.parse(e.postData.contents)來還原 JSON

    
    function Webhook(e) {
      //---------------------------------- 記錄Line Bot 訊息
      // e.postData.contents
      let formData = {
        sn: '',
        timestamp: '',
        type: 'prog_line_bot / Webhook()',
        code: JSON.parse(e.postData.contents)
      }    
      insert_sheet_record(formData);
      //---------------------------------- 記錄Line Bot 訊息 end
    
      return;  
    }

     

16. 變更程式碼後，必須再重新部署，部署完成後，再去 Line官方，送出一個聊天訊息，再去觀看記錄