---
title: 'Line 實作(React & Springboot為實例)'
tags: Line,React,Springboot
description: Line 實作(React & Springboot為實例)
---

# Line 實作(React & Springboot為實例)

---

[TOC]

---

## 使用的技術&工具

- React
- Springboot
- VSCode
- STS
- ngrok

---

## React line liff 安裝

打開Terminal安裝 Line liff

npm i --save @line/liff react-liff

---

## React line liff init

...
const init = () => {
    liff
    .init({ liffId: liffId })
    .then((e) => {
        console.log("Init success.")
     })
     .catch((e) => {
        console.log("Init error.")
        console.log(e)
     })
}
...
return (
    ...
    <div className="App">
      <div className="button-dev">
        <button onClick={init}>Line liff init</button>
      </div>
    ...
    </div>
)

---

## React line login

...
const lineLogin = () => {
    liff.login({
      //redirectUri: url,
    })
}
...
return (
    ...
    <div className="App">
      <div className="button-dev">
        <button onClick={lineLogin}>Line login</button>
      </div>
    ...
    </div>
)

---

## React line ID

...
const getLineId = () => {
    liff
    .getProfile()
    .then((profile) => {
      console.log(profile.userId)
    })
    .catch((err) => {
      console.log("error", err);
    });
}
...
return (
    ...
    <div className="App">
      <div className="button-dev">
        <button onClick={getLineId}>Line ID</button>
      </div>
    ...
    </div>
)

---

## React line logout

...
const logout = () => {
    liff.logout()
    console.log("Logout success.")
  }
...
return (
    ...
    <div className="App">
      <div className="button-dev">
        <button onClick={logout}>Line logout</button>
      </div>
    ...
    </div>
)

---

## Springboot Webhook

https://drive.google.com/file/d/1kUdVsyRVLMSM8lTYypylV8d2TjCGOk2Q/view?usp=share_link

修改程式
/src/main/resources/application.properties

line.bot.channel-token = #{line.bot.channel-token}
line.bot.channel-secret = #{line.bot.channel-secret}

/src/main/java/web/component/LineWebHookHandler.java

...
this.replyText(event.getReplyToken(), #{liff-url});
...

修改完後，啟動Server，加入官方帳號後，打文字會回復訊息

---