Deep Dive into LIFF v2 Jirawat Karanwittayakarn Tech Evangelist, LINE Thailand 

2 LIFF LINE Front-End Framework 

Multiple View Types Compact Full Tall 

Get Profile ● userId ● displayName ● pictureUrl ● statusMessage 

Send Messages ● Text ● Sticker ● Image ● Video ● Flex Message ● Audio ● Location ● Template Messages 

Does it support in external browser? 

Paint point in LIFF v1 

What! 

Say hello to LIFF v2 The Next Generation of LINE Front-End Framework 

External Browser in LIFF v2 

Modern Browser Supported 

LINE Login v2.1 Integration 

Email https://developers.line.biz/console/ 

Email liff.getDecodedIDToken().email 

Bot Link Normal Aggressive 

Enabling Bot Link LINE Login Tab LIFF Tab https://developers.line.biz/console/ 

Get Friendship liff.getFriendship().then(data => { if (data.friendFlag) { // Do something } }) 

Universal Link line://app/LIFF-ID https://liff.line.me/LIFF-ID 

Path and Query Parameter https://developers.line.biz liff://app/1234567890-XXXXXXXX https://liff.line.me/1234567890-XXXXXXXX/console/?param=value https://developers.line.biz/console/?param=value 

QR Code Reader Platform Version iOS On version 9.19.0 and later, liff.scanCode() is temporarily unavailable. Android Not affected for now * liff.scanCode() in Android supports any kind of text result by Today! 

Share Target Picker ● Share message to friends or groups ● Image, Video and Flex Message are available ● This API will coming soon 

♥ LIFF v2 

How to develop LIFF v2 

Steps to develop LIFF v2 1. Create Provider and Login Channel 2. Create a LIFF app 3. Develop a Website 4. Deploy 5. Update Endpoint URL and Publish 

Create a Login Channel https://developers.line.biz/console/ 

Steps to develop LIFF v2 1. Create Provider and Login Channel 2. Create a LIFF app 3. Develop a Website 4. Deploy 5. Update Endpoint URL and Publish 

Create a LIFF app https://developers.line.biz/console/ 

Steps to develop LIFF v2 1. Create Provider and Login Channel 2. Create a LIFF app 3. Develop a Website 4. Deploy 5. Update Endpoint URL and Publish 

Initialize LIFF with Login liff.init({ liffId: YOUR-LIFF-ID }).then(() => { if (liff.isLoggedIn()) { liff.getProfile() } else { liff.login() } }) 1 2 

LIFF v2 Starter https://github.com/line/line-liff-v2-starter 

Steps to develop LIFF v2 1. Create Provider and Login Channel 2. Create a LIFF app 3. Develop a Website 4. Deploy 5. Update Endpoint URL and Publish (HTTPS is required) 

Steps to develop LIFF v2 1. Create Provider and Login Channel 2. Create a LIFF app 3. Develop a Website 4. Deploy 5. Update Endpoint URL and Publish 

Publishing https:/developers.line.biz/console/ 

How to debug it? 

vConsole A lightweight front-end developer tool for mobile web page. https://github.com/Tencent/vConsole 

LIFF v2 Cheat Sheet liff.init() SETUP & INIT COMMON APIs liff.getOS() liff.getLanguage() liff.getVersion() liff.isInClient() AUTH APIs liff.isLoggedIn() liff.login() liff.logout() liff.getAccessToken() liff.getDecodedIDToken() liff.getContext() HTTP APIs liff.getProfile() liff.sendMessages() liff.getFriendship() CLIENT APIs liff.openWindow() liff.closeWindow() liff.scanCode() PERMANENT LINK liff.permanentLink.createUrl() liff.permanentLink.setExtraQueryParam() 

One more thing... 

LINE MINIAPP Publishing platform for apps developed by LIFF 

Better Discoverable ● Listing in Services tab ● Searchable in LINE Search Shareable to friends or groups ● Deeplink sharing ● Flex Message sharing Feature Highlight 

Pilot Launch with LINE ScaleUp 

Thank You! @Jirawatee Tech Evangelist, LINE Thailand