LIFF app LINE Frontend Framework 前端框架
前端工程 網路科技

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

圖片來源 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 就會彈出了。

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

結論

本篇走一遍 LIFF app 大的架構與理解,細節有需要請參考官方文件。

LIFF 因為是網頁的形式,可以達成一些「問答式訊息」做不到的效果。在 LINE app 中點開 LIFF,直接用戶登入後就可以開始應用。網頁開發上應該也與一般網頁無異 (不要使用 LIFF browser 不支援的技術)。

另外,LIFF 因為是 LINE 自家的東西,高度整合,在 LINE 裡彈出 LIFF 網頁,用戶體驗應該也比轉址其他網頁好。

很多服務業,例如餐飲業或美業,如果有建立 FB/IG 粉絲頁、Google 商家,其實並不需要也沒有官網。此時 LINE 的應用就派上用場了,例如查詢預約及會員點數。

這是對於市場環境的理解,以及觀念的突破:很多行業其實並不需要官網。我們要在這個認知下,做系統的規劃。

FB公開社團 Larry的午茶時光
加入不需審核,歡迎讀者加入~
我的IG帳號: larry.time.taste。剛剛起步,歡迎大家追蹤~