The Best Practice Of LIFF

大家好,我是卡米哥,LINE 官方認證的 API 專家,LINE API Expert。目前在維護知名 Node.js 聊天機器人框架 Bottender

LIFF 改版

由於 LIFF 最近有新版,也就是 v2 這個版本,做了許多的改變。因為我不是很確定什麼情況下程式可以動,於是寫了一個測試工具來看看 v2 到底有哪些改變,以及到底怎麼使用才最好。

原本是

從 LINE Messaging API 建立 LIFF

變成

從 LINE Login 建立 LIFF

進入網址從

line://app/{liffId}?query

改成

https://liff.line.me/{liffId}/path?query

JS SDK 路徑從

https://d.line-scdn.net/liff/1.0/sdk.js

改成

https://static.line-scdn.net/liff/edge/2.1/sdk.js

LIFF 的行為改變

看到這三項變更,各位會不會覺得,他們是可以組合使用的呢,又分別在 電腦版 LINE 以及手機版 LINE 上表現如何呢?

於是我做了一個表:

Image for post
Image for post
Google Sheets: LIFF Supports

並且發現了以下事實:

LIFF V2.1 SDK 搭配 https 網址時,如果有指定 path 則 SDK 內部會做一次神奇的跳轉

當點開以下網址後:

https://liff.line.me/{liffId}/path?query

首先會被跳轉到:

{Endpoint URL}?liff.state={urlencode(/path?query)}

這裡的 Endpoint URL 指的是你在建立 LIFF 時填入的 Endpoint URL。

緊接著 v2 SDK 會再做一次跳轉到以下網址:

{location.origin}/path?query

這裡可以注意到第二次的跳轉並沒有使用 {Endpoint URL},而是直接組成一個新的路徑,所以若想要串接成功,就需要寫兩個路由來處理。

在手機上點擊 LIFF 開啟頁面,再點擊連結使用外部瀏覽器開啟網址後,再點擊任何一個合法的 LIFF 都可以順暢地再回到 LINE 上。

Messaging API LIFF 能做的事,LINE Login LIFF 也都能做到。根據觀察,他們只有一個地方不同:LINE Login LIFF 可以取得 open id。

目前可以用 v1 的 Server API 去建立 LIFF,搭配 v2 的 LIFF V2 SDK,未經試驗,但我認為這樣是能動的,因為在建立 LIFF 的時候並沒有選項來控制要建立 v1 還是 v2。

本測試工具使用 query 傳遞參數來達成程式碼共用。

結論

目前在手機上使用 https + v1、在電腦上使用 https + v2 是最佳組合。

測試工具

測試工具使用 Bottender 做成。

測試結果: google sheets

測試工具 GitHub: https://github.com/Yoctol/liff-test

測試工 Demo: 請掃描以下 QRCode 並且隨便打個字。

Image for post
Image for post
liff-test
Image for post
Image for post

累爆

在追求真理的道路上

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store