LINE LIFF 開發指南：從零到一的完整流程

LINE LIFF（LINE Front-end Framework）讓開發者能在 LINE 應用內嵌入客製化的網頁應用，讓用戶無需離開 LINE 就能完成互動。相比傳統 App 開發，LIFF 只需要前端技術（HTML / JavaScript），開發成本低、部署快速，是許多企業導入 LINE 服務的第一步。

✅ 適合對象：想在 LINE 官方帳號加入互動功能的開發者或企業，例如預約系統、表單填寫、點數查詢等。

什麼是 LIFF？

LIFF 是一個讓你在 LINE 內開啟自訂網頁的機制。當用戶點擊 LIFF URL（格式為 https://liff.line.me/[LIFF-ID]），LINE 會在內建瀏覽器中開啟你的應用，並自動帶入用戶的 LINE Token，讓你可以取得用戶基本資料（ID、暱稱、頭像）。

LIFF 主要應用場景：

線上預約/報名系統（預填 LINE 資訊，省去輸入步驟）
會員點數查詢 / 優惠券領取
問卷調查（自動帶入用戶身份）
訂單確認 / 出貨追蹤頁面

Step 1：建立 LINE Login Channel

LIFF 需要依附在一個 LINE Login Channel 下。前往 developers.line.biz 登入後：

選擇或建立一個 Provider
點擊「Create a new channel」→ 選擇「LINE Login」
填寫 Channel 名稱、描述，選擇 App Type 為「Web app」
完成建立後進入 Channel 設定頁面

Step 2：新增 LIFF App

在 Channel 頁面找到「LIFF」分頁，點擊「Add」：

LIFF app name：你的應用名稱
Size：Full / Tall / Compact（推薦 Full，佔滿整個螢幕）
Endpoint URL：你的 HTTPS 網址（本地測試可用 ngrok）
Scopes：勾選 profile（取得用戶暱稱/頭像）、openid（取得 userId）

建立後會拿到一組 LIFF ID，格式為 1234567890-xxxxxxxx，請妥善保存。

Step 3：前端整合 LIFF SDK

在你的 HTML 頁面加入 LIFF SDK，並初始化：

<!-- 引入 LIFF SDK -->
<script src="https://static.line-scdn.net/liff/edge/versions/2.22.3/sdk.js"></script>

<script>
  const LIFF_ID = '你的-LIFF-ID';

  async function initLiff() {
    try {
      await liff.init({ liffId: LIFF_ID });

      if (!liff.isLoggedIn()) {
        liff.login(); // 自動導向 LINE 登入
        return;
      }

      // 取得用戶資料
      const profile = await liff.getProfile();
      console.log('userId:', profile.userId);
      console.log('displayName:', profile.displayName);
      console.log('pictureUrl:', profile.pictureUrl);

    } catch (err) {
      console.error('LIFF init failed:', err);
    }
  }

  initLiff();
</script>

Step 4：傳送訊息給自己

LIFF 允許直接以用戶身份傳送訊息到聊天室（需在 LINE 開啟才有效）：

// 傳送文字訊息到目前的聊天室
if (liff.isInClient()) {
  await liff.sendMessages([
    { type: 'text', text: '預約成功！我們將於 24 小時內確認。' }
  ]);
}

// 關閉 LIFF 視窗
liff.closeWindow();

⚠️ 注意：liff.sendMessages() 只有在 LINE 內建瀏覽器中開啟時才有效，外部瀏覽器會報錯。建議加上 liff.isInClient() 判斷。

Step 5：本機開發測試

LIFF Endpoint 必須是 HTTPS，本機測試推薦使用 ngrok：

# 安裝 ngrok 後啟動 (假設本機 port 3000)
ngrok http 3000

# 取得 https://xxxx.ngrok.io，填入 LIFF Endpoint URL

填入後在 LINE 中直接開啟 https://liff.line.me/[LIFF-ID] 即可測試。

Step 6：上線注意事項

部署到正式環境（Vercel / GitHub Pages / 你的主機），確保 HTTPS
更新 LIFF Endpoint URL 為正式域名
LINE Login Channel 的「Callback URL」需加入你的域名
若有用到 profile scope，Channel 需在 LINE Developers 完成審核（通常立即生效）

常見問題

liff.init() 一直 pending：確認 LIFF ID 正確，且頁面是 HTTPS
取得 userId 但無法對應用戶：需在後端建立 userId ↔ 會員資料的對應表
在電腦瀏覽器測試登入失敗：正常現象，LIFF 在電腦版需先登入 LINE Web，或改用手機

以上流程走完，你就有一個完整可運行的 LIFF 應用。實際案例中，我們通常會搭配 Messaging API 的 Webhook 在後端記錄預約資料，並自動回傳確認訊息給用戶，形成完整的自動化流程。