在鐵人賽前半段，我們深入探討了 LINE Bot 的兩大核心功能：Richmenu(選單設置)與各種 Reply Message(回覆訊息)的訊息類型。然而在實務應用中，若要提供更豐富的互動體驗，Line 往往需要搭配 LIFF(LINE Front-end Framework)來實現更多元的應用場景。
以常見的早餐店點餐網站或店家會員卡為例，使用者點擊連結後，LIFF 網頁會在 LINE 內開啟，此時已處於登入狀態。授權後即可取得使用者的 LINE 資料(如名稱、頭像)，無需額外註冊。完成操作後關閉網頁，便直接返回聊天室。
本日程式碼的範例連結
若 Line Bot 服務對象以年長用戶為主，需特別留意裝置相容性問題。年長用戶常使用較舊版本的手機系統，若未進行完善的相容性測試，可能導致頁面無法正常顯示或功能失效，影響使用體驗。
LIFF 瀏覽器採用各平台的原生網頁元件：
這些底層技術直接影響系統相容性與快取策略的實作方式。快取行為受 HTTP 標頭控制,特別是 Cache-Control 等相關設定。
LINE LIFF 必須在已擁有 LINE Login 頻道的前提下才能建立，它屬於 LINE Login 服務的一部分，與先前使用的 Messaging API 是不同的頻道服務項目。因此，可以將 LINE LIFF 視為一個獨立的前端專案來進行開發與建置。
建置頻道時需要填寫以下必要資訊：
Web app 即可。目前僅需透過瀏覽器開啟 LIFF 連結,暫不需要原生應用程式雖非必填項目,但建議設置頻道圖示,因為使用者在首次授權時會看到此圖示,有助於建立品牌識別度
完成上述設定後,即可建立 LINE Login 頻道。
頻道下方會顯示發布狀態。當狀態為「Developing」時，僅限開發者本人測試使用，無法分享給其他使用者。若需要讓其他人使用，需將頻道發布為正式版本，狀態會變更為「Published」。
每個 LINE Login 頻道最多可新增 30 個 LINE LIFF 應用程式
進入剛才建立的 LINE Login 頻道後，點選「LIFF」頁籤，即可進行 LIFF 應用程式的相關設定。
向下捲動頁面，點擊「Add」按鈕，開始新增第一個 LIFF 應用程式。
建立 LIFF 應用程式需填寫以下必要資訊：
Full、Tall、Compact 三種尺寸
不同 Scope 會影響可使用的 LIFF SDK 方法：
- openid：基本的身份驗證權限，可使用
liff.getIDToken()及liff.getDecodedIDToken()- profile：可使用
liff.getProfile()取得使用者資訊，或使用liff.getFriendship()確認是否已加入官方帳號為好友- chat_message.write：允許透過
liff.sendMessages()發送訊息到 LINE 聊天室。
Off。此選項控制使用者在授權時是否需要加入對應的 LINE 官方帳號為好友。【 Options 】
liff.scanCodeV2() 方法啟動 LINE 內建的 QR code 掃描器。創建完成後，就能看到 LIFF 應用程式的名稱和相關資訊。記得先記好目前的 LIFF ID 後面會使用到喔。
補充說明：
true，需要在 LINE Login 頻道設定中綁定官方 Messaging API 帳號。profile 權限，預設仍然無法取得使用者的 email 資訊。若需要取得 email，必須另外在 LINE Login 頻道設定中開啟 email 權限。
當使用者透過行動裝置開啟 LIFF URL 時，會看到需要授權的畫面。
這部分我們可以透過時序圖來了解其流程：
目前我們位於第一個 break 區域，這個階段主要是判定使用者是否同意授權。
當我們點選「允許」之後，系統會重新導向到設定的 endpoint URL，流程就到此結束。由於目前設定的 endpoint URL 並非指向使用 LIFF 開發的網站，因此不會執行後續的 LIFF 初始化流程。
Step 1：使用官方腳手架工具創建專案
開啟終端機，輸入以下指令來創建 LIFF 專案：
npx @line/create-liff-app
Step 2：選擇開發框架並填入 LIFF ID
根據互動式問答選擇您要使用的前端框架，並輸入剛才創建的 LIFF 應用程式 ID。
本範例使用 Vue 框架進行示範（預設採用 Options API）
Step 3：查看專案結構並啟動開發伺服器
創建完成後，可以查看專案的資料夾結構，預設的進入點是 src/App.vue。
如果前面步驟沒有設定 LIFF ID，可以在
.env檔案中進行設定。
在專案路徑下輸入以下指令啟動開發伺服器：
npm run dev
開啟架設的伺服器查看 LIFF 專案網頁：
這邊可以按照啟動的網址輸入至 URL，查看這個 LIFF 初始專案的網頁
看到網頁這樣呈現就代表 LIFF 初始化成功囉
LIFF 應用程式在載入時會自動執行初始化程序。當使用者透過 LINE 應用程式開啟 LIFF URL 時，系統會顯示授權畫面請求使用者同意。授權完成且 LIFF 初始化成功後，應用程式即可正常使用 LIFF API 提供的各項功能，例如取得使用者資料、傳送訊息等。
若使用者透過網頁版(非 LINE 應用程式)開啟 LIFF URL，則需要額外整合 LINE Login 進行身份驗證，才能正常使用 LIFF 功能。
此設定方式與先前架設 LIFF Webhook Server 的流程相同。在開發初期階段，我們同樣透過 ngrok 第三方服務，將本地的 HTTP 網址轉換為符合 HTTPS 安全協定的網址，以滿足 LINE Platform 的安全性要求。這樣可以優先確保應用程式能夠正常運作，後續再進行正式部署。
在設定 LIFF Endpoint URL 之前，需要在 Vite 配置檔中加入 ngrok 網域的 allowedHosts 設定。這是因為 Vite 開發伺服器預設僅接受來自 localhost 的連線請求，必須額外授權才能允許 ngrok 代理服務的外部網域存取。
Step 1：設定 Vite 允許的主機清單
在 vite.config.ts 中加入 ngrok 網域設定。
vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
allowedHosts: [".ngrok-free.app"], // 開發階段搭配 ngrok 使用
},
});
Step 2：實作 LINE Login 驗證機制
由於我們是透過網頁版開啟 LIFF 應用程式，當需要讀取使用者資料時，必須先經過登入驗證環節。確認使用者身份合法後，才能透過 liff 物件呼叫 getProfile() 方法取得使用者資料。
本範例使用的 LIFF API：
src/App.vue
// 略
<script lang="ts">
import { defineComponent } from "vue";
import liff from "@line/liff";
export default defineComponent({
data() {
return {
message: "",
error: ""
};
},
mounted() {
liff
.init({
liffId: import.meta.env.VITE_LIFF_ID
})
.then(async () => {
if (!liff.isLoggedIn()) {
liff.login(); // 若未登入則導向登入頁面
} else {
const userProfile = await liff.getProfile();
this.message = JSON.stringify(userProfile);
}
})
.catch((e: Error) => {
this.message = "LIFF init failed.";
this.error = `${e}`;
});
}
});
</script>
接著啟動 ngrok，並將產生的網址替換至 LINE Developers 上的 LIFF Endpoint URL。完成後，即可透過行動裝置或網頁瀏覽器開啟 LIFF URL 進行測試。
雖然 liff.getProfile() 可以取得使用者身份資料，但官方文件特別提醒，若直接將前端取得的用戶身份傳送至後端伺服器，會有資料被竄改的風險。建議改為透過驗證 ID token 的方式，讓後端安全地取得使用者身份資訊。
到這邊，我們已經成功完成上述流程圖的完整流程：成功初始化 LIFF 應用程式，並正常顯示自己架設的 LIFF 網頁。
本日範例有改寫成 Composition API 版本，並且搭配顯示 LIFF App 執行環境的狀態。
LIFF 是與 LINE App 深度整合的前端框架，可讓網頁應用直接透過 LINE 開啟並進行統一驗證，同時能偵測使用者的執行環境與支援功能，使前端能依實際狀況動態呈現內容。今天的重點主要放在初步了解 LIFF 的基本設定。
iThome鐵人賽
看影片追技術