LINE LIFF (LINE Frontend Framework) 前端框架，如何理解、設定與使用 LIFF app

商業，創業，業務，職涯，美食，葡萄酒，閱讀，網路科技。

從 Larry 創業以及商業的經驗，希望以白話的口吻，介紹給大家這個商業的世界。

FB粉專會頻繁地更新 Larry 對於商業、社會、人生的觀察與心得，歡迎大家追蹤互動~

圖片來源 https://developers.line.biz/en/docs/liff/overview/

LINE 應該是台灣人最常使用的通訊軟體。LIFF (LINE Frontend Framework) 是一個 LINE 提供的 web app 平台。

LIFF app 我們可以想成是一個嵌入 LIFF SDK (js) 的網頁，使用者在自己的 LINE 點開該網頁時，直接 Line login 到該網頁。

一般 LINE 聊天機器人，與用戶交談一定是「問答式訊息」的形式。LIFF 因為是網頁的形式，可以達成一些問答式訊息做不到的效果。另外，LIFF 因為是 LINE 自家的東西，高度整合，在 LINE 裡彈出 LIFF 網頁的用戶體驗，也比轉址到其他網頁好。

要使用 LIFF，到 LINE Developer Console 建立一個類型為「LINE Login」的 channel。目前 (2023年6月) 一定要類型為「LINE Login」的 channel (Messaging API 不行)。

在「LINE Login」channel 切到 LIFF tab，可以新增一個 LIFF app。也可以新增多個 LIFF app，會列在這頁。

如果在一個 channel 底下新增了多個 LIFF app。LINE 在前幾天有一個公告，2023/5/23 之後新增的 LIFF app，會以新增日期新到舊排列，2023/5/23 以前新增的 LIFF app 則沒有固定的排序規則。
https://developers.line.biz/en/news/2023/05/23/order-of-liff-apps/

新增 LIFF app 時，填入你想要的 LIFF app 名稱。選擇彈出的 Size：Full / Tall / Compact，三擇一。

彈出 Size 的選項分別是：Full 佔據手機螢幕 100%，Tall 佔據手機螢幕”約” 80%，Compact 佔據手機螢幕”約” 50%。

填入你的 Endpoint URL。這是你要 host 實體網頁的 URL，這實體網頁就是所謂的 LIFF web app。輸入的網址要 https 開頭。

接著選擇用戶授權 LIFF SDK 的不同權限 Scopes：profile / chat_message.write / openid，可以多選。

以 profile 舉例，如果有勾 profile 且用戶使用時同意，這樣 LIFF app 就可以使用 liff.getProfile() 或 liff.getFriendship() 兩個 API。

接著選擇 Bot link feature: On (Normal) / On (Aggressive) / Off，三擇一。

一般來說選 On (Normal)，這會在 LIFF app 用戶使用同意這一頁，增加一個將此 LINE 官方帳號 (Official Account, OA) 增加為好友的選項。

新增完了會得到一個 LIFF ID 跟 LIFF URL。以目前來說 (2023年6月)，LIFF URL 的格式是 https://liff.line.me/your_liff_id

使用者觸發此 LIFF URL 時，LINE 會轉址到之前填的 Endpoint URL，並提供 LIFF web app。當然，轉址時 LINE server 會確認點擊來源、確認是哪個 LINE 用戶，以及 Developer Console 的後台設定，例如彈出高度的設定。

https://developers.line.biz/en/docs/liff/developing-liff-apps/
LIFF 網頁的製作，參考這份官方文件。基本上一開始一定要 init

liff.init({
    liffId: 'your_liff_id’,
})
.then(() => {
    // start to use LIFF's api
})
.catch((err) => {
    console.log(err);
});

在 LIFF browser (也就是在 LINE App 中點開)，做完 init 就直接已經 login 了。在 external browser (也就是一般手機/電腦瀏覽器) 要另 call liff.login()，因為我們主要使用場景是在 LINE App，暫時不談 external browser。

如果在 LIFF browser 點開，init / login 成功了，我們可以直接 call liff.getProfile()，就可以拿到 LINE user id，顯示名稱、縮圖。還記得文章上方 Developer Console 設定時，要選一個 Scopes，有勾 profile 才能使用 liff.getProfile()。

詳細 LIFF API 規格參考官方文件
https://developers.line.biz/en/reference/liff/

init / login 完成了，你的應用就可以開始了。例如，如果需要 LIFF app 與你的系統主機作互動，用 access token 或 ID token 當溝通方式。

// 二擇一，如果需要回傳 server
liff.getAccessToken();
liff.getIDToken(); // 需要 Scope openid 的權限

完整的互動方式請參考官方文件，有 sequence diagram
https://developers.line.biz/en/docs/liff/using-user-profile/

以上大概就是 LIFF app 的架構。建立一個實體網頁 → 在 Developer Console 中設定 → 在實體網頁嵌入 LIFF SDK 並初始成功 → 在 LIFF browser (也就是在 LINE App 中) 點開 LIFF URL，建立好的 LIFF app 就會彈出了。

接著就是建立你的系統需求、應用、以及變化。