第一章：打通任督二脈 - 註冊 Line Developer 與建立 Provider

歡迎來到 Line Punch Web (前台管理介面) 的開發課程！

在前面的後端課程中，我們已經用 FastAPI 架設好了伺服器，它能接收打卡訊息、把資料寫進 Supabase 資料庫，還能在半夜自動發報表。 但是，如果你要賣這套系統給餐廳老闆，你總不能叫老闆每天打開 Supabase 黑漆漆的資料庫介面去看員工有沒有遲到吧？ 老闆需要的是一個美觀、直覺、可以用手機打開的網頁管理後台。

而更厲害的是，我們不只要做網頁，我們還要把這個網頁「直接鑲嵌在 Line 裡面」！讓員工或老闆點擊圖文選單，不用跳轉瀏覽器、不用輸入帳號密碼，直接在 Line 裡面秒開系統！ 這個神級技術，就叫做 LIFF (Line Front-end Framework)。

在正式開始寫 React 程式碼之前，我們必須先搞定 Line 開發者後台的設定。很多網路教學只教你怎麼寫前端，卻不告訴你怎麼去後台申請，導致新手卡在第一步就放棄了。今天，我們要把所有的 Line 生態系術語一次搞懂，並申請到你的專屬身分證！

🧠 核心觀念：Provider、Channel 與 LIFF 到底是什麼關係？

你可以把 Line Developer 後台想像成是一棟辦公大樓：

  1. Provider (提供者)：這是你的「公司名稱」或「組織名稱」。這棟辦公大樓就是你的 Provider。一個 Provider 底下可以擁有很多個不同的產品。
  2. Channel (頻道)：這是你的「應用程式產品」。例如「Line Login」是一個 Channel (負責處理登入驗證)，「Messaging API」是另一個 Channel (負責做官方帳號跟機器人聊天)。
  3. LIFF (Line 網頁框架)：這是掛載在「Line Login Channel」底下的一種特殊網頁應用。它可以讓你的 React 網頁在 Line 聊天室裡面以「半截視窗」或「全螢幕」的方式打開，並且自動取得使用者的 Line ID、大頭貼與暱稱。

了解這層級關係後，我們開始動手申請！

🛠️ 第一步：註冊帳號與建立 Provider

  1. 前往 Line Developers 官網，點擊右上角的「登入」。
  2. 選擇「使用 LINE 帳號登入」，用你個人日常使用的 Line 帳號掃碼登入即可。(不用擔心，這不會影響你平時的聊天紀錄)
  3. 第一次登入時，系統會要求你輸入「開發者名稱」與 Email。請填寫真實可聯絡的資訊。
  4. 登入後，在左側邊欄點擊 Create a new provider (建立新的提供者)。
    • Provider name: 輸入你的公司名稱或專案名稱，例如 Vibe Tutor Punch System。
    • 點擊 Create 確認建立。

🔑 第二步：建立 Line Login Channel (會員登入頻道)

這一步非常關鍵，LIFF 必須依附在 Line Login 底下才能運作。 在剛剛建立的 Provider 頁面中，點擊 Create a new channel，接著選擇 LINE Login。

請依照以下指示填寫表單：

  1. Region (地區): 選擇 Taiwan。
  2. Channel icon (圖示): 上傳一張代表這個打卡系統的精美 Logo。(這會在使用者授權登入時看到，所以很重要！)
  3. Channel name (名稱): 輸入 打卡系統內部後台。(這也是使用者授權時會看到的名稱)
  4. Channel description (描述): 輸入 員工專用打卡與管理介面。
  5. App types (應用程式類型): **🔥【絕對不能勾錯】**請務必勾選 Web app (網頁應用程式)，因為我們要做的是基於 React 的網頁！
  6. 閱讀並勾選下方的同意條款，點擊 Create。

🌐 第三步：建立 LIFF App (獲取終極武器 LIFF ID)

現在，我們進入了剛剛建好的 Line Login Channel 頁面。準備來註冊我們的網頁！

  1. 點擊畫面上方的 LIFF 標籤頁。
  2. 點擊 Add 按鈕，準備建立一個 LIFF 應用程式。
  3. LIFF app name (名稱): 輸入 員工打卡頁面。
  4. Size (視窗尺寸): 這裡決定了網頁在 Line 裡面打開的樣子。
    • Full (全螢幕)：適合做複雜的管理後台。
    • Tall (高視窗/半截)：適合做快速打卡、抽獎活動，體驗最好，不會讓人覺得跳離了 Line。
    • 請選擇 Full 作為我們管理後台的示範。
  5. Endpoint URL (端點網址): 這裡要填寫你的 React 網頁網址。
    • 🚧 開發階段：請先填寫 http://localhost:5173 (注意，雖然 Line 通常要求 https，但在 localhost 開發時允許 http)。如果你有使用 ngrok，也可以填 ngrok 網址。
    • 🚀 未來上線：當你用 Vercel 部署後，記得回來這裡改成 Vercel 的正式網址。
  6. Scopes (權限範圍): 🔥【非常重要】
    • 請務必勾選 profile (獲取使用者的頭像與暱稱)。
    • 勾選 openid (獲取使用者內部唯一的 ID，這是我們寫入資料庫的關鍵身分證)。
  7. 點擊 Add 保存。

🎉 恭喜獲得專屬神兵利器！

建立完成後，畫面最上方會出現一串代碼，名稱叫做 LIFF ID (格式長得像 1234567890-abcdefgh)。

這串 LIFF ID 是整個前台系統的靈魂。 請立刻把它複製起來，貼到你電腦裡的記事本中保存！

有了它，我們就能在接下來的章節中，透過 React 初始化這套框架，讓網頁擁有讀心術，一打開就知道「現在是誰在操作手機」。 準備好你的編輯器，我們要在下一章教你如何寫出帶有 LIFF 登入功能的 React 程式碼了！