---
# System prepended metadata

title: Line 實作(React & Springboot為實例)
tags: [Springboot, Line, React]

---

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

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

---

## React line liff init


``` typescript
...
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


``` typescript
...
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

``` typescript
...
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

``` typescript
...
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
``` properties
line.bot.channel-token = #{line.bot.channel-token}
line.bot.channel-secret = #{line.bot.channel-secret}
```

/src/main/java/web/component/LineWebHookHandler.java
``` java
...
this.replyText(event.getReplyToken(), #{liff-url});
...
```




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







---