本文同步刊載於 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
按下 Create a new LIFF App
開始建立 LIFF 拉!
填寫一下資料
- Name: LIFF Sample
- Size: Full
- Endpoint URL: https://clarencetw.github.io/line-liff-starter
- Option: OFF
填完之後如下
如此我們得到了 LIFF URL
使用 LIFF Sample
這時候就直接傳進我們的 LINE Bot 然後打開它!
第一次開啟 LIFF 同意存取
第一次開啟 LIFF 使用者需要同意授權才有辦法打開,因為這個地方我們的網頁是可以直接拿到使用的資料的,所以需要使用者同意才可以打開
開啟的介面如下:
第一次開啟 LIFF
開啟的頁面如下
上面的很多資料可以提供給網頁使用擁有的資料有
- 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
取得 Access Token
此 Token 與 LINE Login 的 Token 相同,後面章節有機會更清楚介紹 Access Token
取得 Profile
可以取得使用者 LINE 上面使用的名字,以及狀態
發送訊息
沒錯,這邊是可以發送訊息的,是一個幫使用者發送訊息的概念,所以可以製作成使用者說什麼話我們的 Bot 就帶出去,我們處理他的 Message
結論
在這邊可以用 LIFF 玩的東西很多,大家可以想想看怎麼玩比較好玩,詳細的 LINE SDK 我們在下一篇講解 ~
《AWS CDK 完全學習手冊:打造雲端基礎架構程式碼 IaC》
第 12 屆 iT 邦幫忙鐵人賽 DevOps 組冠的《用 CDK 定 義 AWS 架構》
第 11 屆 iT 邦幫忙鐵人賽《LINE bot 好好玩 30 天玩轉 LINE API》
一個熱愛分享的雲端工程師!