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
https://linedevday.linecorp.com/jp/2019/sessions/S2-6

LINE DevDay 2019

November 21, 2019
Tweet

More Decks by LINE DevDay 2019

Other Decks in Technology

Transcript

  1. 2019 DevDay
    LIFF V2, the Latest Webview SDK
    Lets You Leverage LINE
    > Takuya Okamoto
    > LINE Kyoto Developer Division, UIT Team Frontend
    Engineer

    View Slide

  2. > UIT Team1, Kyoto Developer Division
    > LIFF SDK / LINE Login

    Front-End Engineer
    Okamoto Takuya

    View Slide

  3. Quick Questions

    View Slide

  4. LINE Front-End Framework
    LIFF V2

    View Slide

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

    View Slide

  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

    View Slide

  7. Integrated With LINE Platform
    LINE

    Login
    LIFF

    View Slide

  8. To Use LINE Login

    View Slide

  9. Login With LIFF
    liff.init({ liffId: myLiffId })
    .then(() => {
    if (liff.isLoggedIn()) {
    liff.getProfile()
    } else{
    liff.login()
    }
    })

    View Slide

  10. Use Cases

    With LIFF V2 Features

    View Slide

  11. With QR Feature
    Fukuoka Marathon 2019 App

    View Slide

  12. Ƃ
    With Cross Browser
    LIFF Playground

    View Slide

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

    View Slide

  14. Subtitle 30pt / Arial / Normal
    In the Near Future
    Provide type definition files
    And more features…
    Release NPM package

    View Slide

  15. Live Coding

    View Slide

  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

    View Slide

  17. Prepare Beforehand
    Login With Your LINE Account

    View Slide

  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

    Provider

    View Slide

  19. Create LIFF App
    LIFF ID
    = Last Part of LIFF URL
    = 1653399672-jWXpkKdz
    Your Website’s URL
    Scope

    View Slide

  20. Set Login Redirect URL
    Set Your Website URL
    As Callback URL

    View Slide

  21. How To Install LIFF SDK



    View Slide

  22. Start Working!

    View Slide

  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

    View Slide

  24. Result

    View Slide

  25. Thank You

    View Slide