---
# System prepended metadata

title: LINE LIFF & LINE LOGIN 應用實作

---

# LINE LIFF & LINE LOGIN 應用



### What is LINE LIFF ?
LIFF ( LINE Front-end Framework ) 是是 LINE 官方提供的一個 Web App。 以 JavaScript 取得 User 在該 Provider 及 Channel 中可以用來唯一識別的 UserID 、公開的個人資料(ex:暱稱、大頭照)以及代為傳送訊息至 Chat Bot 的權限。

因此我們便可以使用 UserID 與 Chat Bot 使用 Line Login 或 Account Link 的網站進行用戶資料的串接。

讓 LIFF 網頁去增添LINE 聊天視的功能，不受限於LINE 原本所提供的聊天視窗功能，讓使用者透過 LIFF 開啟網頁，在不用離開官方帳號聊天視窗去使用延伸功能，來提升官方帳號服務的彈性與使用者體驗。

##
### Demo  without login
![image](https://hackmd.io/_uploads/ByqiAlwU6.png)


![image](https://hackmd.io/_uploads/rkY5AgPL6.png)



## After LINE Login
https://liffv2-2021.herokuapp.com/

![image](https://hackmd.io/_uploads/ry3B0xw8p.png)



### Local 端環境條件與佈署
* Git
* Node.js
* 實作範本from github : line-liff-v2-starter

1. App Deploy to Heroku 
1. Create an 「LINE Channel 」
1. 

### LINE Developers
1. LINE Developers 　建立好的 Providers，「Create a new channel」，選擇「LINE Login」。
1. 在 channel 增加「 LIFF」服務。


![image](https://hackmd.io/_uploads/B1MF6lv8p.png)

### 圖文選單設定
![image](https://hackmd.io/_uploads/BJryJbvLT.png)


### Application
* LIFF場景應用 1 — 刮刮樂抽獎
* LIFF場景應用 2 — 表單填寫
* LIFF場景應用 3 — 一對一客服
* LIFF場景應用 4 — 多元化的優惠券
* LIFF場景應用 5 — 團體投票 

### Summary
1. 由於許多 LINE 內建的功能有限，因此可以透過LIFF使用網頁技術補足LINE 內建所缺乏的功能，延伸出具備彈性、更生動且更完整的應用模式。
1. LIFF可以讓使用者直接在 Chat Bot 中直接瀏覽/關閉網頁。此功能可以降低 User 的注意力容易分散，操作完網頁可能會忘記回到 LINE 進行後續動作，使用此功能所開發的衍生服務，可以增加黏著度的同時並維持體驗的一致性。
1. 在特定高互動頻率的場合，使用 LIFF 取代可以有效地減少推播費用。
1. 除此之外， LIFF 可以使用Line Things 技術，使用藍牙結合各式 IOT 設備，進一步的提高 Chat Bot 影響力，將服務延伸至現實世界觸手可及的第三方硬體上。
