boychawin.com

Version

0.01

License

-

Downloads

11

How to install LINE (LIFF) ร่วมกับ React

How to install LINE (LIFF) ร่วมกับ React

การใช้ LINE Front-end Framework (LIFF) ร่วมกับ React และ TypeScript สำหรับการรับรองตัวตนและการเข้าถึงข้อมูล

Boy Chawin
Boy Chawin

Dec 6, 2023

ก่อนอื่นเลย เรามาทำความรู้จักกับเจ้า LIFF (Line Front-end Framework) เป็นเครื่องมือที่ Line พัฒนาขึ้นเพื่อช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่ใช้งานร่วมกับแอป Line ได้ โดย LIFF ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันที่มีการปฏิสัมพันธ์กับ Line ได้ง่ายขึ้นผ่านการใช้งาน API และการสร้าง UI/UX ที่สอดคล้องกับแอป Line อย่างมีประสิทธิภาพและสวยงาม นักพัฒนาสามารถใช้ LIFF เพื่อสร้างแอปพลิเคชันที่ใช้งานในแอป Line เช่น แอปพลิเคชันสำหรับการชำระเงิน การจองตั๋ว เกม หรือบริการอื่น ๆ ที่ผู้ใช้ Line สามารถเข้าถึงและใช้งานได้ในแอป Line เดิม ๆ โดยไม่ต้องเปิดแอปพลิเคชันอื่นอีกต่างหาก

ขั้นตอนที่ 1: ติดตั้ง Node.js

Node.js เป็นแพลตฟอร์มการพัฒนา JavaScript ที่รันบนเซิร์ฟเวอร์ LIFF ต้องใช้ Node.js เวอร์ชัน 16.0.0 ขึ้นไป คุณสามารถติดตั้ง Node.js ได้จากเว็บไซต์ทางการของ Node.js

ขั้นตอนที่ 2: ติดตั้ง LIFF CLI

LIFF CLI เป็นเครื่องมือบรรทัดคำสั่งที่ช่วยให้คุณสามารถพัฒนาแอปพลิเคชัน LIFF ได้ คุณสามารถติดตั้ง LIFF CLI โดยใช้คำสั่งต่อไปนี้:

npm install -g @line/liff

ขั้นตอนที่ 3: การสร้างบัญชี LINE Developers

หากคุณต้องการสร้าง LIFF app คุณต้องสร้างบัญชี LINE Developers คุณสามารถสร้างบัญชี LINE Developers ได้จากเว็บไซต์ทางการของ LINE Developers

ขั้นตอนที่ 4: การสร้างช่อง LINE

LIFF app ของคุณจะต้องอยู่ในช่อง LINE คุณสามารถสร้างช่อง LINE ได้จากเว็บไซต์ทางการของ LINE Developers

ขั้นตอนที่ 5: ลงทะเบียน LIFF app ในช่อง LINE

เมื่อคุณสร้างช่อง LINE แล้ว คุณสามารถลงทะเบียน LIFF app ของคุณได้ในช่อง LINE คุณสามารถลงทะเบียน LIFF app ของคุณได้จากเว็บไซต์ทางการของ LINE Developers

ขั้นตอนที่ 6: การใช้งาน

สำหรับการติดตั้ง LIFF SDK ในภาษา JavaScript คุณสามารถดูคำแนะนำได้จากเว็บไซต์ทางการของ LIFF

ต่อไปนี้เป็นตัวอย่างโค้ด React

// App.tsx
import { useEffect, useState } from 'react';
import liff from '@line/liff';

interface Profile {
  userId: string;
  displayName: string;
  pictureUrl?: string;
  statusMessage?: string;
}
interface Friendship {
  friendFlag: boolean;
}


function App() {
  const [errorPage, setErrorPage] = useState<string>('');
  const [status, setStatus] = useState<boolean>(false);
  const [profile, setProfile] = useState<Profile | undefined>();
  const redirectUri = "https://line-sdk-react.vercel.app"

  const handleSuccess = () => {
    console.log('LIFF initialized successfully');
  };

  // Function for handling LIFF initialization errors
  const handleError = (error: any) => {
    setErrorPage("Error initializing")
    console.error('Error initializing LIFF:', error);
  };


  const initializeLIFF = async () => {
    if (status) return;
    try {

      const config = {
        liffId: "นำ LIFF ID มาใส่",
        withLoginOnExternalBrowser: true,
      };

      await liff.init(config, handleSuccess, handleError);

      if (!liff.isLoggedIn() && !liff.isInClient()) {
        setStatus(false)
        setErrorPage(
          'To get an access token, you need to be logged in. Tap the "login" button below and try again.'
        );
        return;
      }

      await lineConnectAPI();

    } catch (e: any) {
      setErrorPage(checkErrorPage(e))
    }
  };


  useEffect(() => {
    initializeLIFF();
  }, [liff]);

  const lineConnectAPI = async () => {
   //🤣...
  };

  const lineLogin = async () => {
  // 🤣...
  };

  const lineLogout = () => {
  //🤣...
  };


  const showDisplayName = () => {
    //🤣...
  };

  return <>{showDisplayName()}</>;
}

export default App;

อธิบายโค้ดขั้นตอนการทำงานแต่ละส่วนคราวๆ

  1. การ Import และ Interface ของข้อมูล:

    • import { useEffect, useState } from 'react';: ใช้ import React hooks เช่น useEffect และ useState เพื่อใช้ในการจัดการวงจรชีวิตของ component และ state management ใน React.
    • interface Profile และ interface Friendship: ที่ประกาศ Interface เพื่อระบุโครงสร้างข้อมูลของ Profile และ Friendship ที่จะได้รับจากการเรียกใช้ LIFF API.
  2. โค้ดที่ใช้ในการเริ่มต้นและเชื่อมต่อ LIFF:

    • initializeLIFF function: ฟังก์ชันที่ใช้ในการเชื่อมต่อกับ LIFF และทำการเช็คสถานะการเข้าสู่ระบบ, โดยใช้ liff.init() เพื่อเริ่มต้น LIFF.
    • useEffect: ใช้ในการเรียกใช้ initializeLIFF เมื่อ component ถูกโหลดและเมื่อ liff มีการเปลี่ยนแปลง.
  3. การเรียกใช้ LIFF API:

    • lineConnectAPI function: ใช้ LIFF API เพื่อเรียกข้อมูลผู้ใช้ และเช็คสถานะการเป็นเพื่อน.
    • ใช้ liff.getFriendship() และ liff.getProfile() เพื่อดึงข้อมูลของเพื่อนและข้อมูลโปรไฟล์ของผู้ใช้.
  4. การจัดการ UI และสถานะ:

    • ใช้ state และ useState เพื่อการจัดการสถานะของแอปพลิเคชัน เช่น status และ errorPage.
    • ใช้ lineLogin() และ lineLogout() เพื่อเข้าสู่ระบบและออกจากระบบ โดยใช้ liff.login() และ liff.logout() หรือ redirect URI ที่กำหนดไว้.
  5. การแสดงผลใน UI:

    • showDisplayName() ฟังก์ชันที่ตรวจสอบสถานะการเข้าสู่ระบบและแสดง UI ตามที่เกิดขึ้น เช่น การแสดงข้อความ "Loading..." หรือ "Login", "Logout" button ตามสถานะ.
  6. คำสั่งอื่น ๆ:

    • import.meta.env.VITE_LINE_LIFF_ID: ใช้ Vite environment variable เพื่อเก็บ LIFF ID ไว้ในการเรียกใช้ LIFF.

โค้ดดูมีการจัดการการเข้าสู่ระบบ, การเรียกใช้ API ของ Line, และการแสดงผล UI อย่างละเอียด เป็นโค้ดที่ทำงานร่วมกับ React

***เว็บทดสอบ https://line-sdk-react.vercel.app***

สำหรับใครที่อยากได้โค้ดเวอร์ชั่นเต็มสามารถกดดาวน์โหลดได้ที่ปุ่มด้านบนเลยครับเพื่อสนับสนุนกัน 🙏🏻

เรามีการทดสอบและใช้งาน LIFF ได้ทั้งบน iOS, Android, และเว็บไซต์

  • [x] Android

  • [x] IOS

  • [x] Mac


นอกจากนี้ หากต้องการใช้งานฟีเจอร์พิเศษหรือ setup อื่น ๆ คุณสามารถดูเอกสาร LIFF ได้ที่ เว็บไซต์ LIFF ซึ่งมีคำแนะนำและตัวอย่างการใช้งานที่ชัดเจนให้คุณได้เรียนรู้เพิ่มเติมได้ครับ!

ระบบจองห้อง/โต๊ะ PHP & MySQLi

ระบบจองห้อง, ระบบจัดการทรัพยากรสารสนเทศ

ระบบจองห้อง/โต๊ะ PHP & MySQLi

Nov 22, 2023

Web ระบบเบิก-จ่ายวัสดุ

ระบบเบิก-จ่ายวัสดุ อุปกรณ์และเครื่องเขียนสำนักงาน API PHP/MySQL

Web ระบบเบิก-จ่ายวัสดุ

Dec 5, 2023

เข้าสู่ระบบด้วย Credentials Provider In NextAuth.js Prisma EP.3

เข้าสู่ระบบโดยใช้ชื่อผู้ใช้และรหัสผ่าน ได้ง่ายๆ ด้วย provider credentials.

เข้าสู่ระบบด้วย Credentials Provider In NextAuth.js Prisma EP.3

Dec 6, 2023

How to install Prisma in Next.js 14

การติดตั้งและ setup โปรเจกต์ Next.js เพื่อใช้งานกับ Prisma อาจมีขั้นตอนหลายอย่างที่ต้องทำเพื่อให้โปรเจกต์สามารถเชื่อมต่อกับฐานข้อมูลและใช้ Prisma ได้อย่างถูกต้อง

How to install Prisma in Next.js 14

Dec 7, 2023

How to install Next.js 14 แบบมีรายละเอียด

พา setup โปรเจกต์ Next.js 14 เบื้องต้น

How to install Next.js 14  แบบมีรายละเอียด

Dec 7, 2023

[Free] Next.js Admin Dashboard Template with Tailwind CSS

Tailwind CSS-Powered Next.js Admin Dashboard Template

[Free] Next.js Admin Dashboard Template with Tailwind CSS

Dec 11, 2023

How to use CRUD with Prisma in Next.js

การใช้งาน CRUD (Create, Read, Update, Delete) กับ Prisma ใน Next.js

How to use CRUD with Prisma in Next.js

Dec 12, 2023

How to Install and using MAMP

ขั้นตอนในการติดตั้งและใช้งาน MAMP (Mac,Windows, Apache, MySQL, PHP)

How to Install and using MAMP

Dec 12, 2023

ระบบร้านอาหาร RESTFul API in Golang

Restaurant System API

ระบบร้านอาหาร  RESTFul API in Golang

Dec 18, 2023

สร้างตารางข้อมูล Excel โดย PhpSpreadsheet ด้วย PHP

สร้างตารางข้อมูลใน Excel โดยใช้ไลบรารี PhpSpreadsheet ซึ่งเป็นไลบรารีสำหรับจัดการไฟล์ Excel ด้วย PHP

สร้างตารางข้อมูล Excel โดย PhpSpreadsheet ด้วย PHP

Dec 21, 2023