初次見面 LIFF of LINE

  1. 初次見面 LIFF of LINE
    1. 安裝
    2. 使用
    3. 設定 LINE
    4. 開發

初次見面 LIFF of LINE

這是什麼?

LINE Front-end Framework (LIFF) is a platform for web apps provided by LINE.
The web apps running on this platform are called LIFF apps.

用 LINE 的 瀏覽器打開。可以在前端執行 LINE 的功能。

安裝

參考 repo

npm

$ npm install @line/liff 

使用

process.env.LIFF_ID 指的是自己申請好的 LIFF_ID 要設定在 .env 檔上面

import liff from '@line/liff'

document.addEventListener("DOMContentLoaded", function() {
liff
.init({ liffId: process.env.LIFF_ID })
.then(() => {
console.log("Success! you can do something with LIFF API here.")
})
.catch((error) => {
console.log(error)
})
});

設定 LINE

LINE 的應用 (截圖以 MessageingAPI 為例) 上面出現一個 LIFF 的標籤


[color=#00b900]

要先設定 LINE Login 這個功能才會啟動。

在 LINE Login 裡會出現這個


[color=#00b900]

按下「ADD」填一填資料,就可以取得 LINE_ID


[color=#00b900]

開發

如果暫時還沒有佈署上去,可以暫時使用 ngrok 取得一個有 https 的網址當作開發用的臨時網址。

初始化成功,就可以來遊樂場參考要使用的功能

liff.isInClient()

判斷是不是在 LINE 裡的 LIFF browser 開啟的。這個 browser 和一般的 web view 不一樣。

liff.getContext()

userId 就是用來發給 Messageing API 功能的主動通知,識別碼

{
"type": "external",
"userId": "Ude7ca124379d3f9cde8aee01d5fefdce",
"liffId": "1656508316-k7jNojXm",
...
}

使用 LINE 登入時,可以注意一個特性

每個 LINE 帳號,在一個 provider 會有一個固定的 userID
如果是不同的 provider 就會有不同的 userID

而每個 provider 可以擁有不同的 Messageing API 服務,可以做成不同的聊天機器人,它們各自有不同的 Channel ID,透過不同的 Channel ID 就算使用者是相同的 userID 也可以在不同的服務發給指定的使用者。