iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 15
1
Software Development

LINE bot 好好玩 30 天玩轉 LINE API系列 第 15

[30 天教你如何玩弄 Line bot API] 第 15 天:我把所有的 LIFF 都放在這裏了

本文同步刊載於 Clarence 部落格:[LINE bot 好好玩 30 天玩轉 LINE API] 第 15 天:LIFF 解析大全

前言

做了昨天的範例,相信大家應該很期待今天的講解,今天就來談談 LIFF 的 SDK 細節吧 ~
一起來看看這個 Sample 是怎麼做出來的吧 ~
昨天的 JS 可以直接看這個 Github 連結

Init LIFF

基本上大多數的 SDK 都需要做一個 Init 的動作,會把一些後面程式要用的東西做一些 Init,LIFF 也不例外,Init 的方法

liff.init(function (data) {
    initializeApp(data);
});

開啟 URL

此方法讓使用者可以在 LINE 裡面打開 URL

liff.openWindow({
    url: 'https://line.me'
    external: true
});

默認情況 external 是 false,就是讓這個 URL 用 LINE App 把它打開,如果希望打開它的是外部瀏覽器可以設定成 true

取得使用者 Token

要取得使用者的 Token 就使用 getAccessToken 他可以共用於 Social API

const accessToken = liff.getAccessToken();

驗證使用者

要驗證這個 requset 是從自己的 Line Bot 發的可以使用此 API,使用 Channel ID 做驗證

GET https://api.line.me/oauth2/v2.1/verify

詳細的 API 使用可以查閱

取得使用者 Profile

取得使用者 Profile 的方法可以用 access token 帶入此 API 取得資訊

GET https://api.line.me/v2/profile

詳細的 API 使用可以查閱

取得使用者 Profile

可能有人會覺得奇怪上面不是剛講過取得使用者 Profile 這邊怎麼又講一次,我來與大家娓娓道來,剛剛取得使用者 Profile 的方法是 API 的方法而 LINE 在這邊提供了兩種方法讓我們取得使用者的 Profile 一種是上面說到的 API,另一種是用 LIFF API 使用的方法如下,就看需求哪一個方法比較適合自己使用。

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

詳細的 API 使用可以查閱

帶發 Message

昨天提到 LIFF 有方法可以用使用的的身份發訊息,大家可以用這個方法做一點不一樣的動作,例如使用者在我們的 LIFF App 上面上傳圖片,讓使用者在網頁對圖片做一點處理後讓使用者發出這張處理過的訊息,如果是使用者跟機器人單獨的視窗可能沒什麼好玩的,但如果今天的視窗是群組呢?是不是就可以做出滿多好玩的事情了?幫大家開個頭,還可以盡情的想像好玩的功能 ~

liff.sendMessages([{
    type: 'text',
    text: "You've successfully sent a message! Hooray!"
}]).then(function () {
    window.alert("Message sent");
}).catch(function (error) {
    window.alert("Error sending message: " + error);
});

發送訊息的限制與前面的 API 都依樣,只能發送 5 則訊息

關閉 LIFF

純粹就是幫使用者關閉視窗 XD

liff.closeWindow();

結論

鐵人賽也過一半了,LINE Message 會用到的方法也差不多都介紹完了,下一篇來講個爬蟲好了,來做一個小小的 Project 把前面學到的東西做一點整理,做出一個真的可以用的 LINE Bot 吧 ~


工商時間

團隊系列文

CSScoke - 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎
King Tzeng - IoT沒那麼難!新手用JavaScript入門做自己的玩具~
Hina Hina - 陣列大亂鬥
阿斬 - Python 程式交易 30 天新手入門
塔塔默 - 用Python開發的網頁不能放到Github上?Lektor說可以!!
Vita Ora - 好 Js 不學嗎 !? JavaScript 入門中的入門。


上一篇
[30 天教你如何玩弄 Line bot API] 第 14 天:LINE 的裡面 - LIFF
下一篇
[30 天教你如何玩弄 Line bot API] 第 16 天:我把所有的 LIFF 都放在這裏了 (續)
系列文
LINE bot 好好玩 30 天玩轉 LINE API30
0
jackithome
iT邦新手 5 級 ‧ 2020-01-02 11:39:18

老師您好,關於初始化這裡

liff.init(function (data) {
    initializeApp(data);
});

一直取不到值,有新建Line Liff,並且是使用Line開啟Liff。
請問我是否遺漏加入?
還是只要使用Liff開啟,會自動定義liff物件?
還請老師解惑,謝謝

Clarence iT邦新手 5 級 ‧ 2020-01-05 10:03:32 檢舉

您好 ~
以下有幾點可以注意一下:

  1. 我目前這個範例是使用 LIFF SDK 1.0,所以只有在使用 LIFF 開啟的時候可以使用它
  2. 目前這個網頁需要使用 LIFF 專用的網址開啟 (LIFF URL
    ),他的網址長得像是 line://app/1653000000-********
  3. 需要注意它需要在你的 LINE Bot 上面使用它

以上幾點先注意一下,如果還有問題可能需要再敘述清楚一點你的 Debug 過程

0
eric19740521
iT邦新手 4 級 ‧ 2020-01-06 14:41:19

請教一下
liff.getProfile()
這個函數是否??通過LINE SDK,跟line服務器要資料

如果我要取得使用者相關 資訊,
就必須寫一個等待讀取的函數,

工具使用vue

Clarence iT邦新手 5 級 ‧ 2020-01-06 15:20:10 檢舉

先回答第一個問題:liff.getProfile() 是會用使用者的權限透過 SDK 跟 Line API Server 取得資料沒錯

第二個問題基本上是的,等待它回傳資料給妳就 OK 了!

0
pewdiepie
iT邦研究生 2 級 ‧ 2020-12-28 12:16:18

目前使用 2.6.0
出現了一個問題
假設 A與B頁都有 liff
當A因為某些事件需要 location.href 到 B 頁時
我不是透過他的 liff 網址,我是直接走我的域名轉過去B

location.href = '/abc/?GroupID=xxx'

此時他到了B頁後(B頁有 line init)所以會出現 liff.state 後再轉一次到我設定 B頁的 endpoint URL (https://xxx.xxx.com/abc/)
在 liff.state 過後他會變成這樣的網址

https://liff.line.me/1655383835-19823PAKDD?code=Bxe3P7LwDK3rFknZb4Wh&liffClientId=1655383835&state=6At08HLBp1CP

然後最後變成

https://xxx.xxx.com/abc/?code=Bxe3P7LwDK3rFknZb4Wh&liffClientId=1655383835&state=6At08HLBp1CP

然後就停止了
?我其實不太懂我是哪裡出錯了
我最後並沒有取得到 GroupID 因為網址並不是我想像的那樣?

https://xxx.xxx.com/abc/?GroupID=xxx
Clarence iT邦新手 5 級 ‧ 2020-12-28 14:39:41 檢舉

我記得 liff.state 是可以帶參數進去的,是不是可以直接試試看在 liff.state 帶帶看?

pewdiepie iT邦研究生 2 級 ‧ 2020-12-28 14:48:08 檢舉

我有發問
https://ithelp.ithome.com.tw/questions/10201635

liff.state 帶參數是什麼意思?

Clarence iT邦新手 5 級 ‧ 2021-01-05 17:09:05 檢舉

不然先看這個好了你的

location.href = '/abc/?GroupID=xxx'

是什麼意思你有一個 API 叫 /abc 然後你會把他帶入 http://sample.com/def 的意思嗎?
那這樣你有沒有注意要把 query 一起帶出去?

因為我記得新版的 liff.state 會幫你把 query 帶出來讓你可以解析

我要留言

立即登入留言