我最早接觸 LIFF 的時候已經是 2019 的時候了,當時的 LIFF v1 與現在的 LIFF v2 已經有了蠻大的差異,我想透過這篇文章梳理一下 LIFF v2 新版本的特性,好讓我們可以更方便的在網站上透過 LIFF 提供 LINE 用戶一些好用功能。
正確理解 LIFF 的用途
雖然說 LINE Front-end Framework (LIFF
) 從名字上看起來是一套由 LINE 推出的前端框架,但事實上他的用途比較像是一個函式庫(Library),讓你可以在 LINE 平台(LINE Platform) 順利的開發網頁應用程式(Web Application),幫助開發人員可以輕鬆的透過 LIFF 提供的 API 跟 LINE 用戶進行互動。
任何從 LINE 平台開啟的網頁,而網頁使用到 LIFF
提供的 JavaScript SDK,都可以稱為是一個 LIFF Apps
!
所以在 LINE 平台上開發網頁,是一個什麼樣的情境與感受呢?什麼又是 LINE 平台呢?事實上,LINE 這家公司不但有龐大的用戶基礎,它們提供的各項服務也是琳瑯滿目,所有服務的加總,就是 LINE 平台,大家都可以在這個平台上開發 Web 應用程式。以下我用一個最淺顯易懂的使用情境來說明:
假設某甲經營著一個團購生意,客戶都是透過 LINE 官方帳戶(Official Account) (簡稱 LINE OA
帳戶) 進行聯繫,當某甲想提供他的客戶一個團購的表單時,最簡單的方式就是直接傳送一個連結給他的客戶,而這個連結就是一個「網頁」並擁有一個「網址」對吧!如果你是 Web 開發人員,就可以在這份「網頁」中加入 LIFF SDK,並使用 LIFF SDK 提供的 API 來取得客戶基本資料,或是設計一些便利的 Web UI 介面幫助客戶在 LINE 聊天室中下單。這就是一個 LIFF App 的經典使用情境!👍
要認識 LIFF 最快的方式,就是直接開啟 LIFF Playground 網頁,快速預覽所有 LIFF SDK 提供的各項功能,讓你很清楚的知道 LIFF 可以做哪些事!以下我列出幾個 LIFF Playground 的亮點:
-
幫助 LINE 用戶登入/登出
事實上,這些使用到 LIFF SDK 的 LIFF Apps 並不一定要跑在 LINE App 之中,也就是說,他不一定要直接從 LINE App 開啟這份網頁。這個 LIFF Apps 其實也可以是一個獨立網頁,在任何一台電腦或手機開啟網頁也行。只是在 LINE App 之中開啟網頁可以省去「登入」的程序,使用者的操作門檻會更低一些!
-
取得 LINE 用戶的裝置資訊
你可以透過 LIFF SDK 提供的 API 取得使用者的作業系統(OS)、使用的語言(Language)、目前 LIFF SDK 使用的版本、目前 LINE App 的版本、判斷網頁是否開在 LIFF Browser 之中、判斷用戶目前是否是登入狀態、判斷用戶目前環境可以使用哪些 LIFF API。
-
取得 LINE 用戶基本資料
取得用戶的 Access Token、取得用戶的 ID Token、取得 ID Token 解開後的內容、取得 Context 資訊、取得基本資料(只有使用者唯一值、顯示名稱與大頭照)、取得與 LINE OA
之間的好友狀態。
-
強化 UI 互動的小功能
你可以在 LIFF 永久連結上加入額外參數、可以幫 LINE 用戶直接送出訊息到 OA 帳戶的聊天室中、從 LIFF Browser 開啟連結到新視窗、從 LIFF Browser 關閉視窗、分享資訊給好友、取得 QRCode 掃描結果。
當你已經瞭解 LIFF 用途之後,開發人員就可以直接看 LIFF v2 API reference 參考文件,這裡有更多 LIFF SDK 與 API 的技術細節。
正確理解 LIFF Browser 的用途
在 LINE 平台中可以使用以下 4 種瀏覽器類型,很多人搞不清楚其中的差別,我特別重點說明一下:
-
LINE In-App Browser
在 LINE App 任意位置開啟的連結,預設都會開啟一個內嵌在 LINE App 中的瀏覽器,這種瀏覽器幾乎與一般瀏覽器無異,但其實在使用上有諸多限制,建議開發人員不要把他當成「正常」的瀏覽器來使用,當成「閱讀網頁內容」的工具會比較好一些,不要做太多需要登入才能用的功能在上面。
LINE In-App Browser 雖然支援 Cookies 與 localStorage 操作,但沒人保證可以儲存多久,可能 App 升級一下資料就清除了,對使用者來說其實很不好用。
-
LINE LIFF Browser
這是一個相當特殊的瀏覽器類型,他只有透過 LIFF App
的專用網址才能開啟,網址結構如下:
https://liff.line.me/{LIFF_ID}
這個 LIFF App
專用網址必須跟 LINE Developers 之中的 LINE Login
或 LINE MINI App
頻道(Channel)綁定,事先在「頻道」中建立一組 LIFF_ID
才能使用。在 LIFF SDK 中,有部分 API 只有在 LINE LIFF Browser 之中才能使用!
使用 LIFF App
專用網址開啟的網頁,不一定要使用 LIFF SDK 來實作,只是用了 LIFF SDK 就可以享受許多 LINE LIFF Browser 才有的功能,可以降低開發門檻。其他開啟 LIFF App 的說明文件可以參考 Opening a LIFF app 說明!
這個 LIFF Browser 也支援「最小化」功能,把剛開啟的 LIFF App 最小化成一個 Icon,隨時可以點擊 Icon 恢復瀏覽器顯示,還蠻方便的。詳情請見 Minimizing LIFF browser 說明!👍
-
LINE MINI App
這也是一個相當特殊的瀏覽器類型,其用途跟 LINE LIFF Browser
相當類似,都需要專用網址才能打開,但是跟 LINE LIFF Browser
不同的地方在於,LINE MINI App
可以打包上架為一個 LINE 服務,可以讓使用者在 LINE App 的「主頁」搜尋到這個 LINE MINI App
,使用上會方便許多,通常只有知名品牌才會選用這種方式上架。目前 LINE MINI App 只有指定的LINE 技術合作夥伴或特定主題或品牌才能通過審核,在台灣尚未公開給大眾申請。
-
External Browser
你可以在 LINE App 之中已經開啟的瀏覽器,額外再開啟一個「外部瀏覽器」(External Browser),使用手機的預設瀏覽器來開啟網頁,這種網頁在瀏覽的時候就可以用到完整的瀏覽器能力,雖然可以解決 LINE App 之中的其他瀏覽器類型所提到的一些限制,但卻會失去一些在 LINE 裡面開啟網頁的方便性,例如:自動登入。
除此之外,你直接用桌機的任意瀏覽器開啟一個有使用 LIFF SDK 的網頁,對 LIFF SDK 來說,這個瀏覽器本身就是一個「外部瀏覽器」(External Browser),你可以透過 LIFF SDK 非常輕鬆的實現 LINE Login 機制,只要呼叫 liff.login()
即可!👍
開始使用 LIFF SDK 開發網頁
在任何一個網頁上,只要加入 LIFF SDK 檔案,這是一個 JavaScript 檔,就可以立即開始使用,以下是在任意網頁加入 LIFF 的標準作業流程:
-
設定網頁標題 (Page Title)
請在 HTML 的 <head>
區段中加入 <title>
標籤,理論上每一份 HTML 應該都有這個標籤定義才對!
<title>The Will Will Web</title>
-
加入 LIFF SDK
請將 LIFF SDK 加入到網頁 <body>
最開頭的地方:
<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
如果你的網站使用到任何其他前端框架,可能會想把 LIFF SDK 改用 npm
的方式安裝載入:
npm install --save @line/liff
匯入 liff
物件的方法:
import liff from '@line/liff';
-
初始化 LIFF SDK
初始化 LIFF SDK 是一個非常必要的操作,而且應當在網頁載入後立即執行,這個方法基本上是非同步執行的,所以不會有封鎖執行緒的問題。
注意: 因為透過 LIFF App
的專用網址連入的要求,可能包含需要轉址的路徑,當 liff.init()
初始化完畢後可能會根據傳入的網址來決定要轉向到哪一頁,因此這段程式碼應當在網頁載入後立即執行!
當你的網頁開在 LINE In-App Browser
或 LINE LIFF Browser
瀏覽器時,在 LIFF SDK 初始化過後才能呼叫某些 API,這裡最重要的參數就是 liffId
了,你要先到 LINE Developers 的 LINE Login
或 LINE MINI App
頻道的 LIFF 頁籤內先建立一組 LIFF_ID
,並將這個 LIFF_ID
設定到 liff.init()
的 liffId
參數上。
<script>
liff.init({
liffId: '1566379427-xKvNdlJ9'
}).then(() => {
// Start to use liff's api
});
</script>
以下是取得環境資訊的程式碼範例,記得一定要初始化之後才能執行這些 API 喔!
<script>
liff.init({
liffId: '1566379427-xKvNdlJ9'
}).then(() => {
console.log(liff.isLoggedIn()); // 判斷開啟此網頁的 LINE 使用者是否為登入狀態
});
</script>
注意: 你只要是用 LINE LIFF Browser
瀏覽器開啟 LIFF App 網頁,透過 liff.init()
初始化之後,預設就會自動登入!👍
如果你希望在初始化 LIFF SDK 的時候,即便在「外部瀏覽器」的環境下也要啟用「自動登入」功能,可以加入 withLoginOnExternalBrowser: true
參數,他會在頁面初始化的時候自動進行 LINE Login 的 OAuth 2.0 授權流程!
<script>
liff.init({
liffId: '1566379427-xKvNdlJ9', // Use own liffId
withLoginOnExternalBrowser: true, // Enable automatic login process
}).then(() => {
// Start to use liff's api
});
</script>
這個 withLoginOnExternalBrowser: true
選項建議只用在 LINE App 內才會開啟的網頁上使用。否則你能想像你開啟我的部落格後,第一時間轉向到 LINE Login 畫面是什麼感覺嗎?😅
-
有些取得環境資訊的 API 在透過 liff.init()
初始化之前也可以使用
liff.ready
: 會回傳一個 Promise 並會在 liff.init()
初始化完畢後執行,你可以在 .then()
callback 撰寫一些程式碼
liff.getOS()
: 取得用戶端的作業系統,可能的值只有 ios
, android
與 web
liff.getLanguage()
: 這等同於透過 navigator.language
取得目前瀏覽器使用的語言
liff.getVersion()
: 取得目前 LIFF SDK 使用的版本
liff.getLineVersion()
: 取得使用者目前 LINE App 的版本
liff.isInClient()
: 判斷目前網頁是否跑在 LIFF Browser 底下,你可以藉此判斷是否要初始化 LIFF SDK 或透過 liff.closeWindow()
關閉視窗!
liff.closeWindow()
: 你可以任意時間透過這個 API 關閉視窗,甚至於在 liff.init()
初始化完成之前也可以關閉。
liff.use()
: 啟用與初始化一個 LIFF Plugin
liff.i18n.setLang()
: 設定 LIFF SDK 的顯示語言,任何 RFC 5646 (BCP 47) 定義的語言都可以,繁體中文可以是 zh-Hant
或 zh-Hant-TW
都可以。
以上就是使用 LIFF SDK 開發網頁的起手式,理解了觀念與啟動方法,其他都不複雜了,剩下的 API 就是有用到的時候才去看 LIFF v2 API reference 說明文件。當然,別忘記 LIFF Playground 的存在,他可以很快速的幫助你快速瀏覽所有的 LIFF APIs!👍
總結
我覺得 LIFF 並不難,難的地方在於初學者很容易搞不清楚 LIFF 的用途與 LIFF Browser 的存在與 LIFF App 的開啟方式,搞懂這些地方,後續在開發上就不會有甚麼困難與障礙了!🚀
相關連結