🌐 語言 / Language: 中文 | English
一個示範用的 Phoenix app,把 LINE SDK ex_line 的
webhook 接收與各種訊息發送整套接好、能實際對著 LINE 官方帳號跑。
- 以 Hex 套件引入:
{:ex_line, "~> 0.1.0"}(hex.pm · 文件)。 - 憑證可放在
config/dev.secret.exs(已 gitignore),或用環境變數LINE_CHANNEL_ACCESS_TOKEN、LINE_CHANNEL_SECRET。
傳 help 會回一個可點按的 Flex 指令選單,點按鈕即可逐一測試各種訊息型別:
| 部分 | 位置 | 說明 |
|---|---|---|
| 保留 raw body | lib/ex_line_demo_web/endpoint.ex |
Plug.Parsers 加 body_reader: {ExLine.Webhook.BodyReader, :read_body, []},讓簽章驗證拿得到原始 body |
| 驗章 pipeline | lib/ex_line_demo_web/router.ex |
:line_webhook pipeline 用 ExLine.Webhook.Plug,secret 以 &ExLineDemo.line_secret/1 在每個 request 才解析 |
| webhook 路由 | lib/ex_line_demo_web/router.ex |
POST /webhook/line |
| controller | lib/ex_line_demo_web/controllers/webhook_controller.ex |
先回 200,再用 supervised async task 逐 event 處理(失敗隔離) |
| Task.Supervisor | lib/ex_line_demo/application.ex |
啟動 {Task.Supervisor, name: ExLineDemo.TaskSup} |
| event 路由 | lib/ex_line_demo/line_router.ex |
use ExLine.EventRouter,文字指令 → action |
| event 處理 | lib/ex_line_demo/line_handler.ex |
use ExLine.EventHandler,組各種訊息並用 reply_token 回覆 |
| 憑證讀取 | lib/ex_line_demo.ex |
line_client/0、line_secret/1,優先讀 config、fallback 環境變數 |
從 LINE Developers Console 的 Messaging API channel 取得 access token 與 channel secret,擇一方式設定:
方式 A:config/dev.secret.exs(推薦,本機開發用)
cp config/dev.secret.exs.example config/dev.secret.exs
# 編輯 config/dev.secret.exs 填入你的憑證(此檔已 gitignore)方式 B:環境變數
export LINE_CHANNEL_ACCESS_TOKEN="你的 channel access token"
export LINE_CHANNEL_SECRET="你的 channel secret"讀取優先序:先 application config(
config/dev.secret.exs),找不到才用環境變數。
mix deps.get # 第一次才需要
mix phx.server # 監聽 http://localhost:4000LINE 平台需要一個公開的 HTTPS webhook URL:
ngrok http 4000複製 ngrok 顯示的 https://xxxx.ngrok-free.app。
回到 LINE Developers Console → 你的 Messaging API channel:
- Webhook URL 填:
https://xxxx.ngrok-free.app/webhook/line - 按「Verify」應顯示成功(會收到一個空 events 的請求)
- 開啟「Use webhook」
- 關閉「Auto-reply messages」/「Greeting messages」以免干擾(可選)
用手機掃 channel 的 QR code 把測試官方帳號加為好友。加入後會收到一則可點按的 Flex 指令選單, 直接點按鈕即可逐一測試;也可以手動傳下列文字指令。
直接傳「文字」給官方帳號,或點 Flex 選單裡的按鈕(按鈕會幫你送出對應指令):
| 指令 | 會回覆 |
|---|---|
text |
一般文字訊息 |
textv2 |
textV2 訊息 |
sticker |
貼圖(packageId 446 / stickerId 1988) |
image |
圖片訊息 |
video |
影片訊息(placeholder URL,見下方注意事項) |
audio |
音訊訊息(placeholder URL,見下方注意事項) |
location |
位置訊息 |
imagemap |
imagemap(點左右半邊各觸發 message / uri action) |
buttons |
Buttons 範本(message / postback / uri action) |
confirm |
Confirm 範本 |
carousel |
Carousel 範本 |
imagecarousel |
Image carousel 範本 |
flex |
Flex bubble(header / hero / body / footer,含 box/text/image/button/separator) |
quickreply |
文字 + quick reply(message / postback / camera / location) |
coupon |
coupon 訊息(需先設定真實 couponId,見下方注意事項) |
actions |
展示各種 action builder(datetimepicker / camera / cameraRoll / clipboard / richmenu switch) |
sender |
文字 + 自訂寄件者名稱與頭像 |
profile |
呼叫 ExLine.Api.Profile.get/2,回你的 displayName |
bot |
呼叫 ExLine.Api.Bot.info/1,回 bot 資訊 |
quota |
呼叫 ExLine.Api.Messaging.quota/1,回訊息額度 |
consumption |
呼叫 quota_consumption/1,回本月已用訊息數 |
sent |
呼叫 sent_count/3,回昨日 push 發送數 |
followers |
呼叫 ExLine.Api.Profile.followers/2,回本頁好友數 |
endpoint |
呼叫 ExLine.Api.Webhook.get_endpoint/1 + test_endpoint/2,顯示並測試 webhook 端點 |
loading |
顯示 loading 動畫 → 模擬 3 秒運算 → 用 push 回結果(僅限 1 對 1 聊天) |
help |
回可點按的 Flex 指令選單(任何未對應的文字也會回這個) |
其他互動:
- 加好友(follow) → 回歡迎訊息 + Flex 指令選單
- 傳一張圖片 → 回「Received an image, id=...」(取自
event.message.id) - 點
buttons/quickreply裡的按鈕 → 觸發 postback,會回顯data - 傳
help或任何未對應的文字 → 回 Flex 指令選單
- 影音 placeholder:
video與audio指令使用的是 placeholder URL (https://example.com/demo/sample.mp4、.m4a,定義在lib/ex_line_demo/line_handler.ex的@demo_video_url/@demo_audio_url)。 LINE 會實際去抓取媒體,請換成你自己可公開存取的 HTTPS URL才會正常顯示。 coupon需真實 couponId:coupon 訊息必須帶一個在 LINE 官方帳號後台建立過的優惠券 ID (SDK 目前沒有 coupon 管理 API)。lib/ex_line_demo/line_handler.ex的@coupon_id預設為空字串;沒填時傳coupon會回提示請你去設定,填了才會實際送出 coupon。- 媒體需 HTTPS 且可公開存取:image 使用
https://picsum.photos/1024,imagemap 的 base URL 使用https://picsum.photos(LINE 會以base_url/{width}請求)。 actions指令:把 datetimepicker / camera / cameraRoll / clipboard / richmenu switch 各放進一則 buttons 範本,主要用來展示 builder。請留意 LINE 對 action 的放置限制(例如 buttons 範本 action 數上限、richmenu switch 僅能用於 rich menu),這則訊息可能被 LINE 回 4xx,屬預期。
mix compile # 應無錯誤、無 warning
mix test # 應全數通過(含 webhook 簽章驗證測試)