iT邦幫忙

2025 iThome 鐵人賽

DAY 14
0
生成式 AI

打造自己的 AI 新聞小編:每天自動抓新聞、摘要、推送到 LINE!系列 第 14

【Day 14】LINE Bot 的雙向溝通橋樑:Webhook 與 ngrok 設定教學

  • 分享至 

  • xImage
  •  

為了讓 Bot 聽懂我們說的話,並根據使用者的輸入做出相對應的回應,需要先建立一個雙向溝通的管道,而 Webhook 就是建立雙向溝通的橋樑,這也意味著我們要用到 ngrok 來解決 localhost 無法被外部存取的問題。
在開始操作之前,先來介紹一下 Webhook 到底是什麼吧~

Webhook 與 n8n Webhook 節點的區別

Webhook 其實就像訂閱通知,用 n8n 工作流來說明的話,相當於只要有事件發生,它就會自動叫 n8n 出來處理。
這就像你訂閱 YouTube 頻道,一有新影片就會跳通知一樣,Webhook 的概念也是:當外部服務發生某件事,就自動把訊息丟到你設定好的網址。

在 LINE Bot 的場景裡:

  1. 使用者傳訊息、點按鈕、點選單 → LINE 會馬上把這個事件「傳送」到我們設定的 Webhook URL
  2. n8n 的 Webhook 節點就是這個 URL 的「接收站」,它負責監聽這個網址的訊息。
  3. 只要 Webhook 節點一接到訊息,就會啟動後面的工作流。

簡單來說

  • Webhook:是一種技術概念,它是一種自動化的通知機制。
  • n8n 的 Webhook 節點:是 n8n 這個工具中,專門用來接收 Webhook 的一個功能節點。

這兩個東西是相輔相成的,你必須先在 n8n 中建立一個 Webhook 節點,才能產生那個可以被 LINE 傳送訊息的 Webhook URL

注意

Webhook 節點有兩種 URL

  1. Test URL(測試模式用) → 只有在 Workflow 處於 Test 狀態時才會生效。
  2. Production URL(正式模式用) → Workflow Active 之後才會生效。

認識 Webhook 之後就來使用 ngrok 讓 n8n 能被 LINE 伺服器找到吧~

使用 ngrok 將本機服務公開到網路

步驟一:下載並安裝 ngrok

  1. 前往 ngrok 官方網站
  2. 點選適合你作業系統的壓縮檔下載(例如:Windows, macOS, Linux)。
  3. 下載完成後,將壓縮檔解壓縮,你會得到一個名為 ngrok 的執行檔。

https://ithelp.ithome.com.tw/upload/images/20250820/20178067ryPSIExJLv.png

https://ithelp.ithome.com.tw/upload/images/20250820/20178067ywlknKq5uI.png

步驟二:註冊並取得 Auth Token

  1. ngrok 官方網站 上註冊一個免費帳號。
  2. 登入後,前往你的儀表板,點選你會看到你的 Auth Token。

https://ithelp.ithome.com.tw/upload/images/20250820/20178067erNRsWSnC2.png
3. 打開你電腦上的終端機(Terminal)或命令提示字元(Command Prompt)。
4. 執行以下指令,將你的 Auth Token 連接到 ngrok:

./ngrok authtoken <你的Auth Token>

步驟三:啟動 ngrok 並公開 n8n 服務

  1. 確保你的 n8n 工作流已經在你的本機電腦上正常運行。
  2. 開啟一個新的終端機或命令提示字元。
  3. 執行以下指令,將你的 n8n 服務公開:
./ngrok http 5678
  • http:表示你要公開的是一個 HTTP 服務。
  • 5678:這是 n8n 服務預設運行的連接埠(Port)。
  1. 執行指令後,ngrok 會在終端機中顯示它的狀態。你會看到底下有兩個網址:
    一個是 http,一個是 https
Session Status                online
Account                       你的帳號名稱 (Plan: Free)
Version                       3.26.0
Region                        Japan (jp)
Latency                       56ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://a1b2c3d4e5f6.ngrok.io -> http://localhost:5678
Connections                   ttl     opn     rt1     rt5     p50     p90
							  1       0       0.01    0.00    0.00    0.00
  1. 複製 https:// 開頭的網址,接下來貼到 LINE Bot 後台的 Webhook URL,先不要按更新!!

https://ithelp.ithome.com.tw/upload/images/20250820/20178067uNeg46hWRz.png

n8n 設定 Webhook 節點

開啟一個新的工作流,新增 Webhook 節點,把 Method 改為 Post

步驟一:取得 Webhook 網址並觸發

  1. 當你新增 Webhook 節點後,複製底下的 Path
  2. 回到 LINE Bot 後台將剛剛複製的 Path 接在 ngrok 生成的網址後面,
    並在中間加上 /webhook-test

https://ithelp.ithome.com.tw/upload/images/20250820/201780675EzZJvPXWl.png

  1. 點擊更新、驗證按鈕,確認 LINE 伺服器能夠成功連線到這個網址。

https://ithelp.ithome.com.tw/upload/images/20250820/20178067kVZE6hWyhk.png

步驟二:檢查 n8n 的輸出結果

  1. 到 n8n 介面執行 Webhook 節點,再回去LINE Bot 後台驗證一次網址,
    右側的輸出面板中會顯示結果。

    💡 重要:點擊 Execute Workflow 後,Webhook 節點就會進入「監聽」狀態,等待接收來自 Test URL(你剛剛在 LINE Bot 後台貼的網址)的呼叫。

    https://ithelp.ithome.com.tw/upload/images/20250820/20178067b4JAB1g1kh.png

    這證明你的工作流已經成功被外部事件(也就是你訪問網址的動作)所觸發。

下篇預告

明天(Day 15)會實際傳送訊息給 LINE Bot,測試它能不能收到訊息,接著設定節點蒐集訊息內容。


上一篇
【Day 13】LINE Bot 記憶的開端 - 設定 Firestore 資料庫與憑證
下一篇
【Day 15】LINE Bot 的記憶庫:收集並分析使用者訂閱主題
系列文
打造自己的 AI 新聞小編:每天自動抓新聞、摘要、推送到 LINE!15
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言