การทำ LIFF (LINE Front-end Framework) ด้วย ReactJs และ Ngrok

วันนี้จะมาสอนวิธีการใช้ตัว LIFF (LINE Front-end Framework) กับ ReactJS โดยมี Ngrok เป็น tools เพื่อให้ localhost บนเครื่องของเราสามารถ online ได้

LINE Front-end Framework (LIFF)

LIFF คือ เป็นแพลตฟอร์มสำหรับเว็บแอพที่ทำงานภายใน LINE Application

LIFF สามารถรับข้อมูลจากแพลตฟอร์ม LINE เช่น Line ID, ชื่อ, รูป แอป LIFF

มี Function ในการเรียกใช้ที่เด่น ๆ เช่น

Getting the user’s access token
Getting the user’s profile
Scan QrCode

วันนี้เราจะลองทำตัวที่ง่ายที่สุดก่อนนั้นก็คือ Getting the user’s profile โดย liff.getProfile()

สิ่งที่ต้องเตรียม

1. ReactJS

Setup React

ติดตั้ง Create React App คำสั่งเดียวก็ได้แล้วง่ายมาก

npm init react-app {project_name (เปลี่ยนได้ตามใจชอบ)}
npm init react-app line-liff

ต่อไปเปิดไฟล์ index.html ที่อยู่ในโฟรเดอร์ public และเพิ่ม script ลงไปไว้บน tag title เป็น SDK สำหรับการเรียกใช้งาน LIFF

<script src=”https://static.line-scdn.net/liff/edge/2.1/liff.js”></script>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="logo192.png" />
  <link href="https://fonts.googleapis.com/css?family=Kanit&display=swap" rel="stylesheet">
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <!-- line sdk -->
  <script src="https://static.line-scdn.net/liff/edge/2.1/liff.js"></script>
  <!-- line sdk -->
  <title>line liff test</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

ไฟล์ App.js เขียนตามนี้เลยครับ

import React, { Component } from 'react';

const liff = window.liff;

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      name: '',
      userLineID: '',
      pictureUrl: ''
    };
  }

  componentDidMount = async() => {
    await liff.init({ liffId: `${liffid}` }).catch(err=>{throw err});
    if (liff.isLoggedIn()) {
      let getProfile = await liff.getProfile();
      this.setState({
        name: getProfile.displayName,
        userLineID: getProfile.userId,
        pictureUrl: getProfile.pictureUrl,
      });
    }else{
      liff.login();
    }
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div className="support">
            <p>ชื่อ {this.state.name}</p>
            <p>Line ID {this.state.userLineID}</p>
            <img alt='pic' src={this.state.pictureUrl} />
          </div>
        </header>
      </div>
    );
  }
}

export default App;

แต่เดี๋ยวก่อนแค่นี้เราจะดึงข้อมูลออกมาได้ไงในเมื่อเรายังไม่ได้ไปทำอะไรกับ LIFF เลย

ก่อนจะไปทำการเชื่อมต่อกับ LIFF ผมอยากให้ทุกคนทำตัวนี้ก่อนนั่นก็คือ Ngrok นั้นเอง

2.Ngrok

Ngrok คืออะไร

Ngrok คือ tools ที่ช่วยให้คนทั่วไป สามารถเข้าใช้งานเว็บหรือแอพพลิเคชั่นของเรา ผ่านเครื่องที่รันอยู่บน localhost ได้นั่นเอง

วิธีการติดตั้ง ngrok นั้นเราสามารถหาอ่านได้ตามบทความที่มีหนึ่งในพี่ของบริษัทเราได้ทำการเขียนบล็อกไว้แล้ว

Ngrok ทำเครื่องเรา online ได้โครตง่าย ฟรีด้วย

สามารถเข้าไปอ่านได้ที่ลิ้งค์นี้เลย

การใช้งาน เนื่องจาก react นั้นตั้งเดิมจะอยู่ที่ port 3000 เราจะสั่งใช้งาน Ngrok ตามนี้

cd ~/{โฟรเดอร์ที่เราติดตั้ง ngrok}/
./ngrok http 3000

จะได้ตามนี้

http://61c22debe0d5.ngrok.io และ https://61c22debe0d5.ngrok.io คือ url ที่เราสามารถไปเปิดในเครื่องอื่นได้

3.LIFF Front-end Framework (LIFF)

จากนี้เราจะทำงานเชื่อมกับตัว Line LIFF ละ อย่างแรกที่ต้องทำคือให้มเข้าไปที่ลิ้งค์ https://developers.line.biz/en/

เมื่อสร้าง Providers เสร็จแล้วให้ทำการกดสร้าง Channel

กด Create a new channel เพื่อสร้าง Channel ใหม่

ให้เลือกสร้าง Channel ที่เป็น Line Login

กรอกรายละเอียดต่าง ๆ ให้เรียบร้อย

เข้าไปที่เมนู LIFF แล้วกด Add

นำ url ของเราที่ได้จาก Ngrok ไปวางตรง Endpoint URL

นำ LIFF ID ไปใส่ไว้ใน ComponentDidMount ใน App.js

componentDidMount = async() => {
    await liff.init({ liffId: `นำ LIFF ID มาใส่ตรงนี้` }).catch(err=>{throw err});
      let getProfile = await liff.getProfile();
      this.setState({
        name: getProfile.displayName,
        userLineID: getProfile.userId,
        pictureUrl: getProfile.pictureUrl,
      });
  }

จากนั้นเราสามารถนำ url ตรง LIFF URL https://liff.line.me/{LIFF ID} ไปใช้งานได้เลย

ผลลัพท์

getProfile — ดึงข้อมูล ชื่อ lineId และ รูปภาพโปรไฟล์

สุดท้าย

หวังว่าผู้อ่านทุกท่านจะนำไปปรับใช้กับงานที่กำลังทำได้นะครับ

สำหรับคนที่ไม่เข้าใจสามารถไปอ่านต่อได้ที่ doc ของ Line Deverloper ได้เลย

https://developers.line.biz/en/docs/liff/overview