本文同步刊載於 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

按下 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 我們在下一篇講解 ~

工商時間

團隊系列文

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