Chat Bot 正夯,剛好公司的專案有 Line Bot 的應用,所以參考了 不必真的架站也能 5 分鐘實機體驗 LINE bot – 教學 ( by node.js & ngrok )、LINE BOT 實戰 ( 原理篇 )、LINE BOT 實戰 ( 聊天篇 ) 等文章來進行 Nodejs 的 Line bot 開發實作練習。
開發環境
- macOS Sierra: 10.12.5
- Nodejs: 7.10.0
- Packages:
- Github: https://github.com/jerry771230/node-line-bot-practice
本次實作有以下階段:
- 申請 Line Bot 帳號
- ngrok 讓 localhost 也可以使用 HTTPS
- 使用 Nodejs 在本地端部署 webhook service
- 使用 Line App 傳訊息給 Line Bot
申請 Line Bot 帳號
到 LINE Business Center 申請商用帳號。點擊「帳號清單」,再點擊「建立商用帳號」
找到 Messageing API,點擊「開始使用Developer Trial」
輸入 Bot 的帳號名稱,更換圖片以及選擇業種,再按下確定就會建立機器人專用帳號
在申請完成的頁面下方點擊「前往LINE@MANAGER」
開始使用 API。進入 LINE@ MANAGER 後,在左邊選單 「Settings」-> 點擊「Bot Settings」-> 再按下「Enable API」
註:LINE@ MANAGER 的網址會是https://admin-official.line.me/
開頭Bot Settings 的部份要留意 Usable APIs 是否有
REPLY_MESSAGE
及PUSH_MESSAGE
。如果沒有PUSH_MESSAGE
是不能進行 Bot 主動發訊息給 Client App 的。
Request Settings 裡的 Use webhooks 請勾選 「Allow」。
Details 的 Allow Bot to join group chats、Auto Reply Message 及 Greeting Message 都勾選 「Don’t Allow」。
ngrok 讓 localhost 也可以使用 HTTPS
Line Bot 需要有 HTTPS 的 webhook service 才能接受及轉發訊息,這時候後端開發必備神器 - ngrok,可以讓 localhost 使用 HTTPS 的隨機網址,達成 webhook service 測試,省去了必須上傳到 Server 後才能得到測試結果的時間花費。
安裝
Mac 的部份可以在 ngrok 官網下載程式,解壓縮後就可以使用了。或者是丟到 /usr/local/bin
,方便之後使用。
Termial 指令
1 | ngrok http 8080 |
代表把外界的流量導到 localhost 的 8080 port。執行後會有以下畫面:
1 | ngrok by @inconshreveable (Ctrl+C to quit) |
按下 Ctrl + C
跳出並停止運作。
申請 HTTPS protocol
到 ngrok 官網註冊,可以使用 Github 或 Google 登入。
登入的畫面如下:
在 Terminal 下執行指令,這樣就可以使用 https 的網址
1 | $ ngrok authtoken {token} |
其他指令參考
- HTTP Auth
1 | ngrok http -auth "user:passwd" 80 |
- 轉址到 local domain(修改 /etc/hosts)
1 | ngrok http -host-header=myweb.dev myweb.dev:80 |
以上 ngrok 的基本使用是參考 Ngrok – 讓本機也可以開發 webhook 免部署環境的神器
使用 Nodejs 在本地端部署 webhook service
開始建立 Nodejs 專案
1 | mkdir node-line-bot |
建立 package.json
檔案,並修改 “scripts”,增加 "start": "node ."
1 | npm init |
安裝模組 linebot
及 express
1 | npm install linebot express --save |
建立 index.js
檔案的內容如下
1 | let linebot = require('linebot'), |
如何取得 Line Bot 的 Channel ID 及設定 Webhook
Channel ID、Channel Secret 及 Channel Access Token 可以從 LINE Business Center 進入後取得
取得 Channel ID、Channel Secret 及 Channel Access Token
回到 LINE Business Center 按下 Messaging API 右邊的「LINE Developers」
在 LINE developers 下的 “Basic information”,將 “Channel ID”、”Channel Secret”(點選 SHOW 會出現)、 “Channel Access Token” 複製貼到 index.js 裡對應的程式中
點選 ISSUE 會產生 “Channel Access Token”
設定 Webhook URL
同樣在 “Basic information” 下,按下右下角的 “EDIT”,然後將 ngrok 產生的網址以及 index.js 內監聽 post mehtod 的路徑組合 https://ec041dbf.ngrok.io/webhook
貼到 “Webhook URL” 中
回到 Terminal 畫面,啟動 webhook service
1 | node index.js |
再回 LINE developers 的 “Basic information”,按下 Webhoo URL 右方的 “VERIFY” 以驗證是否正確。
Terminal 畫面會有以下資訊
1 | { replyToken: '00000000000000000000000000000000', |
使用 Line App 傳訊息給 Line Bot
手機 Line App 掃描 LINE developers 的 “Basic information” 畫面中的 QR Code 將 Line Bot 加入,然後輸入文字,測試 Line Bot 是否有正確接收到。
如果有正確收到訊息,則 Terminal 畫面會顯示以下資訊
1 | { type: 'message', |
將收到的訊息,回覆給 Client App
修改一下 on ‘message’ 的內容
1 | bot.on('message', function(event) { |
記得要重啟 nodejs server 喔 :)
主動發送訊息
讓 server 啟動後 3 秒,發送訊息給 Client App,請在 index.js 加入以下程式,。
1 | // 主動發送訊息給 Client App |
參考資料:
- LINE BOT 實戰 ( 原理篇 )
- LINE BOT 實戰 ( 聊天篇 )
- 不必真的架站也能 5 分鐘實機體驗 LINE bot – 教學 ( by node.js & ngrok )
- Ngrok – 讓本機也可以開發 webhook 免部署環境的神器
- ngrok.com