# Developing a LIFF app (v1)

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

Note: The steps for adding a LIFF app to a channel and opening a LIFF app are the same as LIFF v2.

# 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 appears 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 v1 API reference.

# Opening a URL

The liff.openWindow() method 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 v1 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>

# 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 validity in the Social API v2.1 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 v2.1 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 v1 API reference.

Note

The access token is valid for 12 hours after being issued. When the user closes the app, the access token is revoked.

# 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 v1 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 other than the chat screen, you will not be able to send messages.

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 includes a bot LINE Official Account, the LINE Platform sends webhook events to the bot server. 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 v1 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 v1 API reference.