前言

上一篇我們已經申請好 LINE 官方帳號，本篇文章將介紹 LINE 提供的前端框架 LIFF（LINE Front-end Framework），並透過 Vite 快速建立一個 Vue 3 專案，為後續的登入與互動功能建立好基礎。

什麼是 LIFF（LINE Front-end Framework）？

在開始串接前，我們先快速認識一下LIFF是什麼，LIFF全名是LINE 前端框架（LIFF, LINE Front-end Framework），是 LINE 提供讓開發者將自己的網頁服務嵌進 LINE App 裡面使用，可以把 LIFF 想像成 LINE 裡的小程式（有點像 LINE 的 Web 版小工具），讓我們在網頁能取得使用者的 LINE 資訊，像是LINE的名稱、信箱、大頭貼，甚至可以綁定帳號，做好友間分享訊息、LINE官方帳號互動聊天 等運行相關服務。

所以總結來說，LIFF 能做到：

✔ 是 LINE 提供的一種 把網頁服務「嵌進 LINE App」的技術
✔ 可以在 LINE App 的內建瀏覽器中開啟網頁。（像 LINE 的內建小程式）
✔ 可以取得使用者在 LINE 的資訊、與 LINE Bot 互動。
✔ 幫助用戶透過 LINE 連動，完成各種功能目標。（例如打卡、抽獎、登入）

舉幾個實際情境

例子1——會員中心登入

假設在 LINE Bot 圖文選單，有設計LINE註冊／登入功能。使用者點擊圖文選單「我的帳戶」連結，許可完成後 LIFF 就會自動取得使用者資訊並完成註冊登入，達成快速的註冊體驗！

使用者流程：

用戶在圖文選單點選「我的帳戶」→ LIFF 開啟會員頁 → 許可完自動註冊／登入 → 在「我的帳戶」頁面顯示會員資訊

例子2——揪團點餐分享功能

假設在便當外送平台，開發了一個「揪團點餐」功能，用戶在選好餐點後，只要點擊「揪團點餐」按鈕，系統會透過 liff.shareTargetPicker()，彈出 LINE 好友清單，讓用戶可以一鍵分享團購連結給朋友，好友只要點進連結，就能直接參與選餐與下單流程。

使用者流程：

點選「揪團點餐」→ 彈出好友清單 → 傳送訂餐連結 → LINE好友點開並加入訂購

這些都是常見的功能範例，實際上還是會根據每個專案的需求，決定要搭配哪些 LIFF 功能，開發時也需要同步評估資料串接方式、授權流程與使用者體驗，確保功能與 LINE 生態整合順暢。

安裝 Vue 專案

再來我們來安裝專案實作吧〜💪 這邊會使用 vite 建立 Vue 3 專案，以下是安裝步驟：

1. Node.js 版本注意事項⚠️ 要使用 vite 前，先確認 Node.js 的版本至少需要 20.19 或 22.12 以上，才能正常使用哦。
   
   （Vite 官網版本建議 圖片來源）

2. 請下載Node.js，前往官網下載安裝。根據你目前裝置的作業系統，選擇安裝方式。
   本篇章示範會以「 Windows作業系統 + npm 」安裝作為範例。
   
   （Node.js 官網下載畫面，建議 Windows 使用 .msi 安裝檔。 圖片來源）

安裝完成後，接著開啟終端機（Terminal），輸入以下指令來確認目前的 Node.js 版本：

node -v

查看目前Node.js版本是否正確，只要有正確顯示版本號，就代表安裝成功！

3. 接著請開啟 VS Code，或者是其他平常在使用的程式碼編輯器也可以，但需要有包含終端機（terminal）哦。
   如果想要安裝 VS Code，可以先前往官方網站下載安裝。

4. 開啟 VS Code 終端機，輸入以下指令來建立 Vue 3 專案，安裝好後一個預設的 Vue 專案就會建立。

cd <到要放專案的資料夾>
npm create vite@latest my-vue-app -- --template vue

建立完成後，接著安裝 package.json 中列出的所有依賴套件，這也會把 vite 安裝到 node_modules，npm script 時就能找到它並執行，可以輸入 npm i ，就會自動下載安裝所有套件。
💡 npm i 是 npm install 的縮寫，用來安裝 package.json 中定義的所有依賴項。

cd my-vue-app  // 確認當前位置與package.json同一層，如果當前位置正確可以不做。
npm i

5. 接著打開專案中的 package.json 檔案，找到 scripts 區塊，查看啟動本地開發伺服器的指令，這裡定義了開發、建置與預覽的指令。

...
"scripts": {

"dev": "vite",

"build": "vite build",

"preview": "vite preview"

},

啟動開發伺服器，我們要使用的指令是：

npm run dev

6. 執行完 npm run dev，點選終端機網址 Local: http://localhost:5173/ 就可以看到畫面囉！🎉
   
   （請點擊 Local 的網址連結）

（成功運行本地畫面）

現在我們已經完成了 Node.js 的安裝與 Vue 專案的建立🎉

LINE 登入流程圖解

在開始實作登入功能前，先來釐清一個很關鍵的觀念：
在 LINE App 內建瀏覽器 中開啟網頁時，如果該 LIFF 已設定需要登入授權，且使用者已授權過，LIFF會自動帶入使用者的存取憑證（Token），此時使用者進來就是登入狀態，不需要手動呼叫 liff.login()。
但如果是透過外部瀏覽器（例如 Chrome、Safari 等）開啟網頁，沒有自動登入機制，就不會自動帶入登入狀態。這種情況下，會需要透過 liff.login()，來觸發 LINE 的登入流程，並取得使用者的 LINE 資訊（例如 大頭貼、LINE名稱 等）。一般使用者可能會透過瀏覽器搜尋引擎或AI搜尋，再點擊連結進入網站，這種非 LINE App 的入口，如果需要讀取使用者資訊，就需要做 liff.login() 的動作，才能拿到授權資訊。

LINE 官方開發者有提供一張登入流程的 UML循序圖（Sequence Diagram），幫助我們更清楚了解每個步驟的流程：

（LINE 網頁應用程式登入流程 UML循序圖 圖片來源）

依白話的方式來說明流程：

• 使用者先點擊登入呼叫 liff.login() ，開始進行 LINE OAuth 登入。
• 登入成功後，依據設定的 redirectUri 導回指定頁面。
• 回到頁面後，可以透過 liff.getDecodedIDToken()取得使用者資訊，進行後續註冊、綁定或顯示會員資訊，呈現已登入狀態。

❗ 懂得判斷使用者進入的環境（LINE App 或是外部瀏覽器）會影響登入流程的撰寫方式，也確保使用者體驗流暢不卡關。

結語

這一篇，我們完成了以下任務：

• 初步了解 LIFF 的用途與優勢
• 認識LIFF可以怎麼在實際案例做運用
• 用 Vite 建立 Vue 3 專案，準備開始實作。

接下來的篇章，將正式進入 LINE 登入整合的實作流程，會使用 Vue 組合式API ( Composition API ) 風格，把「免帳號密碼就可做登入，並且取得LINE用戶資訊。」的功能實作出來，讓 LINE 與網站互動起來♪(ヽ(✿′ ▽｀)ノ♪。
Vue 開發者進擊 LINE 生態圈，我們下一篇見！👊

參考資料與延伸閱讀

⑴ LINE Front-end Framework (LIFF) 說明參考來源
⑵ LINE Login SDKs 說明參考來源
⑶ 下載 Node.js 來源
⑷ Vite官方中文文件
⑸ LINE Developers
⑹ LINE Login & web App 說明
⑺ VS Code 官方網站