iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 25
0
Modern Web

從零開始認識 Node.js系列 第 25

[Day 25] 動手篇 - I have a Line Bot,I have a Koa Webhooks (1)

前言

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 )
      http://ithelp.ithome.com.tw/upload/images/20161224/20102342GkWEwHvF10.png
    • 相同才取 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 建議大家比較看看之間的差異。


上一篇
[Day 24] 動手篇 - 停!XMLHttpRequest or Fetch API
下一篇
[Day 26] 動手篇 - I have a Line Bot,I have a Koa Webhooks (2)
系列文
從零開始認識 Node.js31

尚未有邦友留言

立即登入留言