iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 14
0
Software Development

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

[30 天教你如何玩弄 Line bot API] 第 14 天:LINE 的裡面 - LIFF

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

前言

今天來談談 LINE Front-end Framework (LIFF) 吧 ~

LINE Front-end Framework (LIFF)

通常我們叫它 LIFF 是一個 LINE 的前端 Framework,他只能在比較新的系統上面執行

  • iOS: iOS 8.0 以上或是 iOS 9.0 以上. iOS 8.x 使用 UIWebView. iOS 9.x 使用 WKWebView.
  • Android: 4.2 以上
  • LINE: Version 7.14 以上

LIFF 有三種大小 Compact. Tall. Full.

LIFF Sample

大家可以直接使用我的 Github https://clarencetw.github.io/line-liff-starter,或是使用官方的方法把它 Clone 到自己的機器跑起來 https://github.com/line/line-liff-starter

建立 LIFF 網址

注意:最新的 LIFF 需要建立 LINE Login 後由 LINE Login 新增 LIFF 無法再使用 Messaging API 創建

首先先到原本的 LINE Developers 裡面的 LIFF

https://ithelp.ithome.com.tw/upload/images/20190929/20117701ALslUZJkBE.png

按下 Create a new LIFF App

開始建立 LIFF 拉!
填寫一下資料

https://ithelp.ithome.com.tw/upload/images/20190929/20117701OVlCStlr6j.png

填完之後如下

https://ithelp.ithome.com.tw/upload/images/20190929/20117701QqSuyf9Z6d.png

如此我們得到了 LIFF URL

使用 LIFF Sample

這時候就直接傳進我們的 LINE Bot 然後打開它!

https://ithelp.ithome.com.tw/upload/images/20190929/20117701oho7sbcT9E.jpg

第一次開啟 LIFF 同意存取

第一次開啟 LIFF 使用者需要同意授權才有辦法打開,因為這個地方我們的網頁是可以直接拿到使用的資料的,所以需要使用者同意才可以打開

開啟的介面如下:

https://ithelp.ithome.com.tw/upload/images/20190929/20117701zulR4PHxGa.png

https://ithelp.ithome.com.tw/upload/images/20190929/20117701edQx5lrMBy.png

第一次開啟 LIFF

開啟的頁面如下

https://ithelp.ithome.com.tw/upload/images/20190929/20117701ecUOJVThkn.png

上面的很多資料可以提供給網頁使用擁有的資料有

  • language
  • context.viewType
  • context.userId
  • context.utouId
  • context.roomId
  • context.groupId

下提供以上變數可以使用的一些情境給大家參考

  • language: 可以提供給開發者製作多國語系的功能
  • viewType: 就是建立時指定的 Size
  • userId: 使用者 ID,與使用者跟 Bot 說話時的 ID 一樣,基本上可以用這個 ID 當帳號使用
  • utouId: 如果目前是 One-on-one chat 就會有此 ID
  • roomId: 如果目前是 room 就會有此 ID
  • groupId: 如果目前是 group 就會有此 ID

開啟網頁

我們可以讓我們的 LIFF 再開一個網頁範例如左上角的 Open Windows

https://ithelp.ithome.com.tw/upload/images/20190929/20117701eSJf5x6T78.jpg

取得 Access Token

此 Token 與 LINE Login 的 Token 相同,後面章節有機會更清楚介紹 Access Token

https://ithelp.ithome.com.tw/upload/images/20190929/201177017oBvGIVBqX.png

取得 Profile

可以取得使用者 LINE 上面使用的名字,以及狀態

https://ithelp.ithome.com.tw/upload/images/20190929/201177010M7nIjsjvv.png

發送訊息

沒錯,這邊是可以發送訊息的,是一個幫使用者發送訊息的概念,所以可以製作成使用者說什麼話我們的 Bot 就帶出去,我們處理他的 Message

https://ithelp.ithome.com.tw/upload/images/20190929/201177019ygQ7LfUxR.png

結論

在這邊可以用 LIFF 玩的東西很多,大家可以想想看怎麼玩比較好玩,詳細的 LINE SDK 我們在下一篇講解 ~


工商時間

團隊系列文

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


上一篇
[30 天教你如何玩弄 Line bot API] 第 13 天:LINE 的控制面板 Rich Menus - 使用 API Request 教你如何做換頁特效
下一篇
[30 天教你如何玩弄 Line bot API] 第 15 天:我把所有的 LIFF 都放在這裏了
系列文
LINE bot 好好玩 30 天玩轉 LINE API30

1 則留言

0
clayton1104
iT邦新手 5 級 ‧ 2020-07-22 17:47:02

LIFF好像出2.0版
現在不給開啟LIFF功能了

LIFF applications
Use a LINE Login channel
You can no longer add LIFF apps to a Messaging API channel. Use a LINE Login channel instead. For details, see this news article: Users can no longer add LIFF apps to Messaging API channels

This channel doesn't have any LIFF apps yet

https://developers.line.biz/en/news/2019/11/11/liff-cannot-be-used-with-messaging-api-channels/

Clarence iT邦新手 5 級 ‧ 2020-09-01 18:31:58 檢舉

是的,目前沒有辦法從 Messaging API 創建新的 LIFF 了
創建新的 LIFF 要從 LINE Login 創建

我要留言

立即登入留言