วันนี้จะมาสอนวิธีการใช้ตัว 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 นั้นเราสามารถหาอ่านได้ตามบทความที่มีหนึ่งในพี่ของบริษัทเราได้ทำการเขียนบล็อกไว้แล้ว
การใช้งาน เนื่องจาก 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/
Login ด้วย Line ให้เรียบร้อยแล้วทำการสร้าง Providers
เมื่อสร้าง Providers เสร็จแล้วให้ทำการกดสร้าง 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} ไปใช้งานได้เลย
ผลลัพท์
สุดท้าย
หวังว่าผู้อ่านทุกท่านจะนำไปปรับใช้กับงานที่กำลังทำได้นะครับ
สำหรับคนที่ไม่เข้าใจสามารถไปอ่านต่อได้ที่ doc ของ Line Deverloper ได้เลย
https://developers.line.biz/en/docs/liff/overview
