---
title: line liff 規範紀錄
tags: Line, liff
---

# line liff 規範紀錄

## liff 設定頁：
- `Bot link feature`:
**可透過此設定，在驗證時跳出是否加入官方帳號的好友。**
> On (Normal)：小提醒
> On (Aggressive)：單獨一頁提醒
> Off：不開啟
> #### 注意: 就算不加入好友，也可開啟 liff 網頁繼續執行。

- `Module mode`:
**是否開啟分享功能按鈕（在上方關閉鈕旁）**
> on: 不開啟
> off: 開啟

- `Method for converting additional information in the LIFF URL:`
**選擇LIFF URL的工作方式·**
> concatenate: 新方式
> replace: 舊方式
### 新LIFF URL
- 使用 LIFF SDK v2.3.0 或 更高版本

## 2 試用所有不可自定義的 `LIFF URL`。
### 2.1 在 LINE app 中打開通用連結的 LIFF URL
在這種情況下，“Destination URL” 將是 “endpoint URL” 加上 “路徑” 和 “Query param” ，然後加上 LIFF 的 URL fragment 的形式顯示。


> 新模式(concatenate) Destinatioin URL = Endpoint URL + LIFF URL fragment
> 傳統模式(replace) Destinatioin URL = Endpoint URL + LIFF URL fragment

### 2.2 在外部瀏覽器中打開 `LIFF URL`
在這種情況下，“Destination URL” 將是 “endpoint URL” 加上 “路徑” 和 “Query param” ，**但是新的 LIFF URL 和舊版本之間會有區別。**


> 新模式(concatenate)：Destinatioin URL = Endpoint URL
> 傳統模式(replace)：Destinatioin URL = Endpoint URL + &liff.state=

### 2.3 在 LINE 中打開 `LIFF URL（如 LINE Scheme）`
在這種情況下，機制與 2.1 完全相同。
**註記：LIFF URL 的 LINE scheme 模式僅適用於 Android、iOS 和 iPad 上的 LINE app。**


> 新模式(concatenate) Destinatioin URL = Endpoint URL + LIFF URL fragment
> 傳統模式(replace) Destinatioin URL = Endpoint URL + LIFF URL fragment

### 總結
當LIFF URL為固定且沒有帶任何的Path、Query Parameter時:
* **新模式(concatenate)** 與 **傳統模式(replace)** 沒有任何差異

* 在外部瀏覽器中打開 LIFF URL的情形下，
新模式(concatenate)的 Destinatioin URL = Endpoint URL。
傳統模式(replace)的 Destinatioin URL = Endpoint URL + **&liff.state=**

## 3 使用帶有 Path、Query Parameter 和 URL fragment 的 LIFF URL 測試。
### 3.1 在 LINE app 中打開通用連結的 LIFF URL
如果在通用連結上附加了 Path、 Query Parameter 或 URL fragment，將有兩種重新導向的步驟：
1. 首先先重新導向到到 Endpoint URL，接著通用連結後的 Path、Query Parameter 到 URL fragment 進行 URL 編碼，然後將編碼後的值設定在 liff.state 上，其形式包含原本 LIFF 的設定值。
2. 將重新導向到 Destination URL，而 liff.state 的值將會解碼並將該值附加到Endpoint URL 上。


> 新模式(concatenate) Destination URL = Endpoint URL + 通用連結的Path 及 Query parameter。
> 傳統模式(replace) Destination URL = Endpoint URL - Endpoint URL 中的所有 path 和 Query parameter + 通用連結的Path 及 Query parameter。此範例中，若您想帶 /liff2，則必須將通用連結指定為 https://liff.line.me/1653575653-8WwXMavK/liff2/path?param=9#hashtag

### 3.2 在外部瀏覽器中打開通用連結
該機制與 在 2.1 中的工作方式完全相同，**不同之處在於在第一次導向時的結尾沒有附加 LIFF 原本 URL fragment 的值。**


> 新模式(concatenate) Destinatioin URL = Endpoint URL + 通用連結的Path 及 Query parameter。
> 傳統模式(replace) Destinatioin URL = Endpoint URL - Endpoint URL 中的所有 path 和 Query parameter + 通用連結的Path 及 Query parameter。

### 3.3 在 LINE 應用中打開 LINE Scheme
如果在 LINE Scheme LIFF URL 上加了 Path、Query parameter 或 URL fragment，**在新舊模式中 Redirect 機制啟動將只有啟動一次**。接下來的傳遞過程中會將 Path、URL fragment 移除，並只能傳遞 Query param 到 endpoint URL 上。


> 新模式(concatenate) Destinatioin URL = Endpoint URL + 通用連結的Query parameter。
> 傳統模式(replace) Destinatioin URL = Endpoint URL + 通用連結的Query parameter。

### 總結
當LIFF URL帶有Path、Query Parameter時:
* #### 新模式(concatenate)
Destination URL = Endpoint URL + LIFF URL的Path 及 Query parameter。

* #### 傳統模式(replace)
Destination URL = Endpoint URL - Endpoint URL 中的所有 path 和 Query parameter + LIFF URL的Path 及 Query parameter。(Endpoint URL的path 和 Query parameter刪掉)

* 在LINE 應用中打開 LINE Scheme的情形下，新舊模式的Destinatioin URL = Endpoint URL + LIFF URL的Query parameter + LIFF URL fragment。(只留下LIFF URL的Query parameter)

## 4 將 Path、Query parameter 和 URL fragment 加到 LINE Scheme 的方法
### 4.1 處理附加到 Endpoint URL 的 Query param
### 4.2 liff.state 狀態
在使用了 3 部分的方法中，每當有 2 個重新導向的地方時，都會有一個名為 liff.state 的變數，該變數是處理附加到 Endpoint URL 上的 Query param，其值是 encode 來自 URL path、Query parameter 以及 URL fragment，藉由這個方法可以將我們帶到 Destination URL，讓我們看一個範例：


1. 從現在開始，URL fragment 禁止指定 Endpoint URL。
2. 在如下所示的 LIFF URL https://line.me/R/app/xxx-xxx 具有與 LINE Scheme line://app/xxx-xxx 有著相同的功能。

參考文件:
https://engineering.linecorp.com/zh-hant/blog/new-liff-url-infomation/
https://nijialin.com/2020/07/21/LIFF-concat-replace-mode-scenario/

---

# LIFF v2 API reference
**LIFF v2版本可以在LIFF browser以外的瀏覽器使用**

## liff.init()

const liffId = 'my-liff-id'
liff.init({ liffId })

- 註: 起手式，一定要先執行此function才能使用其它功能

### 應用

// Using a Promise object
liff
  .init({
    liffId: "123456-abcedfg" // Use own liffId
  })
  .then(() => {
    // Start to use liff's api
  })
  .catch((err) => {
    // Error happens during initialization
    console.log(err.code, err.message);
  });

// Using a callback
liff.init({ liffId: "123456-abcedfg" }, successCallback, errorCallback);

## liff.isInClient()

liff.isInClient()

- 可用來判斷是不是用LIFF browser開啟。
- true: Running in LIFF browser
- false: 其它瀏覽器

### 應用

if (liff.isInClient()) {
  ......
}

## liff.isLoggedIn()

liff.isLoggedIn()

- check使用者是否有登入line

### 應用

if (liff.isLoggedIn()) {
  ......
}

- 註: 使用者需先登入line，才能拿到使用者的個人資料

## liff.login()

liff.login(loginConfig)

- 使用者在LIFF browser以外的瀏覽器時可使用
- 註: 使用者開啟LIFF browser，line應為登入的狀態，所以無法在LIFF browser裡使用liff.login()

### 應用

if (!liff.isLoggedIn()) {
  liff.login({ redirectUri: "https://example.com/path" });
}

## liff.logout()

liff.logout()

- 登出line帳號
- 註: 基本上在LIFF browser以外的瀏覽器使用，在LIFF browser裡使用時，會因為自動登入所以失效

### 應用

if (liff.isLoggedIn()) {
  liff.logout();
}

## liff.getProfile()

liff.getProfile()

- 基本上這一步會在確認是否isLoggedIn後再使用

### 應用

liff.getProfile()
.then(profile => {
  const name = profile.displayName
})
.catch((err) => {
  console.log('error', err);
});

## liff.getFriendship()

liff.getFriendship()

- 用來檢查使用者是否沒加好友，或是封鎖。

### 應用

liff.getFriendship().then(data => {
  if (data.friendFlag) {
    // something you want to do
  }
)

- 註: line的版本過低，有可能會讓liff v2以上版本出錯，像是吃不到css，這時更新line的版本即可。

參考文件: https://developers.line.biz/en/reference/liff/#initialize-liff-app

## liff.shareTargetPicker()

liff.shareTargetPicker()

- 分享訊息API，可以偵測是否成功分享

liff.shareTargetPicker([
  {
    type: "text",
    text: "this is a test"
  }
])
  .then(
    alert("ShareTargetPicker was launched")
  ).catch(function(res) {
    alert("Failed to launch ShareTargetPicker")
  })

- 在 line developers後台記得勾選`shareTargetPicker`

參考文件:
- https://engineering.linecorp.com/zh-hant/blog/liff-share-target-picker/
- https://developers.line.biz/en/reference/liff/#share-target-picker

# Liff 問題紀錄
- 在某些android手機，liff會判斷測試工具`connector.js`為不安全，無法開啟網站