# Developing a LIFF app

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. The LIFF SDK is written in UTF-8, so if your HTML source uses a character encoding different than UTF-8, make sure you also specify charset="utf-8".

        <script charset="utf-8" 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
Getting the friendship status between the user and the LINE Official Account
Sending messages to the current chat screen
Sending messages to a user's friend (share target picker)
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');
        });
}

Also, with liff.ready, you can get the Promise object that resolves when you run liff.init() for the first time after starting the LIFF app.

For more information, see the liff.init() and liff.ready sections 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 endpoint URL 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.

To open a PDF

In the HTML source of the web app, in the <a href=""> attribute, specify the path of the target PDF:

<a href="/path/to/your.pdf">Open a PDF</a>

Clicking this link opens the PDF in LINE's in-app browser or an external browser.

To make the PDF open in a new tab, add target="_blank":

<a href="/path/to/your.pdf" target="_blank">Open a PDF in another tab</a>

# 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.

# Getting the friendship status between the user and the LINE Official Account

Gets the friendship status between the user and the LINE Official Account that's linked to the LINE Login channel to which the LIFF app is added.

Learn more on how to link a LINE Official Account to a LINE Login channel.

liff.getFriendship().then(data => {
  if (data.friendFlag) {
    // something you want to do
  }
)

Learn more from liff.getFriendship() in the LIFF v2 API reference.

# Sending messages to the current chat screen

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.

Execute the liff.shareTargetPicker() method to display the target picker (screen for selecting a group or friend) and send the message created by the developer to the selected target. This message appears to your group or friends as if you had sent it.

The following code displays the target picker and sends "Hello, World!" as the user's message to the selected group or friends. If you want to confirm that the target picker can be used in the environment where the LIFF app is started, execute liff.isApiAvailable() first.

if (liff.isApiAvailable('shareTargetPicker')) {
  liff.shareTargetPicker([
    {
      type: "text",
      text: "Hello, World!"
    }
  ])
}

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

Note

To view the target picker, turn on the share target picker in the Console. For more information, see Using share target picker.
When using an external browser, call liff.login(), complete the LINE Login process (web login), then call liff.shareTargetPicker().

Target picker operating environment

Target picker is supported by LINE 10.3.0 or later for iOS and Android.
Before executing liff.shareTargetPicker(), you can confirm that the target picker is available in the environment where the LIFF app is started by executing liff.isApiAvailable().

# 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:

# Developing a LIFF app