LIFF 教學：建立流程、Endpoint URL 與 Size 設定完整說明

TL;DR

• 建立 LIFF app 的地方是 LINE Login 頻道的 LIFF 分頁，不是官方帳號管理後台。一個頻道最多可以加 30 個 LIFF app。
• Endpoint URL 必須是 https，而且不能帶 # 片段。它同時決定了 liff.init() 的作用範圍——只有在該網址本身或它的下層路徑才保證運作。
• 建立完成後會拿到 LIFF ID 與 LIFF URL（https://liff.line.me/{LIFF ID}）。給客戶的要是後者，不是你自己的網址。
• LIFF 網址與一般網址會開在兩種不同的瀏覽器。 前者開 LIFF 瀏覽器、帶得到客戶身分；後者開 LINE 內建瀏覽器、拿不到身分，會要求重新登入。這是「明明設定都對卻要客戶再登入一次」最常見的原因。
• 設定完打不開，先查頻道狀態是不是還停在開發中——那個狀態下只有開發者本人能開。

LIFF（LINE Front-end Framework）讓網頁開在 LINE 裡面，並且把客戶的 LINE 身分帶進去。概念與能做的事另有一篇完整說明，這裡只處理設定：從哪裡建立、每個欄位填什麼、以及設定完打不開時要查哪幾個地方。

一、建立 LIFF app 前要先有的頻道

LIFF app 掛在 LINE Login 頻道底下，所以要先有一個。在 LINE Developers Console 建立 provider 之後，於其下新增 LINE Login 頻道。

如果還需要推播訊息給客戶，另外要一個 Messaging API 頻道。Messaging API 頻道必須從 LINE 官方帳號管理後台開啟，不是在開發者後台直接建立（官方帳號本身的申請與收費見 LINE 官方帳號教學）——順序反過來會得到一個無法與官方帳號連動的頻道，這個錯誤要整個重來。

兩個頻道都要把狀態從開發中切換為已發布。停在開發中時，只有列為測試者的帳號能開啟，其他人看到的是錯誤畫面。

二、LIFF app 的註冊步驟與必填欄位

在 LINE Login 頻道裡切到 LIFF 分頁、按新增，依序填寫：

名稱會顯示在 LIFF app 之間切換時的提示訊息與多分頁檢視上。官方文件明訂名稱不能包含「LINE」或近似字串，取名時容易踩到。

Size 是 Compact、Tall、Full 三選一，決定網頁在 LINE 裡佔多少高度；Endpoint URL 填你的網頁網址。這兩欄各有一些細節，下面兩節分開講。

Scopes 決定這個 LIFF app 能向客戶要到哪些資料，加好友選項則有三種：On (normal) 在授權畫面附上加好友選項、On (aggressive) 在授權畫面之後再跳一個確認畫面、Off 則不顯示。這兩欄同樣往下看第五節。

存檔後系統產生兩樣東西：LIFF ID（格式像 1234567890-AbcdEfgh）與 LIFF URL（https://liff.line.me/{LIFF ID}）。要放進圖文選單或傳給客戶的是 LIFF URL。

一個 LINE Login 頻道最多可以加 30 個 LIFF app。

三、Endpoint URL 的規則與 liff.init() 的作用範圍

Endpoint URL 有兩條硬性規定：必須是 https，以及不能包含 # 片段。

比較容易忽略的是它的第二個作用——它決定了 liff.init() 在哪些網址上保證運作。官方文件寫的是：liff.init() 只在與 Endpoint URL 完全相同、或位於其下層的網址上保證運作。

舉例來說，Endpoint URL 設為 https://example.com/path1/：

設得太深會讓上層頁面落在範圍外。如果整個站都可能用到 LIFF，Endpoint URL 就該設在根路徑；只有單一功能要用，才設到該功能的路徑。

落在範圍外時的症狀不一定是報錯。主控台會出現一段警告：

liff.init() was called with a current URL that is not related to the endpoint URL.

而多分頁檢視、取得永久連結這類功能會在此時失效——官方文件另外註明，目前網址若不是以 Endpoint URL 開頭，永久連結取不到、分享也會失敗。

四、Size 的三種選擇：Compact、Tall、Full

Size 決定網頁在 LINE 裡的高度，三選一：

選 Full 時，標頭預設會顯示一個動作按鈕。啟用 Module mode 可以把它隱藏，但那個選項只有在 Size 選 Full 時才會出現。

Size 選錯不會壞掉，只是體驗差——Compact 塞進一個長表單，客戶要在一個很矮的視窗裡捲動；Full 拿來放一個確認按鈕則顯得空。這個欄位事後隨時可以改，不必在這一步停太久。

五、Scope 與加好友選項

Scope 決定 LIFF app 能取得什麼。常用的四個：

• profile：取得客戶的顯示名稱、頭像與 user ID。要辨識客戶身分就需要它。
• openid：取得 ID token，用來在自己的伺服器端驗證身分。
• email：取得電子信箱。這個選項只有在該 LINE Login 頻道已申請 OpenID Connect 電子郵件權限之後才會出現，不是預設就有。
• chat_message.write：允許 LIFF app 代替客戶送出訊息到聊天室。

勾選的 scope 會顯示在客戶第一次開啟時的授權畫面上。只勾實際會用到的——授權畫面上的項目愈多，客戶猶豫的機會愈大，而多勾的權限並不會讓功能變好。

加好友選項值得多想一下。從 LIFF 進來的客戶不會自動成為官方帳號好友，而沒加好友就收不到任何推播。如果這個 LIFF app 之後要靠推播通知客戶（預約確認、提醒），把選項設成 On (normal) 至少讓客戶在授權時看得到入口。

六、LIFF 網址與一般網址是兩種瀏覽器

設定都正確卻還是出問題時，原因多半在這裡，而官方文件不會直接告訴你。

同一個網頁，用兩種網址開會進入兩種不同的環境：

• https://liff.line.me/{LIFF ID} → 開啟 LIFF 瀏覽器。liff.isInClient() 為 true，客戶身分帶得進來，不需要重新登入。
• https://你的網域/該頁面 → 開啟 LINE 內建瀏覽器。那只是一般的 webview，沒有 LIFF 的身分脈絡，程式通常會判斷成「未登入」並要求客戶登入一次。

症狀是這樣的：圖文選單的某一格用純網址設定，客戶按下去進得了頁面，但被要求重新登入——設定看起來完全正常，因為頁面確實打開了。

還有一個連帶限制：一個 LIFF app 只綁一個 Endpoint URL，所以不能用 liff.line.me/{LIFF ID}/其他路徑 跳到同層的另一個頁面。要在同一個 LIFF 裡切換不同功能，得做成同一個 app 內的分頁，或是用查詢參數（例如 ?tab=mybookings）讓程式自己判斷該顯示哪一段。

七、設定完卻打不開的常見原因

依照排查成本由低到高：

頻道還停在開發中。 LINE Login 與 Messaging API 兩個頻道的狀態都要切到已發布，否則只有測試者開得起來。這一條佔了「別人打不開但我可以」這類回報的多數。

用的是純網址不是 LIFF 網址。 見上一節。圖文選單、訊息裡的連結、QR code，任何要帶身分的入口都該用 https://liff.line.me/{LIFF ID}。

Endpoint URL 設錯層級。 執行 liff.init() 的頁面若在 Endpoint URL 的上層，就落在保證範圍外，主控台會有警告但畫面不一定報錯。

Endpoint URL 指向錯的網域。 要填的是網站自己的網域，不是架站平台的主網域。這在使用架站平台時特別容易填錯。

Scope 沒勾。 呼叫 liff.getProfile() 卻沒勾 profile，或呼叫 liff.getIDToken() 卻沒勾 openid，方法會失敗而不是回傳空值。

真機測試不能省。以上幾項有一半在桌機的開發者工具裡看起來都是正常的，要用手機從 LINE 實際點一次才看得出來。

參考來源

• Adding a LIFF app to your channel — LINE Developers
• Developing a LIFF app — LINE Developers
• LIFF overview — LINE Developers