LINE LIFF 要怎麼上線？

把 LIFF 上線的流程其實就是三件事：把前端網站部署到可公開的 HTTPS 主機、在 LINE Developers 控制台建立並設定好 Provider/Channel 與 LIFF App、把取到的 LIFF ID 整合到前端並測試（含在 LINE 裡開啟）。中間會涉及權限、授權流程與測試工具（如 ngrok）以及可能的上線審核，逐步完成就能把你的 LIFF 應用正式放給用戶使用。

LINE LIFF 要怎麼上線？

Table of Contents

用一句話理解 LIFF 上線的核心

LIFF（LINE Front-end Framework）本質上是一個在 LINE 內部或瀏覽器裡執行的網頁應用。上線就是要讓這個網頁在安全（HTTPS）且公開可訪問的環境中運行，再把這個網址註冊到 LINE Developers，取得 LIFF ID，將它寫進你的前端程式碼並通過測試與必要審核。

為什麼要把每一步都做對？

如果忽略了 HTTPS、沒有在控制台註冊正確的 Endpoint、或是沒有把 LIFF ID 放到前端初始化的地方，LIFF 在 LINE 裡面會直接失敗或無法使用登入、取得個資等功能。很多問題其實是設定錯誤或缺一環造成的，按部就班能省很多時間。

先講最簡單的流程（4 步驟）

準備部署環境：把你的前端網頁部署到支援 HTTPS 的主機（例如 Vercel、Netlify、Firebase Hosting 或自架 HTTPS 伺服器）。
在 LINE 開發者控制台建立資源：申請 Provider，建立 Channel（通常選 Messaging API / LINE Login），新增 LIFF App，填入 Endpoint URL 並取得 LIFF ID。
整合 LIFF SDK：在前端加入 @line/liff SDK，呼叫 liff.init({ liffId: ‘你的 LIFF ID’ })，處理登入與功能呼叫。
測試並上線：用 ngrok 測試本機、在 LINE 客戶端裡開啟測試、確認權限與可用性；若需要讓非測試帳號使用或使用特殊權限，按 LINE 的審核流程提交上線。

一步步詳解（Feynman：把每步拆細講清楚）

一、準備工作：帳號、Provider、Channel

你需要一個 LINE Developers 帳號（用 email 或 LINE 帳號登入），進到控制台後建立一個 Provider（相當於你的組織或專案容器）。接著建立一個 Channel。常見做法是建立 Messaging API 或 LINE Login 類型的 Channel；LIFF 可以綁在 Messaging API Channel 裡面，若你要做登入與取得用戶資料則也要在 Channel 中設定 LINE Login 的相關資訊。

填寫 channel 資訊：名稱、圖片、公司/開發者資訊等。務必填寫正確，之後如果需要官方帳號綁定或審核會用到。
Channel 設定頁面：找到 LIFF 或 Web App 欄位會有新增 LIFF 的按鈕（依控制台版本命名可能不同）。

二、部署你的前端（必須是 HTTPS 可訪問）

LIFF 會在 LINE 的 WebView 或系統瀏覽器裡載入你的網頁，所以網頁必須能被公開存取且採用 HTTPS。你可以選擇：

使用雲端靜態網站服務（Vercel / Netlify / Firebase Hosting / GitHub Pages 等）。
自架伺服器並安裝有效憑證（Let’s Encrypt）。
開發階段使用 ngrok 將本機端暴露為 HTTPS，以便在 LINE 客戶端測試。

記得 LIFF 的 Endpoint URL 必須是最終可訪問的 URL（或 ngrok 提供的一次性 URL 在測試時），並且控制台的設定要與你實際部署的 URL 完全吻合（包括 https:// 和末尾路徑）。

三、建立 LIFF App 並取得 LIFF ID

在 Channel 的 LIFF 分頁點選「新增 LIFF 應用」（或類似名稱），你需要填入：

Endpoint URL：你的網頁 URL，例如 https://yourdomain.com/liff/index.html
Size（視窗大小）：Tall / Compact / Full（在控制台設定，會影響在 LINE 內部的顯示高度）。
權限（Scopes）：例如 profile、openid、email；決定能夠取得用戶哪些資訊。
描述與語言：讓管理者或審核人員知道這個 LIFF 做什麼。

送出後你會拿到一組 LIFF ID（類似 1651234567-abcDEFgh 之類），這個 ID 是前端程式初始化 LIFF SDK 的關鍵參數，務必保留。

四、在前端整合 LIFF SDK（範例）

最常見的是使用官方的 JavaScript SDK。基本流程：

（示範）
<script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
<script>
  liff.init({ liffId: 'YOUR_LIFF_ID' })
    .then(() => {
      if (!liff.isLoggedIn()) {
        // 想要強制登入時
        liff.login();
      } else {
        liff.getProfile().then(profile => {
          console.log(profile.displayName);
        });
      }
    })
    .catch(err => console.error(err));
</script>

常用函式：

liff.init({ liffId })：初始化，必須傳入 LIFF ID。
liff.login()：觸發 LINE 登入流程（在必要時呼叫）。
liff.getProfile()：取得用戶基本資料（需 profile 權限）。
liff.getAccessToken()、liff.getIDToken()：拿到 token 用於後端驗證或與 LINE API 溝通。
liff.sendMessages()：在 LIFF 裡發送訊息到聊天室（需適當權限，且有些情形需使用者先加入官方帳號）。

五、測試（本地、LINE 客戶端與不同情境）

測試分層次，務必檢查每一層：

本機直連與 ngrok：在開發階段用 ngrok 暴露本機的 HTTPS URL，然後把該 URL 填入 LIFF App 的 Endpoint，測試每次修改是否即時生效。
LINE App 內測試：用 Line 客戶端打開 https://liff.line.me/{LIFF_ID} 或在聊天中加入帶 LIFF 連結的訊息，確認 WebView 行為、登入、API 呼叫。
非 LINE 瀏覽器測試：在桌面瀏覽器或手機瀏覽器打開，檢查回退機制（有些 LIFF 功能僅在 LINE 環境下可用）。

六、權限（Scopes）與使用限制要注意的地方

LIFF 所需的 scopes 決定你能取得哪些資訊或做哪些事，常見的 scope 包含：

profile：允許呼叫 liff.getProfile() 取得 displayName、userId、pictureUrl 等。
openid / email：若你要做 OAuth 驗證或取得 user 的 email，需設定 openid 與 email。
chat_message.write（或類似名稱）：讓 LIFF 可以排程或發送訊息，但實際使用時常有額外限制（例如用戶是否已加入官方帳號）。

某些敏感權限或想公開給所有用戶時，可能需要向 LINE 申請審核或把 Channel / 官方帳號升級成正式帳號。測試階段可用開發者帳號，但要注意：在測試清單外的帳號可能無法使用某些功能，除非通過審核。

七、上線（發佈）時的常見流程與審核

上線通常包括：

把最終生產用的 HTTPS 網址部署穩定，並在 LIFF App 設定中更新 Endpoint URL。
在 Channel 裡確認 Callback URL、OAuth 回傳網址、Allowed Origins（如有）等設定正確。
如果你的功能需要讓任何 LINE 用戶使用，或取得 email、發送訊息等敏感權限，參照 LINE 的審核指南，提交應用資訊與隱私政策、使用說明等供審核。
若與 LINE Official Account（OA）相關，確保 OA 已建立並與 Channel 正常綁定，且帳號狀態（例如已認證）符合需求。

不同情況有不同要求，官方控制台會在需要時提示要提交哪些資訊。

常見錯誤與排錯方法

404 或 blank page：確認 Endpoint URL 正確，且主機有正確回應；檢查 SPAs 文件路由，必要時在伺服器設定 fallback。
HTTPS 問題：確認憑證有效且沒有中間人攔截（某些企業網路會阻擋）；ngrok 提供的 URL 在測試時臨時有效。
LIFF ID 錯誤：確認在前端 liff.init 用的 ID 與控制台裡的 LIFF App ID 一致。
功能在瀏覽器 OK、在 LINE 內不行：某些 Web API（如 clipboard、第三方 cookie）在 LINE WebView 裡行為不同，需要替代做法。
取得 profile 失敗：確保 scope 有設定 profile，且用戶已同意授權；檢查 liff.isLoggedIn() 的回傳情況。

上線檢查清單（表格）

項目	檢查內容
HTTPS	是否有有效憑證並能從外部訪問
Endpoint URL	在 LIFF 控制台與前端部署 URL 完全一致（含路徑）
LIFF ID	是否正確填入 liff.init()
Scopes	是否包含需要的權限（profile, openid, email 等）
測試	已在 ngrok、LINE App、桌面瀏覽器測試各種情境
審核／帳號狀態	是否需提交 LINE 審核或升級官方帳號

一些實務上的小技巧

開發時用 ngrok 搭配自動重新整理（hot reload），能快速在 LINE 裡驗證修改。ngrok 的 URL 會變，記得每次更新控制台的 Endpoint。
如果你的 LIFF 頁要支援深連結（不同路由），在控制台填入可處理的主機域名與基礎路徑，或使用單一入口頁面處理前端路由。
日誌與錯誤處理：把 liff.init 的錯誤與伺服器錯誤記錄下來，方便在使用者回報時快速定位問題。
用戶體驗：在非 LINE 環境顯示友善提示，告訴使用者「請在 LINE 裡打開此頁以使用完整功能」。

以上流程其實不難，最多就是設定和權限的對應要搞清楚。做一兩次之後，你會發現大部分問題都是 URL、HTTPS、LIFF ID、scopes 這幾個環節在作怪。實務上邊做邊測、把檢查清單當步驟走過，就能順利把 LIFF 推到使用者手上。