LINE LIFF 是什麼？LIFF 是 LINE Front-end Framework 的縮寫，官方定義為 LY Corporation 提供的網頁應用程式平台：企業把自己的網頁登記成 LIFF 應用程式，使用者在 LINE 裡點開 LIFF 網址時，頁面在 LIFF 瀏覽器中開啟，並能取得 LINE 使用者 ID 等資料，常用來做會員卡、報名表、預約頁與問卷，使用者不必另外下載 App。LIFF 只能加在 LINE Login 或 LINE MINI App 頻道；官方說明未來 LIFF 與 LINE MINI App 會整合為單一品牌，並建議新的 LIFF 應用程式以 LINE MINI App 建立。畫面、資料與後台仍要由企業自己開發。
LIFF 的運作方式：端點網址、LIFF 網址與瀏覽器
一個 LIFF 頁面由三個部分組成：
- 端點網址：企業自己架設的網頁位置，在開發者後台新增時填入，必須使用 HTTPS，且不能包含網址片段（#）。
- ID 與網址：新增完成後產生 LIFF ID 與專屬網址，用戶開啟時會經由平台伺服器導向端點網址，可放進圖文選單、聊天訊息或 QR Code。
- SDK：網頁以 CDN 或 npm 套件載入官方 SDK；官方說明每次開啟頁面都要執行初始化，之後才能使用取得個人檔案、傳送訊息等功能。
用戶在聊天室裡開啟這個網址時，頁面在 LIFF 瀏覽器中執行；若同一個網址在手機或電腦的一般瀏覽器開啟，就屬於外部瀏覽器。官方說明，可用的功能取決於頁面是在 LIFF 瀏覽器還是外部瀏覽器中開啟，例如 liff.scanCode() 就不能在外部瀏覽器使用；反過來，LIFF 瀏覽器也不支援部分外部瀏覽器能用的網頁技術。
line liff app 常見用途：會員卡、表單與預約
| 用途 | LIFF 負責的部分 | 企業系統負責的部分 |
|---|---|---|
| 會員卡 | 在聊天室裡開啟會員頁、辨識用戶 | 會員資料、點數與等級計算、條碼產生 |
| 活動報名表 | 帶入用戶身分、填完後可傳一則確認訊息到聊天室 | 名額控管、報名資料儲存、後台匯出 |
| 預約頁 | 選時段、送出預約 | 時段鎖定、提醒通知、改期與取消規則 |
LIFF 解決的是「在聊天軟體裡開網頁、知道是誰在用」，點數、名額、時段這些規則仍由企業系統處理。只靠官方帳號免費功能能做到什麼程度，可參考LINE免費會員功能的限制。
LIFF 瀏覽器與外部瀏覽器的差異
同一個網址可能在兩種環境被開啟，設計時要分開考慮：
- 在 LIFF 瀏覽器開啟：用戶已在 LINE App 裡，初始化後即可取得身分；從聊天室開啟並取得權限時，可以代用戶傳送訊息到該聊天室。
- 在外部瀏覽器開啟：要呼叫 liff.login() 執行 LINE 登入才能取得用戶身分，也可以在初始化時設定外部瀏覽器自動登入；部分功能無法使用。
頁面初始化後可用 liff.isInClient() 判斷是否在 LINE App 內開啟，再決定顯示哪些按鈕。另一個要注意的地方是身分驗證：官方提醒不要把前端解碼後的用戶資料直接送到伺服器，而是送出原始的 ID 權杖或存取權杖，由伺服器驗證後再決定這位用戶能看到哪些資料。
LIFF 與 LINE MINI App 的關係
LINE MINI App 同樣是在 LINE 上執行的網頁應用程式，LIFF 頁面可以加在 MINI App 頻道，但部分功能在 MINI App 不能用。官方說明未來兩者會整合成單一品牌，並建議新的 LIFF 以 MINI App 建立。對企業的影響有三點：
- 新專案：先確認官方當下的建議，再決定建在 LINE Login 或 MINI App 頻道。
- 既有專案：已在 LINE Login 頻道運作的，追蹤官方整合公告，事先規劃搬移。
- 驗證審核：新頻道的 MINI App 在通過驗證審核前屬於未驗證狀態，部分功能受限；從 LINE 搜尋進入等功能只開放給已驗證的 MINI App，規劃時程要把審核算進去。
新增 LIFF 頁面時要設定的項目
在開發者後台新增 LIFF 頁面時，這幾個欄位會影響使用體驗：
- 畫面尺寸：可選 Full、Tall 或 Compact；Full 尺寸預設在頁首顯示動作按鈕，開啟模組模式後可隱藏，此模式只在 Full 尺寸提供。
- 權限範圍（Scope）：openid 用於取得 ID 權杖，profile 用於取得個人檔案與好友狀態，chat_message.write 用於代用戶傳送訊息；email 要先申請電子郵件權限才能取得。建議只勾需要的項目。
- 加入好友選項：可設為一般、積極或關閉，在同意畫面或其後顯示加入官方帳號好友的選項；這個選項只出現在 LINE Login 頻道。
- 掃描與分享：要在頁面中掃描條碼，需開啟 Scan QR 設定，在 LIFF 瀏覽器中只有 Full 尺寸可用，外部瀏覽器須支援 WebRTC，iOS 版本也有限制；要讓用戶分享給朋友，需在頻道的 LIFF 分頁同意使用條款並啟用 shareTargetPicker。
開發方式與上線前檢查
開發流程和一般網站相近，多了平台端的登記與測試：
- 準備頻道：在公司帳號建立的提供者下建立頻道，確保用戶 ID 和官方帳號一致。
- 開發網頁：前端載入 LIFF SDK 並初始化，官方也提供 Create LIFF App、LIFF CLI 與入門範例協助建立開發環境。
- 登記與設定：在後台新增，填入端點網址、畫面尺寸與權限範圍。
- 伺服器驗證：後端驗證權杖後再存取會員資料。
- 實機測試：官方建議使用新版作業系統與 LINE App，iOS 與 Android 的 LIFF 瀏覽器分別使用不同的 WebView，兩邊都要測，也測外部瀏覽器與未授權權限的情況。
限制也要事先告知需求方：官方說明 LIFF 瀏覽器的快取無法主動清除，在社群（OpenChat）中也未正式支援；它也依賴用戶的 LINE 帳號，對沒有帳號的對象仍要準備一般網頁版本。若考慮做成可安裝的網站，可對照PWA 和 App 的差異再決定。
常見問題
做 LIFF 頁面的成本在哪裡？
主要在網頁與後台的開發、主機與維護，以及多種裝置的測試。若頁面送出後要由系統主動推播通知，推播訊息會計入官方帳號方案的則數，費用以官方公告為準。
LIFF 可以加在 Messaging API 頻道嗎？
不行。官方文件說明 LIFF 不能加在 LINE Login 與 LINE MINI App 以外的頻道。要和官方帳號搭配時，頻道應與官方帳號的 Messaging API 頻道在同一個提供者下。
用戶沒有授權個人檔案還能用嗎？
可以設計成部分功能仍可使用，需要辨識身分的功能則停用或提示。同意畫面要說明用途，權限範圍只開必要的項目。
LIFF 頁面能在電腦上開啟嗎？
可以用電腦的瀏覽器開啟這個網址，這時屬於外部瀏覽器，需要先以 LINE 帳號登入，部分功能不能使用。官方列出的外部瀏覽器支援環境為主流瀏覽器的新版，版面也要針對電腦螢幕調整。
LIFF 和圖文選單怎麼搭配？
常見做法是把頁面網址設成圖文選單的區塊連結，例如「會員卡」「我要預約」，好友點選後就在聊天室裡開啟對應頁面。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務，實際案例可見成果與案例。
想直接討論你自己的網站狀況，或需要一份初步的搜尋機會評估？
相關主題
下一步
建議先確認要在聊天室裡完成哪一件事，例如出示會員卡或預約，再列出需要的用戶資料與後台規則。京采的網頁設計服務可以協助規劃 LIFF 頁面與會員、預約後台，處理 ID 權杖驗證與官網資料串接，並在 iOS、Android 與外部瀏覽器完成測試；歡迎與我們聯繫討論。
