The Best Practice Of LIFF

卡米哥
卡米哥
Dec 13, 2019 · 4 min read

大家好,我是卡米哥。

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 上表現如何呢?

於是我做了一個表:

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},而是直接組成一個新的路徑,所以若想要串接成功,就需要寫兩個路由來處理。

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 並且隨便打個字。

liff-test

累爆

卡米哥

Written by

卡米哥

在追求真理的道路上

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade