# 重新認識 LINE Front-end Framework (LIFF) 前端框架 (LIFF v2) 我最早接觸 [LIFF](https://developers.line.biz/en/docs/liff/) 的時候已經是 2019 的時候了，當時的 LIFF v1 與現在的 LIFF v2 已經有了蠻大的差異，我想透過這篇文章梳理一下 LIFF v2 新版本的特性，好讓我們可以更方便的在網站上透過 LIFF 提供 LINE 用戶一些好用功能。 ![LINE LIFF SDK](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/8822799bd36aa02a2819-215279539-d82c1f5e-802f-401f-b941-de93a9883ca2.jpg) ### 正確理解 LIFF 的用途 雖然說 [LINE Front-end Framework](https://developers.line.biz/en/docs/liff/) (`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](https://liff-playground.netlify.app/) 網頁，快速預覽所有 LIFF SDK 提供的各項功能，讓你很清楚的知道 LIFF 可以做哪些事！以下我列出幾個 [LIFF Playground](https://liff-playground.netlify.app/) 的亮點： - 幫助 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](https://developers.line.biz/en/docs/liff/overview/#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](https://developers.line.biz/en/reference/liff/) 參考文件，這裡有更多 LIFF SDK 與 API 的技術細節。 ### 正確理解 LIFF Browser 的用途 在 LINE 平台中可以使用以下 4 種瀏覽器類型，很多人搞不清楚其中的差別，我特別重點說明一下： 1. [LINE In-App Browser](https://developers.line.biz/en/glossary/#line-iab) 在 LINE App 任意位置開啟的連結，預設都會開啟一個內嵌在 LINE App 中的瀏覽器，這種瀏覽器幾乎與一般瀏覽器無異，但其實在使用上有諸多限制，建議開發人員不要把他當成「正常」的瀏覽器來使用，當成「閱讀網頁內容」的工具會比較好一些，不要做太多需要登入才能用的功能在上面。 > LINE In-App Browser 雖然支援 Cookies 與 localStorage 操作，但沒人保證可以儲存多久，可能 App 升級一下資料就清除了，對使用者來說其實很不好用。 2. [LINE LIFF Browser](https://developers.line.biz/en/glossary/#liff-browser) 這是一個相當特殊的瀏覽器類型，他只有透過 `LIFF App` 的**專用網址**才能開啟，網址結構如下： ``` https://liff.line.me/{LIFF_ID} ``` 這個 `LIFF App` 專用網址必須跟 [LINE Developers](https://developers.line.biz/zh-hant/) 之中的 `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](https://developers.line.biz/en/docs/liff/opening-liff-app/) 說明！ 這個 LIFF Browser 也支援「最小化」功能，把剛開啟的 LIFF App 最小化成一個 Icon，隨時可以點擊 Icon 恢復瀏覽器顯示，還蠻方便的。詳情請見 [Minimizing LIFF browser](https://developers.line.biz/en/docs/liff/minimizing-liff-browser/) 說明！👍 3. [LINE MINI App](https://developers.line.biz/en/services/line-mini-app/) 這也是一個相當特殊的瀏覽器類型，其用途跟 `LINE LIFF Browser` 相當類似，都需要專用網址才能打開，但是跟 `LINE LIFF Browser` 不同的地方在於，`LINE MINI App` 可以打包上架為一個 **LINE 服務**，可以讓使用者在 LINE App 的「**主頁**」搜尋到這個 `LINE MINI App`，使用上會方便許多，通常只有知名品牌才會選用這種方式上架。目前 LINE MINI App 只有指定的**LINE 技術合作夥伴**或**特定主題或品牌**才能通過審核，在台灣尚未公開給大眾申請。 4. [External Browser](https://developers.line.biz/en/glossary/#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 的標準作業流程： 1. 設定網頁標題 (Page Title) 請在 HTML 的 `` 區段中加入 `` 標籤，理論上每一份 HTML 應該都有這個標籤定義才對！ ```html <title>The Will Will Web ``` 2. 加入 LIFF SDK 請將 LIFF SDK 加入到網頁 `` 最開頭的地方： ```html ``` 如果你的網站使用到任何其他前端框架，可能會想把 LIFF SDK 改用 `npm` 的方式安裝載入： ```bash npm install --save @line/liff ``` 匯入 `liff` 物件的方法： ```javascript import liff from '@line/liff'; ``` 3. 初始化 LIFF SDK 初始化 LIFF SDK 是一個非常必要的操作，而且應當在**網頁載入後立即執行**，這個方法基本上是非同步執行的，所以不會有封鎖執行緒的問題。 > 注意: 因為透過 `LIFF App` 的**專用網址**連入的要求，可能包含需要轉址的路徑，當 `liff.init()` 初始化完畢後可能會根據傳入的網址來決定要轉向到哪一頁，因此這段程式碼應當在**網頁載入後立即執行**！ 當你的網頁開在 `LINE In-App Browser` 或 `LINE LIFF Browser` 瀏覽器時，在 LIFF SDK 初始化過後才能呼叫某些 API，這裡最重要的參數就是 `liffId` 了，你要先到 [LINE Developers](https://developers.line.biz/console/) 的 `LINE Login` 或 `LINE MINI App` 頻道的 LIFF 頁籤內先建立一組 `LIFF_ID`，並將這個 `LIFF_ID` 設定到 `liff.init()` 的 `liffId` 參數上。 ```html ``` 以下是取得環境資訊的程式碼範例，記得一定要初始化之後才能執行這些 API 喔！ ```html ``` > 注意: 你只要是用 `LINE LIFF Browser` 瀏覽器開啟 LIFF App 網頁，透過 `liff.init()` 初始化之後，預設就會自動登入！👍 如果你希望在初始化 LIFF SDK 的時候，即便在「外部瀏覽器」的環境下也要啟用「自動登入」功能，可以加入 `withLoginOnExternalBrowser: true` 參數，他會在頁面初始化的時候自動進行 LINE Login 的 OAuth 2.0 授權流程！ ```html ``` > 這個 `withLoginOnExternalBrowser: true` 選項建議只用在 LINE App 內才會開啟的網頁上使用。否則你能想像你開啟我的部落格後，第一時間轉向到 LINE Login 畫面是什麼感覺嗎？😅 4. 有些取得環境資訊的 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](https://developers.line.biz/en/docs/liff/liff-plugin/) `liff.i18n.setLang()`: 設定 LIFF SDK 的顯示語言，任何 [RFC 5646 (BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646) 定義的語言都可以，**繁體中文**可以是 `zh-Hant` 或 `zh-Hant-TW` 都可以。 以上就是使用 LIFF SDK 開發網頁的起手式，理解了觀念與啟動方法，其他都不複雜了，剩下的 API 就是有用到的時候才去看 [LIFF v2 API reference](https://developers.line.biz/en/reference/liff/) 說明文件。當然，別忘記 [LIFF Playground](https://liff-playground.netlify.app/) 的存在，他可以很快速的幫助你快速瀏覽所有的 LIFF APIs！👍 ### 總結 我覺得 LIFF 並不難，難的地方在於初學者很容易搞不清楚 [LIFF 的用途](https://developers.line.biz/en/docs/liff/overview/)與 [LIFF Browser](https://developers.line.biz/en/docs/liff/overview/#liff-browser) 的存在與 [LIFF App 的開啟方式](https://developers.line.biz/en/docs/liff/opening-liff-app/)，搞懂這些地方，後續在開發上就不會有甚麼困難與障礙了！🚀 ### 相關連結 - [LINE Developers](https://developers.line.biz/en/) - [LINE Front-end Framework (LIFF)](https://developers.line.biz/en/docs/liff/) - [LIFF v2 API reference](https://developers.line.biz/en/reference/liff/) - [Developing a LIFF app](https://developers.line.biz/en/docs/liff/developing-liff-apps/) - [Opening a LIFF app](https://developers.line.biz/en/docs/liff/opening-liff-app/) - [LINE MINI App](https://developers.line.biz/en/docs/line-mini-app/) - [LINE Login](https://developers.line.biz/en/docs/line-login/) - 開發工具 - [LIFF Snippets - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=doggy8088.liff-snippets) - 其他文章 - [透過三個 LINE LIFF ID 創造出無限的 LIFF | 筆記國度](https://taichunmin.idv.tw/blog/2020-09-18-line-three-size-liff.html) - [LINE 經營教學進階篇｜不可不知的 LINE 經營名詞與功能使用情境](https://oakmega.com/blog/basic-knowledge-in-line-business) - [LINE 經營進階篇｜line liff應用、liff教學及如何從 line developer 建立 Line LIFF](https://www.ezpretty.com.tw/blog/inner?id=43) - [【LINE Developers】Provider 及 Channel 設定說明](https://tw.linebiz.com/manual/line-official-account/line-porvider-and-channel-intro/)