LIFF v2, the latest Webview SDK lets you leverage LINE

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

> UIT Team1, Kyoto Developer Division > LIFF SDK /
LINE Login  Front-End Engineer Okamoto Takuya

Quick Questions

LINE Front-End Framework LIFF V2

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

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

Integrated With LINE Platform LINE  Login LIFF

To Use LINE Login

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

Use Cases  With LIFF V2 Features

With QR Feature Fukuoka Marathon 2019 App

Ƃ With Cross Browser LIFF Playground

With Sharing Feature (Incoming) Coming Soon / Jorudan

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

Live Coding

> 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

Prepare Beforehand Login With Your LINE Account

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

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

Set Login Redirect URL Set Your Website URL As Callback
URL

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

Start Working!

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

Result

Thank You

LIFF v2, the latest Webview SDK lets you levera...

LIFF v2, the latest Webview SDK lets you leverage LINE

LINE DevDay 2019

More Decks by LINE DevDay 2019

Other Decks in Technology

Featured

Transcript

2019 DevDay LIFF V2, the Latest Webview SDK Lets You

> UIT Team1, Kyoto Developer Division > LIFF SDK /

Quick Questions

LINE Front-End Framework LIFF V2

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

Advantages of LIFF v2 > Works if LINE is installed

Integrated With LINE Platform LINE  Login LIFF

To Use LINE Login

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

Use Cases  With LIFF V2 Features

With QR Feature Fukuoka Marathon 2019 App

Ƃ With Cross Browser LIFF Playground

With Sharing Feature (Incoming) Coming Soon / Jorudan

Subtitle 30pt / Arial / Normal In the Near Future

Live Coding

> User Name, User Profile Picture Show User Information Say

Prepare Beforehand Login With Your LINE Account

Prepare Beforehand See Also: LINE Developers Channel Login AppType Web

Create LIFF App LIFF ID = Last Part of LIFF

Set Login Redirect URL Set Your Website URL As Callback

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

Start Working!

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

Result

Thank You