大家好,我是卡米哥,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 路徑的改變
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 上表現如何呢?
於是我做了一個表:
並且發現了以下事實:
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},而是直接組成一個新的路徑,所以若想要串接成功,就需要寫兩個路由來處理。
v1 和 v2 都能用外部瀏覽器開啟網址,且可以再跳回到 LINE
在手機上點擊 LIFF 開啟頁面,再點擊連結使用外部瀏覽器開啟網址後,再點擊任何一個合法的 LIFF 都可以順暢地再回到 LINE 上。
從 LINE Messaging API 建立的 LIFF 和從 LINE Login 建立的 LIFF 目前在使用上沒有任何差異
Messaging API LIFF 能做的事,LINE Login LIFF 也都能做到。根據觀察,他們只有一個地方不同:LINE Login LIFF 可以取得 open id。
可以用 LIFF v1 Server API 搭配 LIFF v2 JS SDK
目前可以用 v1 的 Server API 去建立 LIFF,搭配 v2 的 LIFF V2 SDK,未經試驗,但我認為這樣是能動的,因為在建立 LIFF 的時候並沒有選項來控制要建立 v1 還是 v2。
line:// 開頭和 https:// 開頭的網址都可以帶參數
本測試工具使用 query 傳遞參數來達成程式碼共用。
結論
目前在手機上使用 https + v1、在電腦上使用 https + v2 是最佳組合。
測試工具
測試工具使用 Bottender 做成。
測試結果: google sheets
測試工具 GitHub: https://github.com/Yoctol/liff-test
測試工具 Demo: 請掃描以下 QRCode 並且隨便打個字。
累爆