設定指南

LINE 設定要填什麼、去哪裡拿

商圈集點系統要跑起來,需要在 LINE Developers 建立兩個 channel,把六個值填回後台。這份把每個值的來源路徑、長相與常見陷阱寫清楚。

前提你需要兩個不同的 channel

這是整份設定最容易錯的地方。兩個 channel 都有「Channel ID」,長得一模一樣,但用途完全不同、不能互換。

LINE Login channel

負責「認出會員是誰」

LIFF App 掛在這個 channel 底下。會員掃碼時,系統靠它拿到 LINE 使用者身分。

  • LINE Login Channel ID
  • LIFF ID

Messaging API channel

負責「發訊息給會員」

官方帳號的本體。系統靠它推播領獎通知與滿額公告。

  • Channel secret
  • Channel access token
  • Webhook URL(填回這裡)
最常見的錯誤:把 Messaging API 的 Channel ID 填進後台的「LINE Login Channel ID」。兩者都是 10 位數字,看起來沒有差別,但填錯的話會員一掃碼就會失敗,而錯誤訊息不會告訴你是這個原因。後台那一欄要填的是 LIFF 所屬的那個 channel 的 ID。

步驟 1Messaging API channel:拿 Channel ID 與 Channel secret

在 LINE Developers 開啟你的官方帳號 channel,第一個分頁就是 Basic settings。

LINE Developers 的 Messaging API channel Basic settings 頁面,紅框標示 Channel ID 與 Channel secret 兩個欄位的位置
Messaging API channel → Basic settings。上方紅框是 Channel ID,頁面最下方紅框是 Channel secret(此處已遮蔽)。
後台欄位這裡的哪一個長相
LINE Channel SecretChannel secret32 碼英數
Channel secret 等同密碼。不要貼到聊天室、截圖或任何公開的地方。萬一外洩,在同一頁按 secret 右邊的 Issue 就能換一組新的,舊的立即失效。

步驟 2Messaging API 分頁:產生 Access Token、填 Webhook

Messaging API 分頁,紅框標示 Channel ID 與 Webhook 網址欄位
Messaging API 分頁。Webhook 網址要填「你的對外網址 + /api/line/webhook」,填完按儲存,並把下方的 Use webhook 打開。
  1. 找到 Channel access token (long-lived),按 Issue 產生一組。這串很長,就是後台要填的 Messaging API Channel Access Token。
  2. Webhook 網址 填入 https://你的對外網址/api/line/webhook,按儲存。
  3. Use webhook 打開。沒開的話 LINE 不會把事件送過來。
Webhook 一定要 HTTPS,而且 localhost 不行。LINE 是從外網主動連進你的伺服器,所以本機測試需要用 ngrok 之類的通道服務取得一個對外網址。每次重開 ngrok 網址會變,記得回來更新這一欄與後台。

步驟 3LINE Login channel:拿 Channel ID 與 LIFF ID

切換到 LINE Login channel(跟上面是不同的 channel),進入 LIFF 分頁。

LIFF detail 頁面,紅框標示 LIFF ID、Size 與 Endpoint URL
LIFF 分頁 → LIFF detail。紅框由上到下依序是 LIFF ID、Size、Endpoint URL。
後台欄位這裡的哪一個長相
LIFF IDLIFF ID2010699993-Kt347Sf7
LINE Login Channel ID這個 channel 的 Basic settings → Channel ID2010699993
兩者的關係可以拿來檢查有沒有填錯:LIFF ID 的格式是「Channel ID + 連字號 + 8 碼」。所以後台的 LINE Login Channel ID,應該正好等於 LIFF ID 連字號前面那一段。對不起來就是拿錯 channel 了。

步驟 4LIFF 的三個設定要正確,否則掃不了碼

LIFF detail 的 Scopes 與 Options 區塊,紅框標示 Scopes 內容與 Scan QR 開關
同一頁往下捲。Scopes 要含 openidprofile;Options 的 Scan QR 必須打開。
設定要設成設錯會怎樣
SizeFull用 Compact / Tall 時掃碼器開不起來,會出現 subwindowOpen is not allowed
Scan QR打開沒開的話畫面上根本不會出現掃描按鈕
Scopesopenidprofile拿不到會員身分,集點會失敗
Endpoint URLhttps://你的網址/scan.html?liffId=…
詳見下一節
填成 liff.line.me 會無限跳轉,畫面永遠打不開

步驟 4.5Endpoint URL:整份設定裡最容易填錯的一欄

這一欄不是填在後台,是填在 LINE 的 LIFF 設定裡。它的意思是「LINE 要把會員送到哪裡」,所以要指向這套系統的掃碼頁

✗ 錯誤:指回 LIFF 自己

https://liff.line.me/2010699993-Kt347Sf7?liffId=…&activity=…

會員點連結 → LINE 查 Endpoint → 又指回 liff.line.me → 再查 Endpoint → 無限跳轉,畫面永遠打不開。

✓ 正確:指向你的掃碼頁

https://你的對外網址/scan.html?liffId=2010699993-Kt347Sf7

只帶 liffId,不要把 activity 寫死。

會員實際會經過的路徑

會員點
後台為每個活動產生的 LIFF 連結
https://liff.line.me/<LIFF ID>?liffId=…&activity=jiali2026
LINE 轉址
依照 Endpoint URL 送到你的伺服器,並把連結上的參數一併帶過去
到達
https://你的對外網址/scan.html?liffId=…&activity=jiali2026
掃碼頁
liffId 初始化 LINE 登入、用 activity 決定顯示哪個活動的點數
按掃描
掃到現場 QR Code 後帶著 qr 參數送出集點
為什麼帶 liffId 但不帶 activity掃碼頁需要 liffId 才能呼叫 liff.init(),萬一有人直接開沒帶參數的 LIFF 網址,Endpoint 上的這個值就是唯一來源。activity 則相反——它由後台為每個活動各自產生的連結帶入;寫死在 Endpoint 裡,這個 LIFF 就被綁在單一活動上,之後開新活動還要回 LINE 後台改設定。
用 ngrok 免費版的話,網址每次重開都會變,而同一個網址出現在三個地方:LIFF 的 Endpoint URL、Messaging API 的 Webhook 網址、後台商圈的 Webhook URL 欄位。三個要一起改,漏掉任一個就會有功能靜默失效。需要常態測試的話,ngrok 付費版的固定網域或 Cloudflare Tunnel 的免費固定網域會省掉很多麻煩。

步驟 5回到後台,六個欄位一次對照

後台 → 商圈管理 → 編輯商圈,往下捲到 LINE 設定區。每個欄位標題旁邊都有一個 ?,點開就是這張表的內容。

後台欄位來源必填
LINE Login Channel IDLINE Login channel → Basic settings → Channel ID
LIFF IDLINE Login channel → LIFF → LIFF ID
LINE Channel SecretMessaging API channel → Basic settings → Channel secret驗證 Webhook 才需要
Messaging API Channel Access TokenMessaging API channel → Messaging API → Issue要發推播才需要
Webhook URL自己填:對外網址 + /api/line/webhook
預設 Rich Menu IDLINE Official Account Manager → 圖文選單
編輯既有商圈時,兩個機密欄位會是空的。這是刻意的——系統不會把 Channel secret 與 Access Token 傳回瀏覽器。留空送出代表「不變更」,不會把既有設定清掉。只有真的要換新的值才需要輸入。

檢查設定完成後怎麼確認

  1. 後台商圈清單的「LINE 設定」欄位應該顯示已設定。顯示「未完整」代表還有必填欄位是空的。
  2. 手機的 LINE App 開啟活動的 LIFF 連結(不要用電腦瀏覽器,掃碼功能只在 LINE App 裡有)。
  3. 畫面應該出現掃描 QR Code 按鈕。沒出現就回去檢查 Scan QR 開關與 Size 是不是 Full。
  4. 掃一張後台下載的活動 QR Code,應該看到集點成功與目前點數。

對不起來的時候

症狀先檢查
掃碼後說身分取得失敗LINE Login Channel ID 是不是拿成 Messaging API 的。比對它是否等於 LIFF ID 連字號前面那段。
看不到掃描按鈕LIFF 的 Scan QR 沒開,或 Size 不是 Full。也確認是在 LINE App 內開啟。
subwindowOpen is not allowedLIFF Size 要改成 Full。
集點成功但沒收到 LINE 訊息Access Token 沒填或已失效。集點本身不依賴它,所以會「成功但沒通知」。
LINE 後台顯示 Webhook 驗證失敗網址要 HTTPS 且能從外網連到;ngrok 重開後網址會變。