The Best Practice Of LIFF

卡米哥
4 min readDec 13, 2019

--

大家好,我是卡米哥,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 上表現如何呢?

於是我做了一個表:

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

累爆

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--