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

การทำ 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

.

จะได้ตามนี้

Ngrok
รัน Ngrok

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

3.LIFF Front-end Framework (LIFF)

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

Login ด้วย Line ให้เรียบร้อยแล้วทำการสร้าง Providers

providers
กด crreate เพื่อสร้าง Providers ใหม่

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

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

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

ให้เลือกไปที่ LINE Login

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

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

กดปุ่ม Add เพื่อเพิ่ม LIFF

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

วาง url ไว้ตรง 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

ก่อนหน้า
ถัดไป

กระทู้ที่เกี่ยวข้อง