[JAVA] Run LIFF with Spring Boot


It seems that there is no way to run LIFF on a Java web application, so I tried it.

When using line / line-bot-sdk-java, the bot side is hosted on the server with Spring Boot etc. so that it can be webhooked. It should be used in the state that it is done, so why not make a screen for LIFF in it?

So, I tried to make a screen for LIFF application with Thymeleaf on Spring Boot.


It is assumed that line / line-bot-sdk-java is already running in Spring Boot etc. The URL is published at ngrok.

(Promotion: Published on Java User Group Hokkaido Hands-on Material, including how to proceed to the premise)

  1. Add Thymeleaf to the library
  2. Display the Thymeleaf web page with Spring Boot
  3. View LIFF sample

Follow the procedure in.

1. Add Thymeleaf to the library

Add the description of Thymeleaf in <properties> ~ </ properties> of pom.xml of the project file (root folder).


Add the description of Thymeleaf in <dependencies> ~ </ dependencies> of pom.xml of the project file (root folder). (Around the bottom of spring-boot-starter-web)


Add Thymeleaf settings to the end of application.properties in other sources (src / main / resources)

## thymeleaf

2. Display the Thymeleaf web page with Spring Boot

File creation

Create liff.html in the templates folder of other sources (src / main / resources)
(Create it if there is no folder)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <meta charset="UTF-8" />
  <title>Hello Thymeleaf</title>

Create a com.example.linebot.web package in the source package (src / main / java) and create the LIFFController class in it

package com.example.linebot.web;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

public class LIFFController {

  public String hello(Model model) {
    // [[${test}]]Part of Hello...Rewrite with liff.Display html
    model.addAttribute("test", "Hello Tymeleaf!");
    return "liff";


Operation check of Thymeleaf

  1. Stop and restart LineBotApplication
  2. Access [http: // localhost: m8080 / liff](http: // localhost: 8080 / liff)
  3. Make sure that the following is displayed in the browser
    ![Liff_P1_01.jpg](https://qiita-image-store.s3.amazonaws.com/0/8064/acc5dd42-1f30- 8d3d-8114-78d21fde9d3e.jpeg)
    (The [[$ {test}]] part of liff.html is rewritten with the Model information set by LIFFController)

3. View LIFF sample

File creation

Make the sample code of line / line-liff-starter work (with minor changes).

Copy liff-starter.js and style.css from the above site and duplicate them in the static folder of other sources (src / main / resources)
(create one if it doesn't exist)

Rewrite templates / liff.html in other sources (src / main / resources) based on the contents of index.html on the above site.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- The html based on https://github.com/line/line-liff-starter/blob/master/index.html -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LIFF Starter</title>
  <link rel="stylesheet" href="style.css">



<div class="buttongroup">
  <div class="buttonrow">
    <button id="openwindowbutton">Open Window</button>
    <button id="closewindowbutton">Close Window</button>
  <div class="buttonrow">
    <button id="getprofilebutton">Get Profile</button>
    <button id="sendmessagebutton">Send Message</button>

<div id="profileinfo">
  <a href="#" onclick="toggleProfileData()">Close Profile</a>
  <div id="profilepicturediv">
  <table border="1">
      <td id="useridprofilefield"></td>
      <td id="displaynamefield"></td>
      <td id="statusmessagefield"></td>

<div id="liffdata">
  <h2>LIFF Data</h2>
  <table border="1">
      <td id="languagefield"></td>
      <td id="viewtypefield"></td>
      <td id="useridfield"></td>
      <td id="utouidfield"></td>
      <td id="roomidfield"></td>
      <td id="groupidfield"></td>

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

Add as a LIFF app

To add the LIFF app, execute the command below from the terminal.

For Windows, install curl or make HTTP request with equivalent parameters (ARC Etc.).
Also, line / line-bot-sdk-java is for LIFF / rich menu registration that runs on Java. A command line tool (line-bot-cli) is also available.

When executing the command, the following parts need to be edited individually.

--Paste the Bot access token (long term) value into xxxxxx ... of " Authorization: Bearer xxxxxx ... " without line breaks (so the command will be very long) --xxx.ngrok.io in "https://xxx.ngrok.io/liff" should be the URL obtained by ngrok. --There are three types of Type, compact, tall, and full, which determine the height of the LIFF app window. --ʻUrl` specifies the URL of https

curl -XPOST \
-H "Authorization: Bearer xxxxxx..." \
-H "Content-Type: application/json" \
-d '{
    "view": {
        "type": "tall",
        "url": "https://xxx.ngrok.io/liff"
}' \

If successful, the liffId will be returned.


Checking the operation of the LIFF app

Create a URL to access the app based on the liffId obtained in the above procedure.

The URL will be line: // app / 0000000000-nnnnnnnn, which is a combination ofline: // app /and liffId.

Originally, the bot should speak the URL to the user according to the action that triggers it, but here, for a simple operation check, I will post the URL myself.


If you click the URL you posted (or the URL spoken by the bot), the LIFF app will be displayed as shown below.
In particular, Thymeleaf is displaying Hello Thymeleaf!, And the LIFF API is used for items such as language, context.viewType, context.userId, context.utouId. Confirm that the value is displayed in.


Press the ʻOpen window` button to display the line home page in the in-app browser.

When you press the Get profile button, the icon and profile set for your LINE will be displayed.


When you press the Send Message button, a dialog will appear stating that you have sent the message, and you will see the messageYou've successfully sent a message! Hooray!And a stamp.


In this way, using the LIFF app, it is possible to link LINE information to the LINE website and to generate an event from the website to the LINE client.

Remove LIFF app

To delete the added LIFF app, execute the following command from the terminal (terminal).

--Replace 0000000000-nnnnnnnn with liffId --- Paste the Bot access token (long term) value into the xxxxxx ... part of " Authorization: Bearer xxxxxx ... " without line breaks.

curl -X DELETE https://api.line.me/liff/v1/apps/0000000000-nnnnnnnn \
-H "Authorization: Bearer xxxxxx..."

If successful, nothing will be displayed. (An error message will be displayed on failure)

in conclusion

It was confirmed that LINE App can be created with Thymeleaf on Spring Boot.

It seems that you can make a LIFF application that uses the information posted in the form by preparing a Form on the Thymeleaf side, and a LIFF application that links Thymeleaf and the LIFF API well (I want to make it).


-Memo on how to use Thymeleaf with Spring Boot

Recommended Posts

Run LIFF with Spring Boot
Download with Spring Boot
Run WEB application with Spring Boot + Thymeleaf
Run Scala applications with Spring Boot through Gradle
Generate barcode with Spring Boot
Hello World with Spring Boot
Implement GraphQL with Spring Boot
Get started with Spring boot
Hello World with Spring Boot!
SNS login with Spring Boot
File upload with Spring Boot
Spring Boot starting with copy
Spring Boot starting with Docker
Hello World with Spring Boot
Set cookies with Spring Boot
Use Spring JDBC with Spring Boot
Add module with Spring Boot
Getting Started with Spring Boot
Create microservices with Spring Boot
Send email with spring boot
Create Restapi with Spring Boot ((1) Until Run of App)
Use Basic Authentication with Spring Boot
gRPC on Spring Boot with grpc-spring-boot-starter
Create an app with Spring Boot 2
Hot deploy with Spring Boot development
Database linkage with doma2 (Spring boot)
Spring Boot programming with VS Code
Until "Hello World" with Spring Boot
Inquiry application creation with Spring Boot
Get validation results with Spring Boot
(Intellij) Hello World with Spring Boot
Create an app with Spring Boot
Google Cloud Platform with Spring Boot 2.0.0
Check date correlation with Spring Boot
I tried GraphQL with Spring Boot
[Java] LINE integration with Spring Boot
Beginning with Spring Boot 0. Use Spring CLI
I tried Flyway with Spring Boot
Message cooperation started with Spring Boot
Spring Boot gradle build with Docker
Hello World with Eclipse + Spring Boot + Maven
Send regular notifications with LineNotify + Spring Boot
HTTPS with Spring Boot and Let's Encrypt
Challenge Spring Boot
Try using Spring Boot with VS Code
Start web application development with Spring Boot
Launch Nginx + Spring Boot application with docker-compose
I tried Lazy Initialization with Spring Boot 2.2.0
Spring Boot Form
Implement CRUD with Spring Boot + Thymeleaf + MySQL
Asynchronous processing with Spring Boot using @Async
Implement paging function with Spring Boot + Thymeleaf
Spring Boot Memorandum
gae + spring boot
(IntelliJ + gradle) Hello World with Spring Boot
Use cache with EhCashe 2.x with Spring Boot
Form class validation test with Spring Boot
Achieve BASIC authentication with Spring Boot + Spring Security
Personal memo Run Spring Boot + Gradle web project with Codenvy (Eclipse Che)
Spring Boot environment construction with Docker (January 2021 version)
Create a website with Spring Boot + Gradle (jdk1.8.x)