Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LIFF v2, the latest Webview SDK lets you leverage LINE

LIFF v2, the latest Webview SDK lets you leverage LINE

Takuya Okamoto
LINE Kyoto Developer Division, UIT Team Frontend Engineer

LINE DevDay 2019

November 21, 2019

More Decks by LINE DevDay 2019

Other Decks in Technology


  1. 2019 DevDay LIFF V2, the Latest Webview SDK Lets You

    Leverage LINE > Takuya Okamoto > LINE Kyoto Developer Division, UIT Team Frontend Engineer
  2. > UIT Team1, Kyoto Developer Division > LIFF SDK /

    LINE Login
 Front-End Engineer Okamoto Takuya
  3. Quick Questions

  4. LINE Front-End Framework LIFF V2

  5. LIFF Is Available on LINE Developers Search Keyword: “LIFF”

  6. Advantages of LIFF v2 > Works if LINE is installed

    > Deeplink automatically handles various user environments No App Installation Required Integrated with LINE platform > Profile API, Messaging API > OpenID Connect, Bot Link > New APIs (liff.scanCode, liff.shareTargetPicker, etc) Easy Development > Web application (HTML, CSS, JavaScript) > Build applications including serverless > Can be developed in the same way as a general web application In comparison with native application
  7. Integrated With LINE Platform LINE
 Login LIFF

  8. To Use LINE Login

  9. Login With LIFF liff.init({ liffId: myLiffId }) .then(() => {

    if (liff.isLoggedIn()) { liff.getProfile() } else{ liff.login() } })
  10. Use Cases
 With LIFF V2 Features

  11. With QR Feature Fukuoka Marathon 2019 App

  12. Ƃ With Cross Browser LIFF Playground

  13. With Sharing Feature (Incoming) Coming Soon / Jorudan

  14. Subtitle 30pt / Arial / Normal In the Near Future

    Provide type definition files And more features… Release NPM package
  15. Live Coding

  16. > User Name, User Profile Picture Show User Information Say

    Hello on Chatroom
 > Only Supported on LIFF On GitHub Pages
 > https://manyhotcakes.github.io/LIFF_LIVECODING_2019/ Target
  17. Prepare Beforehand Login With Your LINE Account

  18. Prepare Beforehand See Also: LINE Developers Channel Login AppType Web

    URL Your Page
 Scope openId, Profile, Chat_Message.Write URL Your Page Create
 Channel Create
 LIFF App Set Login
 Redirect URL Create
  19. Create LIFF App LIFF ID = Last Part of LIFF

    URL = 1653399672-jWXpkKdz Your Website’s URL Scope
  20. Set Login Redirect URL Set Your Website URL As Callback

  21. How To Install LIFF SDK <head> <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script> </head>

  22. Start Working!

  23. How to Debug on LINE > line://app/1653399672-jWXpkKdz
 OR https://liff.line.me/1653399672-jWXpkKdz Put

    Your LIFF URL on Some Chat Room and Open It
  24. Result

  25. Thank You