LINE Front-end Framework

Quickstart

Reference

LIFF v2 API reference

Resources

Release notes

Previous versions

Developing a LIFF app

Table of contents

Developing a LIFF app
Deploying the LIFF app on any server
Next steps

This page explains the process of developing a LIFF app.

Developing a LIFF app

A LIFF app is a web app based on HTML and JavaScript. Here, we'll explain processes specific to building LIFF apps.

Setting the title of the LIFF app
Integrating the LIFF SDK
Calling the LIFF API

Setting the title of the LIFF app

The title of the LIFF app will appear in the title bar of the LIFF app. Specify the name of the LIFF app in the <title> element of the HTML source of the web app.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>LIFF Starter</title>
        <link rel="stylesheet" href="style.css">

Integrating the LIFF SDK with the LIFF app

To use the functions of the LIFF SDK, specify the URL of the LIFF SDK (https://static.line-scdn.net/liff/edge/2.1/sdk.js) in the src attribute of the <script> element of the LIFF app's HTML source.

        <script src="https://static.line-scdn.net/liff/edge/2.1/sdk.js"></script>
        <script src="liff-starter.js"></script>
    </body>
</html>

Calling the LIFF API

You can do the following things after integrating the LIFF SDK.

Initializing the LIFF app
Getting the environment in which the LIFF app is running
Performing login with LINE Login
Opening a URL
Opening the QR code reader
Getting the screen type from which the LIFF app was launched
Getting the user's access token
Getting the user's profile
Sending messages on behalf of the user
Closing the LIFF app

Initializing the LIFF app

The liff.init() method enables you to call the other methods of the LIFF SDK from the LIFF app.

liffId needs a specified LIFF app ID, which you can get by adding the LIFF app to your channel. For more information, see Adding a LIFF app.

/**
* Initialize LIFF
* @param {string} myLiffId The LIFF ID of the selected element
*/
function initializeLiff(myLiffId) {
    liff
        .init({
            liffId: myLiffId
        })
        .then(() => {
            // start to use LIFF's api
            initializeApp();
        })
        .catch((err) => {
            document.getElementById("liffAppContent").classList.add('hidden');
            document.getElementById("liffInitErrorMessage").classList.remove('hidden');
        });
}

For more information, see liff.init() in the LIFF v2 API reference.

To use LINE Login in an external browser, call the liff.init() method twice as shown below.

Call the liff.init() method after loading the LIFF SDK.
Call the liff.login() method. Once the processing of the authentication page and the authorization screen is complete, you will be redirected to the LIFF app (redirectUri). Call the liff.init() method again.

If an error occurs during the processing of the liff.init() method, or if the user cancels authorization at the time of login, errorCallback will be executed.

Flow diagram

Getting the environment in which the LIFF app is running

Call the liff.isInClient() method and the liff.getOS() method to get the environment in which the LIFF app is running.

/**
* Display data generated by invoking LIFF methods
*/
function displayLiffData() {
    document.getElementById('browserLanguage').textContent = liff.getLanguage();
    document.getElementById('sdkVersion').textContent = liff.getVersion();
    document.getElementById('isInClient').textContent = liff.isInClient();
    document.getElementById('isLoggedIn').textContent = liff.isLoggedIn();
    document.getElementById('deviceOS').textContent = liff.getOS();
}

For more information, see liff.getOS() and liff.isInClient() in the LIFF v2 API reference.

Call the liff.login() method to perform the LINE Login process (web login) for web apps.

Note

You cannot use liff.login() in LINE's in-app browser.

// login call, only when external browser is used
document.getElementById('liffLoginButton').addEventListener('click', function() {
    if (!liff.isLoggedIn()) {
        // set `redirectUri` to redirect the user to a URL other than the front page of your LIFF app.
        liff.login();
    }
});

You can also call the liff.logout() method to log out.

// logout call only when external browse
document.getElementById('liffLogoutButton').addEventListener('click', function() {
    if (liff.isLoggedIn()) {
        liff.logout();
        window.location.reload();
    }
});

For more information, see liff.login() and liff.logout() in the LIFF v2 API reference.

Opening a URL

The liff.openWindow() method opens the specified URL in LINE's in-app browser or an external browser.

The following code opens https://line.me in an external browser.

// openWindow call
document.getElementById('openWindowButton').addEventListener('click', function() {
    liff.openWindow({
        url: 'https://line.me',
        external: true
    });
});

For more information, see liff.openWindow() in the LIFF API reference.

Opening the QR code reader

Call the liff.scanCode() method to start LINE's QR code reader, and get the string read by the user.

// scanCode call
document.getElementById('scanQrCodeButton').addEventListener('click', function() {
    if (!liff.isInClient()) {
        sendAlertIfNotInClient();
    } else {
        if (liff.scanCode) {
            liff.scanCode().then(result => {
                // e.g. result = { value: "Hello LIFF app!" }
                const stringifiedResult = JSON.stringify(result);
                document.getElementById('scanQrField').textContent = stringifiedResult;
                toggleQrCodeReader();
            }).catch(err => {
                document.getElementById('scanQrField').textContent = "scanCode failed!";
            });
        }
    }
});

For more information, see liff.scanCode() in the LIFF v2 API reference.

Not available on LINE for iOS 9.19.0 and later

Due to a technical limitation, liff.scanCode() will be undefined on LINE for iOS version 9.19.0 and later. Check the existence of the function as shown in the sample code before using it.

Note

You cannot use liff.scanCode() in an external browser.

Getting the screen type from which the LIFF app was launched

Execute the liff.getContext() method to get a value that uniquely identifies the screen (1-on-1 chat, group, or room) that the LIFF app is launched from.

const context = liff.getContext();
console.log(context);
// {"type": "utou", "utouId": "UU29e6eb36812f484fd275d41b5af4e760926c516d8c9faa35…b1e8de8fbb6ecb263ee8724e48118565e3368d39778fe648d", "userId": "U70e153189a29f1188b045366285346bc", "viewType": "full", "accessTokenHash": "ArIXhlwQMAZyW7SDHm7L2g"}

For more information, see liff.getContext() in the LIFF v2 API reference.

Getting the user's access token

The liff.getAccessToken() method gets the current user's access token. You need this access token to call the Social API from any server.

// get access token
document.getElementById('getAccessToken').addEventListener('click', function() {
    if (!liff.isLoggedIn() && !liff.isInClient()) {
        alert('To get an access token, you need to be logged in. Please tap the "login" button below and try again.');
    } else {
        const accessToken = liff.getAccessToken();
        document.getElementById('accessTokenField').textContent = accessToken;
        toggleAccessToken();
    }
});

For more information, see liff.getAccessToken() in the LIFF v2 API reference.

Access token validity

When the user closes the app, the access token is revoked.

Using access tokens

The method of using the access token acquired from the LIFF app is described below.

Send the access token acquired from the LIFF app to any server from the LIFF app.
After verifying the access token in any server, acquire the user information.

For more information, see:
- Transfer session details to back-end server in the LINE Login documentation
- Managing access tokens in the Social API v2.1 documentation
- Getting the user's profile in the Social API v2.1 documentation

Get user information with the LIFF app

You can get user information by using the LIFF app without the need for using other REST API's. To get user information with the LIFF app, use the liff.getDecodedIDToken() method.

Getting the user's profile

The liff.getDecodedIDToken() method gets the current user's email address and profile information.

liff.init(() => {
    const idToken = liff.getDecodedIDToken();
    console.log(idToken) // print decoded idToken object
});

For more information, see liff.getDecodedIDToken() in the LIFF v2 API reference.

Sending messages on behalf of the user

The liff.sendMessages() method sends messages on behalf of the user to the chat screen where the LIFF app is opened. You can send up to 5 message objects in a single request. If you open the LIFF app in any screen other than the chat screen, you will not be able to send messages.

The following code sends "Hello, World!" as the user's message to the chat screen where the LIFF app is displayed.

// sendMessages call
document.getElementById('sendMessageButton').addEventListener('click', function() {
    if (!liff.isInClient()) {
        sendAlertIfNotInClient();
    } else {
        liff.sendMessages([{
            'type': 'text',
            'text': "You've successfully sent a message! Hooray!"
        }]).then(function() {
            window.alert('Message sent');
        }).catch(function(error) {
            window.alert('Error sending message: ' + error);
        });
    }
});

For more information, see liff.sendMessages() in the LIFF v2 API reference.

Note

You cannot use liff.sendMessages() in an external browser.

Closing the LIFF app

The liff.closeWindow() method closes the opened LIFF app.

// closeWindow call
document.getElementById('closeWindowButton').addEventListener('click', function() {
    if (!liff.isInClient()) {
        sendAlertIfNotInClient();
    } else {
        liff.closeWindow();
    }
});

For more information, see liff.closeWindow() in the LIFF v2 API reference.

Note

You cannot use liff.closeWindow() in an external browser.

Deploying the LIFF app on any server

After developing the LIFF app, deploy it on any server.

Next steps

After deploying the LIFF app on any server, do these things:

{{ $t("form.question.helpful") }}

{{ $t("form.answer.yes") }}
{{ $t("form.answer.somehow") }}
{{ $t("form.answer.no") }}

{{ $t("form.question.detail") }}

{{ option.description }}

{{ $t("form.question.improve") }}

Developing a LIFF app

Developing a LIFF app

Setting the title of the LIFF app

Integrating the LIFF SDK with the LIFF app

Calling the LIFF API

Initializing the LIFF app

To use LINE Login in an external browser

Getting the environment in which the LIFF app is running

Performing login with LINE Login

Opening a URL

Opening the QR code reader

Getting the screen type from which the LIFF app was launched

Getting the user's access token

Using access tokens

Getting the user's profile

Sending messages on behalf of the user

Closing the LIFF app

Deploying the LIFF app on any server

Next steps