Run LIFF with Spring Boot
Introduction
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.
procedure
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)
- Add Thymeleaf to the library
- Display the Thymeleaf web page with Spring Boot
- 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).
<properties>
(Omitted)
<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.3.0</thymeleaf-layout-dialect.version>
</properties>
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)
<dependencies>
(Omitted)
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
(Omitted)
</dependencies>
Add Thymeleaf settings to the end of application.properties in other sources (src / main / resources)
## thymeleaf
spring.thymeleaf.mode=HTML
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">
<head>
<meta charset="UTF-8" />
<title>Hello Thymeleaf</title>
</head>
<body>
<h1>[[${test}]]</h1>
</body>
</html>
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;
@Controller
public class LIFFController {
@GetMapping("/liff")
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
- Stop and restart LineBotApplication
- Access [http: // localhost: m8080 / liff](http: // localhost: 8080 / liff)
- Make sure that the following is displayed in the browser
(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 -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LIFF Starter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>[[${test}]]</h1>
<div class="buttongroup">
<div class="buttonrow">
<button id="openwindowbutton">Open Window</button>
<button id="closewindowbutton">Close Window</button>
</div>
<div class="buttonrow">
<button id="getprofilebutton">Get Profile</button>
<button id="sendmessagebutton">Send Message</button>
</div>
</div>
<div id="profileinfo">
<h2>Profile</h2>
<a href="#" onclick="toggleProfileData()">Close Profile</a>
<div id="profilepicturediv">
</div>
<table border="1">
<tr>
<th>userId</th>
<td id="useridprofilefield"></td>
</tr>
<tr>
<th>displayName</th>
<td id="displaynamefield"></td>
</tr>
<tr>
<th>statusMessage</th>
<td id="statusmessagefield"></td>
</tr>
</table>
</div>
<div id="liffdata">
<h2>LIFF Data</h2>
<table border="1">
<tr>
<th>language</th>
<td id="languagefield"></td>
</tr>
<tr>
<th>context.viewType</th>
<td id="viewtypefield"></td>
</tr>
<tr>
<th>context.userId</th>
<td id="useridfield"></td>
</tr>
<tr>
<th>context.utouId</th>
<td id="utouidfield"></td>
</tr>
<tr>
<th>context.roomId</th>
<td id="roomidfield"></td>
</tr>
<tr>
<th>context.groupId</th>
<td id="groupidfield"></td>
</tr>
</table>
</div>
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
<script src="liff-starter.js"></script>
</body>
</html>
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"
}
}' \
https://api.line.me/liff/v1/apps
If successful, the liffId will be returned.
{"liffId":"0000000000-nnnnnnnn"}%
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).
References
-Memo on how to use Thymeleaf with Spring Boot
Recommended Posts