【LIFF】認識 LINE Front-end Framework (LIFF) 前端框架 (LIFF v2)

Wed, 01 Feb 2023 00:00:00 +0000

我最早接觸 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 In-App Browser：

在 LINE App 任意位置開啟的連結，預設都會開啟一個內嵌在 LINE App 中的瀏覽器，這種瀏覽器幾乎與一般瀏覽器無異，但其實在使用上有諸多限制，建議開發人員不要把他當成「正常」的瀏覽器來使用，當成「閱讀網頁內容」的工具會比較好一些，不要做太多需要登入才能用的功能在上面。

LINE In-App Browser 雖然支援 Cookies 與 localStorage 操作，但沒人保證可以儲存多久，可能 App 升級一下資料就清除了，對使用者來說其實很不好用。

LINE LIFF Browser

LINE LIFF Browser：

這是一個相當特殊的瀏覽器類型，他只有透過 LIFF App 的專用網址才能開啟，網址結構如下：

1

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 MINI App：

這也是一個相當特殊的瀏覽器類型，其用途跟 LINE LIFF Browser 相當類似，都需要專用網址才能打開，但是跟 LINE LIFF Browser 不同的地方在於，LINE MINI App 可以打包上架為一個 LINE 服務，可以讓使用者在 LINE App 的「主頁」搜尋到這個 LINE MINI App，使用上會方便許多，通常只有知名品牌才會選用這種方式上架。目前 LINE MINI App 只有指定的 LINE 技術合作夥伴或特定主題或品牌才能通過審核，在台灣尚未公開給大眾申請。

External Browser

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 應該都有這個標籤定義才對！

1

<title>The Will Will Web</title>

加入 LIFF SDK
請將 LIFF SDK 加入到網頁 <body> 最開頭的地方：

1

<script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

如果你的網站使用到任何其他前端框架，可能會想把 LIFF SDK 改用 npm 的方式安裝載入：

1
2
3


npm install --save @line/liff
# or
# yarn add @line/liff

匯入 liff 物件的方法：

1

import liff from '@line/liff';

初始化 LIFF SDK
初始化 LIFF SDK 是一個非常必要的操作，因為當你的網頁開在 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 參數上。

1
2
3
4
5
6
7


<script>
liff.init({
 liffId: '1566379427-xKvNdlJ9'
}).then(() => {
 // Start to use liff's api
});
</script>

以下是取得環境資訊的程式碼範例，記得一定要初始化之後才能執行這些 API 喔！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<script>
liff.init({
 liffId: '1566379427-xKvNdlJ9'
}).then(() => {
 console.log(liff.getLanguage()); // 取得用戶的主要語言
 console.log(liff.getVersion()); // 取得 LIFF SDK 的版本
 console.log(liff.isInClient()); // 判斷目前網頁是否跑在 LIFF Browser 底下
 console.log(liff.isLoggedIn()); // 判斷開啟此網頁的 LINE 使用者是否為登入狀態
 console.log(liff.getOS()); // 取得使用者目前使用的作業系統為何
 console.log(liff.getLineVersion()); // 取得使用者目前使用的 LINE App 版本
});
</script>

注意: 你只要是用 LINE LIFF Browser 瀏覽器開啟 LIFF App 網頁，透過 liff.init() 初始化之後，預設就會自動登入！👍

如果你希望在初始化 LIFF SDK 的時候，即便在「外部瀏覽器」的環境下也要啟用「自動登入」功能，可以加入 withLoginOnExternalBrowser: true 參數，他會在頁面初始化的時候自動進行 LINE Login 的 OAuth 2.0 授權流程！

1
2
3
4
5
6
7
8


<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 的開啟方式，搞懂這些地方，後續在開發上就不會有甚麼困難與障礙了！🚀

Line Front-End Framework on Wayne's blog | 偉恩的部落格 | 技術博客