[JAVA] Führen Sie LIFF mit Spring Boot aus

Einführung

Es scheint, dass es keine Möglichkeit gibt, LIFF auf einer Java-Webanwendung auszuführen, also habe ich es versucht.

Bei Verwendung von line / line-bot-sdk-java wird die Bot-Seite von Spring Boot usw. auf dem Server gehostet, damit sie per Webhook verbunden werden kann. Sie sollten es in dem Zustand verwenden, in dem es fertig ist. Warum also nicht einen Bildschirm für LIFF darin erstellen?

Also habe ich versucht, mit Thymeleaf on Spring Boot einen Bildschirm für die LIFF-Anwendung zu erstellen.

Verfahren

Es wird davon ausgegangen, dass line / line-bot-sdk-java bereits in Spring Boot usw. ausgeführt wird. Die URL wird unter ngrok veröffentlicht.

(Anzeige: Veröffentlicht auf Hokkaido Hands-on Material der Java-Benutzergruppe, einschließlich der Vorgehensweise zur Prämisse)

Fügen Sie Thymeleaf zur Bibliothek hinzu
Zeigen Sie die Thymeleaf-Webseite mit Spring Boot an
Zeigen Sie das LIFF-Beispiel an

Befolgen Sie die Anweisungen in.

1. Fügen Sie Thymeleaf zur Bibliothek hinzu

Fügen Sie die Beschreibung von Thymeleaf in <properties> ~ </ properties> von pom.xml der Projektdatei (Stammordner) hinzu.

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

Fügen Sie die Beschreibung von Thymeleaf in ~ </ dependencies> `von pom.xml der Projektdatei (Stammordner) hinzu. (Rund um den Boden des Spring-Boot-Starter-Netzes)

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

Fügen Sie Thymeleaf-Einstellungen am Ende von application.properties in anderen Quellen hinzu (src / main / resources).

## thymeleaf
spring.thymeleaf.mode=HTML

2. Zeigen Sie die Thymeleaf-Webseite mit Spring Boot an

Eine Datei erstellen

Erstellen Sie liff.html im Vorlagenordner anderer Quellen (src / main / resources).
(Erstellen Sie es, wenn kein Ordner vorhanden ist.)

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

Erstellen Sie ein com.example.linebot.web-Paket im Quellpaket (src / main / java) und erstellen Sie die LIFFController-Klasse darin

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}]]Ein Teil von Hallo...Mit Liff umschreiben.HTML anzeigen
    model.addAttribute("test", "Hello Tymeleaf!");
    return "liff";
  }

}

Funktionsprüfung von Thymeleaf

Stoppen Sie LineBotApplication und starten Sie es neu
Greifen Sie auf [http: // localhost: m8080 / liff] zu (http: // localhost: 8080 / liff).
Stellen Sie sicher, dass Folgendes im Browser angezeigt wird
![Liff_P1_01.jpg](https://qiita-image-store.s3.amazonaws.com/0/8064/acc5dd42-1f30- 8d3d-8114-78d21fde9d3e.jpeg)
(Der [[$ {test}]] Teil von liff.html wird mit den von LIFFController festgelegten Modellinformationen neu geschrieben.)

3. Zeigen Sie das LIFF-Beispiel an

Eine Datei erstellen

Lassen Sie den Beispielcode von line / line-liff-Starter funktionieren (mit geringfügigen Änderungen).

Kopieren Sie liff-Starter.js und style.css von der obigen Site und duplizieren Sie sie im statischen Ordner anderer Quellen (src / main / resources)
(erstellen Sie eine, wenn sie nicht vorhanden ist).

Schreiben Sie templates / liff.html in anderen Quellen (src / main / resources) basierend auf dem Inhalt von index.html auf der obigen Site neu.

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

Als LIFF-App hinzufügen

Führen Sie den folgenden Befehl vom Terminal (Terminal) aus, um die LIFF-Anwendung hinzuzufügen.

Installieren Sie unter Windows curl oder verwenden Sie ein Tool, das HTTP-Anforderungen mit entsprechenden Parametern stellen kann (ARC). Etc.).
line / line-bot-sdk-java ist auch für die Registrierung von LIFF / Rich-Menüs vorgesehen, die unter Java ausgeführt werden. Ein Befehlszeilentool (line-bot-cli) ist ebenfalls verfügbar.

Bei der Ausführung des Befehls müssen die folgenden Teile einzeln bearbeitet werden.

Fügen Sie den Wert des Bot-Zugriffstokens (langfristig) in "xxxxxx ..." von "Authorization: Bearer xxxxxx ..." "ohne Zeilenumbrüche ein (damit der Befehl sehr lang wird). --xxx.ngrok.io in"https://xxx.ngrok.io/liff"sollte die von ngrok erhaltene URL sein.
Es gibt drei Arten von "Typ", "Kompakt", "Groß" und "Voll", die die Höhe des LIFF-App-Fensters bestimmen. --url gibt die https-URL an

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

Bei Erfolg wird die liffId zurückgegeben.

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

Überprüfen der Funktion der LIFF-App

Erstellen Sie eine URL für den Zugriff auf die App basierend auf der im obigen Verfahren erhaltenen liffId.

Die URL lautet "line: // app / 0000000000-nnnnnnnn". Dies ist eine Kombination aus "line: // app /" und liffId.

Ursprünglich sollte der Bot die URL gemäß der Aktion, die sie auslöst, mit dem Benutzer sprechen, aber hier werde ich zur einfachen Überprüfung der Operation die URL selbst veröffentlichen.

Wenn Sie auf die von Ihnen veröffentlichte URL (oder die von Bot gesprochene URL) klicken, wird die LIFF-App wie unten gezeigt angezeigt.
Insbesondere zeigt Thymeleaf "Hallo Thymeleaf!" an, und die LIFF-API wird verwendet, um Elemente wie "Sprache", "context.viewType", "context.userId", "context.utouId" anzuzeigen. Bestätigen Sie, dass der Wert in angezeigt wird.

Wenn Sie auf die Schaltfläche "Fenster öffnen" klicken, wird die Zeilenhomepage im In-App-Browser angezeigt.

Wenn Sie auf die Schaltfläche "Profil abrufen" klicken, werden das für Ihre LINE festgelegte Symbol und Profil angezeigt.

Wenn Sie auf die Schaltfläche "Nachricht senden" klicken, wird ein Dialogfeld angezeigt, in dem angegeben wird, dass Sie eine Nachricht gesendet haben, und die Meldung "Sie haben erfolgreich eine Nachricht gesendet! Hurra!" Und ein Stempel werden angezeigt.

Auf diese Weise ist es mithilfe der LIFF-App möglich, LINE-Informationen mit der LINE-Website zu verknüpfen und ein Ereignis von der Website zum LINE-Client zu generieren.

LIFF App entfernen

Führen Sie den folgenden Befehl vom Terminal (Terminal) aus, um die hinzugefügte LIFF-App zu löschen.

Ersetzen Sie 0000000000-nnnnnnn durch liffId
Fügen Sie den Wert des Bot-Zugriffstokens (langfristig) in den Teil "xxxxxx ..." von "Authorization: Bearer xxxxxx ..." "ohne Zeilenumbrüche ein.

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

Bei Erfolg wird nichts angezeigt. (Bei einem Fehler wird eine Fehlermeldung angezeigt.)

abschließend

Es wurde bestätigt, dass die LINE App mit Thymeleaf auf Spring Boot erstellt werden kann.

Es scheint, dass Sie eine LIFF-App erstellen können, die ein Formular auf der Thymeleaf-Seite erstellt und die auf dem Formular angegebenen Informationen verwendet, oder eine LIFF-App, die Thymeleaf und die LIFF-API gut miteinander verbindet (ich möchte es erstellen).

Verweise

Memo zur Verwendung von Thymeleaf mit Spring Boot