[JAVA] Exécutez LIFF avec Spring Boot

introduction

Il semble qu'il n'y ait aucun moyen d'exécuter LIFF sur une application Web Java, alors je l'ai essayé.

Lorsque vous utilisez line / line-bot-sdk-java, le côté Bot est hébergé sur le serveur par Spring Boot etc. afin qu'il puisse être webhooké. Vous devriez l'utiliser dans l'état où il est fait, alors pourquoi ne pas y créer un écran pour LIFF?

J'ai donc essayé de créer un écran pour l'application LIFF avec Thymeleaf sur Spring Boot.

procédure

On suppose que line / line-bot-sdk-java est déjà en cours d'exécution dans Spring Boot, etc. L'URL est publiée sur ngrok.

(Publicité: publiée sur Java User Group Hokkaido Hands-on Material, y compris comment se rendre sur les lieux)

Ajoutez Thymeleaf à la bibliothèque
Affichez la page Web Thymeleaf avec Spring Boot
Voir un exemple de LIFF

Suivez la procédure dans.

1. Ajoutez Thymeleaf à la bibliothèque

Ajoutez la description de Thymeleaf dans <properties> ~ </ properties> de pom.xml du fichier projet (dossier racine).

<properties>
  (Omis)
  <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
  <thymeleaf-layout-dialect.version>2.3.0</thymeleaf-layout-dialect.version>
</properties>

Ajoutez la description de Thymeleaf dans <dependencies> ~ </ dependencies> de pom.xml du fichier projet (dossier racine). (Autour du bas du ressort-boot-starter-web)

<dependencies>
(Omis)
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>
(Omis)
</dependencies>

Ajouter les paramètres Thymeleaf à la fin de application.properties dans d'autres sources (src / main / resources)

## thymeleaf
spring.thymeleaf.mode=HTML

2. Affichez la page Web Thymeleaf avec Spring Boot

Créer un fichier

Créez liff.html dans le dossier templates des autres sources (src / main / resources)
(Créez-le s'il n'y a pas de dossier)

<!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>

Créez un package com.example.linebot.web dans le package source (src / main / java) et créez-y la classe LIFFController

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}]]Fait partie de Hello...Réécrire avec liff.Afficher html
    model.addAttribute("test", "Hello Tymeleaf!");
    return "liff";
  }

}

Contrôle de fonctionnement de Thymeleaf

Arrêtez et redémarrez LineBotApplication
Accédez à [http: // localhost: m8080 / liff](http: // localhost: 8080 / liff)
Assurez-vous que ce qui suit est affiché dans le navigateur
![Liff_P1_01.jpg](https://qiita-image-store.s3.amazonaws.com/0/8064/acc5dd42-1f30- 8d3d-8114-78d21fde9d3e.jpeg)
(La partie [[$ {test}]] de liff.html est réécrite avec les informations de modèle définies par LIFFController)

3. Voir un exemple de LIFF

Créer un fichier

Faites fonctionner l'exemple de code de line / line-liff-starter (avec des modifications mineures).

Copiez liff-starter.js et style.css du site ci-dessus et dupliquez-les dans le dossier statique d'autres sources (src / main / resources)
(créez-en un s'il n'existe pas)

Réécrivez les templates / liff.html dans d'autres sources (src / main / resources) en fonction du contenu de index.html sur le site ci-dessus.

<!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>

Ajouter en tant qu'application LIFF

Exécutez la commande suivante à partir du terminal (terminal) pour ajouter l'application LIFF.

Pour Windows, installez curl ou un outil capable de faire des requêtes HTTP avec des paramètres équivalents (ARC Etc.).
De plus, line / line-bot-sdk-java est pour l'enregistrement LIFF / menu riche qui s'exécute sur Java. Un outil de ligne de commande (line-bot-cli) est également disponible.

Lors de l'exécution de la commande, les parties suivantes doivent être modifiées individuellement.

Collez la valeur du jeton d'accès du Bot (long terme) dans xxxxxx ... de " Autorisation: Bearer xxxxxx ... " sans saut de ligne (la commande devient donc très longue) --xxx.ngrok.io in"https://xxx.ngrok.io/liff"devrait être l'URL obtenue par ngrok.
Il existe trois types de «Type», «compact», «tall» et «full», qui déterminent la hauteur de la fenêtre de l'application LIFF. --ʻUrl` spécifie l'URL 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

En cas de succès, le liffId sera renvoyé.

{"liffId":"0000000000-nnnnnnnn"}%

Vérification du fonctionnement de l'application LIFF

Créez une URL pour accéder à l'application en fonction du liffId obtenu dans la procédure ci-dessus.

L'URL sera line: // app / 0000000000-nnnnnnnn, qui est une combinaison de` line: // app / ʻet liffId.

À l'origine, le Bot devrait dire l'URL à l'utilisateur en fonction de l'action qui la déclenche, mais ici, pour une simple vérification de fonctionnement, je publierai l'URL moi-même.

Si vous cliquez sur l'URL que vous avez publiée (ou sur l'URL prononcée par Bot), l'application LIFF s'affichera comme indiqué ci-dessous.
En particulier, Thymeleaf affiche Hello Thymeleaf!, Et l'API LIFF est utilisée pour afficher des éléments tels que language, context.viewType, context.userId, context.utouId. Confirmez que la valeur est affichée dans.

«Lorsque vous appuyez sur le bouton Ouvrir la fenêtre», la page d'accueil de la ligne s'affiche dans le navigateur intégré à l'application.

Lorsque vous appuyez sur le bouton «Obtenir le profil», l'icône et le profil définis pour votre LIGNE seront affichés.

Lorsque vous appuyez sur le bouton Envoyer un message, une boîte de dialogue apparaîtra indiquant que vous avez envoyé un message, et vous verrez le message Vous avez envoyé un message avec succès! Hourra! Et un tampon.

De cette manière, en utilisant l'application LIFF, il est possible de relier les informations LINE au site Web LINE et de générer un événement du site Web vers le client LINE.

Supprimer l'application LIFF

Pour supprimer l'application LIFF ajoutée, exécutez la commande suivante à partir du terminal (terminal).

Remplacez 0000000000-nnnnnnnn par liffId
Collez la valeur du jeton d'accès Bot (à long terme) dans la partie xxxxxx ... de `` Autorisation: support xxxxxx ... '' sans saut de ligne.

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

En cas de succès, rien ne sera affiché. (Un message d'erreur sera affiché en cas d'échec)

en conclusion

Il a été confirmé que l'application LINE peut être créée avec Thymeleaf sur Spring Boot.

Il semble que vous puissiez créer une application LIFF qui prépare un formulaire du côté Thymeleaf et utilise les informations publiées sur le formulaire, ou une application LIFF qui relie bien Thymeleaf et l'API LIFF (je veux le faire).

Les références

Notes sur l'utilisation de Thymeleaf avec Spring Boot