Deep Dive into LIFF v2

1. Deep Dive into LIFF v2 Jirawat Karanwittayakarn Tech Evangelist, LINE Thailand
2. 2 LIFF LINE Front-End Framework
3. Multiple View Types Compact Full Tall
4. Get Profile • userId • displayName • pictureUrl • statusMessage
5. Send Messages • Text • Sticker • Image • Video • Flex Message • Audio • Location • Template Messages
6. Does it support in external browser?
7. Paint point in LIFF v1
8. What!
9. Say hello to LIFF v2 The Next Generation of LINE Front-End Framework
10. External Browser in LIFF v2
11. Modern Browser Supported
12. LINE Login v2.1 Integration
13. Email https://developers.line.biz/console/
14. Email liff.getDecodedIDToken().email
15. Bot Link Normal Aggressive
16. Enabling Bot Link LINE Login Tab LIFF Tab https://developers.line.biz/console/
17. Get Friendship liff.getFriendship().then(data => { if (data.friendFlag) { // Do something } })
18. Universal Link line://app/LIFF-ID https://liff.line.me/LIFF-ID
19. 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
20. 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!
21. Share Target Picker • Share message to friends or groups • Image, Video and Flex Message are available • This API will coming soon
22. ♥ LIFF v2
23. How to develop LIFF v2
24. 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
25. Create a Login Channel https://developers.line.biz/console/
26. 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
27. Create a LIFF app https://developers.line.biz/console/
28. 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
29. Initialize LIFF with Login <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> <script> liff.init({ liffId: YOUR-LIFF-ID }).then(() => { if (liff.isLoggedIn()) { liff.getProfile() } else { liff.login() } }) </script> 1 2
30. LIFF v2 Starter https://github.com/line/line-liff-v2-starter
31. 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)
32. 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
33. Publishing https:/developers.line.biz/console/
34. How to debug it?
35. vConsole A lightweight front-end developer tool for mobile web page. https://github.com/Tencent/vConsole
36. 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()
37. One more thing...
38. LINE MINIAPP Publishing platform for apps developed by LIFF
39. Better Discoverable • Listing in Services tab • Searchable in LINE Search Shareable to friends or groups • Deeplink sharing • Flex Message sharing Feature Highlight
40. Pilot Launch with LINE ScaleUp
41. Thank You! @Jirawatee Tech Evangelist, LINE Thailand