# 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 影響力,將服務延伸至現實世界觸手可及的第三方硬體上。