使用Spring Boot运行LIFF


简介

似乎无法在Java Web应用程序上运行LIFF，因此我尝试了它。

当使用

line / line-bot-sdk-java时，bot端应在通过Spring Boot等服务器托管在服务器上的同时使用它，以便可以对其进行网络钩接，因此在该页面中应该显示LIFF ？

使用

，我尝试在Spring Boot上为Thymeleaf制作LIFF应用程序的屏幕。

步骤

假定line / line-bot-sdk-java已经在Spring Boot等中运行。该URL由ngrok发布。

(广告：包括如何进行前提的工作，已在Java用户组北海道的动手材料中出版)

  • 将Thymeleaf添加到库中
  • 在Spring Boot中显示Thymeleaf网页
  • 查看LIFF样本

    • 请遵循

    中的步骤。

    1.将Thymeleaf添加到库

    在项目文件(根文件夹)的pom.xml的<properties>?</properties>中添加Thymeleaf的描述。

    1
    2
    3
    4
    5
    <properties>
      (中略)
      <thymeleaf.version>3.0.9.RELEASE</thymeleaf.version>
      <thymeleaf-layout-dialect.version>2.3.0</thymeleaf-layout-dialect.version>
    </properties>

    在项目文件(根文件夹)的pom.xml的<dependencies>?</dependencies>中添加Thymeleaf的描述。 (在spring-boot-starter-web的底部附近)

    1
    2
    3
    4
    5
    6
    7
    8
    <dependencies>
      (中略)
      <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
      </dependency>
      (中略)
    </dependencies>

    将Thymeleaf设置添加到其他源(src / main / resource)中的application.properties的末尾

    1
    2
    ## thymeleaf
    spring.thymeleaf.mode=HTML

    2.在Spring Boot

    中显示Thymeleaf网页

    创建文件

    在其他来源(src / main / resources)的模板文件夹中创建liff.html。(如果文件夹不存在，则创建)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
      <meta charset="UTF-8" />
      Hello Thymeleaf
    </head>
    <body>
    <h1>[[${test}]]</h1>
    </body>
    </html>

    在源包(src / main / java)中创建com.example.linebot.web包，并在其中创建LIFFController类。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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}]] の部分を Hello... で書き換えて、liff.htmlを表示する
        model.addAttribute("test", "Hello Tymeleaf!");
        return "liff";
      }

    }

    胸腺运行检查

  • 停止并重新启动LineBotApplication

  • 转到http：//本地主机：m8080 / liff

  • 确认浏览器 Liff_P1_01.jpg 中显示了以下内容(用LIFFController设置的Model信息重写了liff.html的[[${test}]]部分)

    • 3.查看LIFF示例

    创建文件

    运行line / line-liff-starter示例代码(稍作更改)。

    从上述站点复制liff-starter.js和style.css并将它们复制到其他来源(src / main / resources)的静态文件夹中(如果不存在则创建文件夹))<铅>

    根据上述站点的index.html的内容，重写其他来源(src / main / resources)的template / liff.html。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    <!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">
      LIFF Starter
      <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>

    添加为LIFF应用

    从终端(终端)执行以下命令以添加LIFF应用程序。

    对于Windows，请安装curl或使用可以发出具有相同参数的HTTP请求的工具(ARC等)。 另外，line / line-bot-sdk-java还具有一个命令行工具(line-bot-cli)，用于注册在Java上运行的LIFF /富菜单。

    执行

    命令时，需要分别编辑以下部分。

    • 将漫游器访问令牌(长期)值粘贴到"Authorization: Bearer xxxxxx..."的xxxxxx...中，而无需换行(因此该命令将非常长)

    • "https://xxx.ngrok.io/liff"中的xxx.ngrok.io应该是ngrok获得的URL

    • Type，compact，tall和full共有三种类型，它们确定了LIFF应用程序窗口的高度。

    • url指定https URL

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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

    如果成功，将返回liffId。

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

    LIFF应用程序操作检查

    根据上述过程中获得的liffId创建URL以访问应用程序。

    URL将是line://app/0000000000-nnnnnnnn，它是line://app/和liffId的组合。

    最初，该漫游器应根据触发该URL的操作向用户说出该URL，但是在这里，为了进行简单的操作检查，我将自己发布该URL。

    Liff_P1_02.jpg

    单击您发布的URL(或漫游器说的URL)，将显示LIFF应用程序，如下所示。 特别是Thymeleaf在显示Hello Thymeleaf!，而LIFF API在表中的language，context.viewType，context.userId，context.utouId等项目中显示值。

    Liff_P1_03.jpg

    当您按下

    Open window按钮时，该行的主页将显示在应用程序内浏览器中。

    当您按下

    Get profile按钮时，将显示为LINE设置的图标和配置文件。

    Liff_P1_04.jpg

    当您按下

    Send Message按钮时，将显示一个对话框，指示已发送消息，并向您显示消息You've successfully sent a message! Hooray!和图章。

    Liff_P1_05.jpg

    通过这种方式，您可以使用LIFF应用将LINE信息链接到LINE网站，并从该网站生成事件到LINE客户端。

    删除LIFF应用程序

    要删除添加的LIFF应用程序，请从终端(终端)执行以下命令。

    • 将0000000000-nnnnnnnn替换为liffId

    • 将Bot访问令牌(长期)值粘贴到"Authorization: Bearer xxxxxx..."的xxxxxx...部分中，不要换行。

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

    如果成功，则不显示任何内容。 (失败时将显示错误消息)

    结论

    确认可以在Spring Boot上使用Thymeleaf创建LINE App。

    看来您可以制作一个在Thymeleaf一侧准备一个Form并使用表单上发布的信息的LIFF应用程序，或者一个可以很好地链接Thymeleaf和LIFF API的LIFF应用程序(我想这样做)。

    参考

    • 如何在Spring Boot中使用Thymeleaf