[LINE bot 好好玩 30 天玩轉 LINE API] 第 14 天:初探 LIFF

2020 11th 鐵人賽 LINE

本文同步刊載於 iT 邦幫忙第11屆鐵人賽:[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 網址

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

https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20190929/20117701ALslUZJkBE.png?w=640&ssl=1

按下 Create a new LIFF App

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

https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20190929/20117701OVlCStlr6j.png?w=640&ssl=1
  • Name: LIFF Sample
  • Size: Full
  • Endpoint URL: https://clarencetw.github.io/line-liff-starter
  • Option: OFF

填完之後如下

https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20190929/20117701QqSuyf9Z6d.png?w=640&ssl=1

如此我們得到了 LIFF URL

使用 LIFF Sample

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

https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20190929/20117701oho7sbcT9E.jpg?w=640&ssl=1

第一次開啟 LIFF 同意存取

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

開啟的介面如下:

https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20190929/20117701zulR4PHxGa.png?w=640&ssl=1
https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20190929/20117701edQx5lrMBy.png?w=640&ssl=1

第一次開啟 LIFF

開啟的頁面如下

https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20190929/20117701ecUOJVThkn.png?w=640&ssl=1

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

  • 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://i1.wp.com/ithelp.ithome.com.tw/upload/images/20190929/20117701eSJf5x6T78.jpg?w=640&ssl=1

取得 Access Token

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

https://i0.wp.com/ithelp.ithome.com.tw/upload/images/20190929/201177017oBvGIVBqX.png?w=640&ssl=1

取得 Profile

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

https://i2.wp.com/ithelp.ithome.com.tw/upload/images/20190929/201177010M7nIjsjvv.png?w=640&ssl=1

發送訊息

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

https://i1.wp.com/ithelp.ithome.com.tw/upload/images/20190929/201177019ygQ7LfUxR.png?w=640&ssl=1

結論

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