LINE Front-end Framework
Quickstart
Reference
Resources

Developing a LIFF app

Table of contents

This topic explains the LIFF-specific tasks required to deploy a web app as a LIFF app.

Setting the title of the LIFF app

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

<title>My LIFF app</title>

Integrating the LIFF SDK

The LIFF SDK provides the following features.

  • Initialization of the LIFF app.
  • Interface with LINE. With the client API incorporated in the SDK, you can open any URLs with the in-app browser of LINE or with an external browser and close the LIFF app.

For more information, see Calling the LIFF API.

Specify the URL of the LIFF SDK, https://d.line-scdn.net/liff/1.0/sdk.js in the <script> element.

<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>

You don't need to add a Promise polyfill to your app manually. The LIFF SDK automatically adds the core-js Promise polyfill to an environment that doesn't support Promise.

Calling the LIFF API

With the LIFF app, you can perform the following operations via the LIFF SDK.

Initializing the LIFF app

The liff.init() method gets the information necessary to make various API calls with the LIFF app.

liff.init(
  data => {
    // Now you can call LIFF API
    const userId = data.context.userId;
  },
  err => {
    // LIFF initialization failed
  }
);

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

Opening a URL

The liff.openWindow() opens the specified URL in the in-app browser of LINE or external browser.

The following code opens https://example.com in an external browser.

liff.openWindow({
  url:'https://example.com',
  external:true
});

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

Getting the user's access token

The liff.getAccessToken() method gets the current user's access token.

const accessToken = liff.getAccessToken();

Use the access token to interact with the Social API. First, make the token available to the LIFF app server: send an HTTP POST request to the server with the access token in the header. Then, send any of the following requests:

  • GET https://api.line.me/oauth2/v2.1/verify: Returns the channel ID for the access token. You can verify that a valid LIFF app sent the access token by checking the channel ID. For more information, see Verify access token in the Social API reference.

  • GET https://api.line.me/v2/profile: Returns the user ID, display name, profile image, and status message. For more information, see Get user profile in the Social API reference. To retrieve it from within the LIFF app, call liff.getProfile() in the LIFF SDK.

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

Getting the user's profile

The liff.getProfile() method gets the current user's profile.

liff.getProfile()
.then(profile => {
  const name = profile.displayName
})
.catch((err) => {
  console.log('error', err);
});

For more information, see liff.getProfile() in the LIFF 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.

From the LIFF app, you can send the following types of Messaging API messages:

For more information about message types, see Message objects in the Messaging API reference.

When messages are sent to a chat that a bot is in, the LINE Platform sends webhook events to the bot channel. When image, video, and audio messages are sent using the liff.sendMessages() method, resulting webhook events contain the contentProvider.type property whose value is external. For more information, see Message event in the Messaging API reference.

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

liff.sendMessages([
  {
    type:'text',
    text:'Hello, World!'
  }
])
.then(() => {
  console.log('message sent');
})
.catch((err) => {
  console.log('error', err);
});

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

Closing the LIFF app

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

liff.closeWindow();

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

Next steps

You have now seen how to perform the LIFF-specific tasks required to deploy a web app as a LIFF app. For the procedure of adding the web app to LIFF and make the app available within LINE, see the following topic.