- Overview
- Creating a channel
- Trying the LIFF starter app
- Developing a LIFF app
- Adding a LIFF app to a channel
- Opening a LIFF app
- LINE Developers
- Document top
- LINE Front-end Framework
- Developing a LIFF app
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
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
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 theliff.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.
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.
Performing login with LINE Login
Call the liff.login()
method to perform the LINE Login process (web login) for web apps.
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 {
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.
Due to a technical limitation, liff.scanCode()
is temporarily suspended on LINE for iOS version 9.19.0 and later.
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.
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
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.
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.
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: