前言

Yeah! PPAP , but here are Line Bot and Webhooks :p

前言提要請看 [Day 23] 動手篇 - 等等！什麼是 Webhooks？ ，今天空出時間在 2 個小時內突破卡關許久的 Line Bot Webhooks ，既然是卡關的突破，內容自然不會很多，但重點一定都會提到。

此外若想使用現成 Line Bot package ，在 Github 關於 Node.js 不算少，大家可以試試，只是要注意 package 使用的 API 是 Bot API ( 已被捨棄 ) 、 Messaging API ( 運行中 ) ； Bundit J. - linebot 使用的是新的 API ，支援原生 Node.js 和 Express ，有需要的可以試試 ( 我沒用過，主要是看 Source Code ；做 Line Bot 後，最近很喜歡在 Github 翻 Source Code 看 XD )

進本文前回頭說說如何取得 Request 和 Response

• 熟悉的 Express

  const express = require('express');
  const app = express();
  
  // 用 Function 接，參數第一個為 Request ，第二個為 Response
  // 第三個為 Callback function
  app.get('/', function (req, res, next) {
    res.send('Hello World!')
  });
  
  app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
  });
  

• 再來看看 Koa

  const koa = require('koa');
  const app = koa();
  
  /*
    1. Request 、 Response 在 Koa 都包在 Context 裡，習慣上我們會直接簡寫 ctx
      - Koa context 還包了 Node.js 本身的 Request 和 Response
    2. next 在 Koa 是暫停，和 Express 不同；暫停是為了等待需要時間回應的處理
  */
  app.use(function *(ctx, next){
    // Koa 取 Request 、 Response
    ctx.req
    // ( 也可以直接用 ctx ，記得多半都有 alias 到 )
    ctx.res
  
    // Koa 取 Node.js Request 、 Response
    ctx.request
    ctx.response
  });
  
  app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
  });
  

說完，進本文！

Go! Line Bot Webhooks

Example Code 延續 [Day 21] 動手篇 - Please give me Mocha (1)

• 兩個重點
  1. HTTP Status Code 改為 200
  2. Request Body 可以取得 User 傳送的資料

知道這兩點後以下提供兩種 Webhooks 的處理方式，

• 簡單的方式

  • 不做 Line Bot Channel Secret 的檢查

  const koa = require('koa');
  const app = koa();
  
  const router = require('koa-router');
  router.post('/webhooks', function *(ctx, next) {
    // 取 User 傳送得資料
    ctx.req.body
  })
  app
    .use(router())
    // 自訂 middleware
    .use(function *(ctx, next){
      this.status = 200;
    });
  
  app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
  });
  

• 我建議的方式

  • 做 Line Bot Channel Secret 與 x-line-signature 間的檢查
  • 不同改 Status Code ( 我會用 400 )
    
  • 相同才取 Request Body

  明天再來寫這部分，會從 Line Bot Channel Secret 開始寫起

後記

卡關主要卡在兩個地方

1. x-line-signature 怎麼放進 Request header？
   • 實際上不必擔心它，因為 Webhooks 的 Request 不需要從 Server 端產生
2. Line Bot Channel Secret 與 x-line-signature 的比對

靠著 Source Code 解決我腦中不解的地方，才發現看 Source Code 實戰收獲遠大於文章，當然這句話也印證在這。目前文章的 Example Code 多半被簡化，之後我釋出這個的 Github repository 建議大家比較看看之間的差異。