LINE LIFF คืออะไร: คู่มือสร้าง LIFF app พร้อม LINE Login

LIFF คือเหตุผลที่ลูกค้าแตะ “จอง” ในแชท LINE เลือกเวลา แล้วจองเสร็จโดยไม่ต้องพิมพ์ชื่อ เบอร์โทร หรือรหัสผ่าน หน้าที่ลูกค้าเห็นคือเว็บแอปธรรมดา LIFF ทำให้หน้านั้นทำงานใน LINE และรู้ว่าลูกค้าคือผู้ใช้ LINE คนไหน เมื่อลูกค้าอนุญาต

คู่มือนี้อธิบายว่า LINE LIFF คืออะไร ต่างจาก LINE MINI App อย่างไรในปี 2026 และมีตัวอย่างโค้ด LIFF กับ LINE Login ที่ทำเรื่องความปลอดภัยถูกต้อง เรารับทำ LIFF app สำหรับระบบจองคิว ระบบสมาชิก และการลงทะเบียน ขั้นตอนการจองของ FoxConnect ก็เป็นหนึ่งในนั้น (ดูกรณีศึกษา FoxConnect)

LINE LIFF คืออะไร

LIFF (LINE Front-end Framework) คือ JavaScript SDK ชื่อ @line/liff ร่วมกับการลงทะเบียนใน LINE Developers Console คุณลงทะเบียน URL ของเว็บแอป แล้วจะได้ LIFF ID และ LIFF URL (https://liff.line.me/<LIFF ID>) เมื่อลูกค้าเปิด URL นี้จากแชท ปุ่มในริชเมนู หรือ QR code LINE จะเปิดหน้าเว็บของคุณในเบราว์เซอร์ภายในแอป

เมื่อใช้ SDK หน้าเว็บจะ:

• อ่านโปรไฟล์ LINE ของลูกค้า (ชื่อที่แสดง รูป) และ ID token หลังลูกค้ากดยินยอม
• ส่งข้อความเข้าแชทที่ลูกค้าเปิดแอปมา
• เปิดตัวสแกน QR แชร์ให้เพื่อนด้วย share target picker และปิดหน้าต่างเมื่อเสร็จ
• ตรวจว่ากำลังเปิดใน LINE หรือในเบราว์เซอร์ภายนอก

ส่วนที่เหลือเลือกได้เอง จะใช้เฟรมเวิร์กหรือ backend อะไรก็ได้ LIFF จึงเหมาะกับงานเดียวที่ชัดเจน เช่น ฟอร์มจองคิว บัตรสมาชิกดิจิทัล หรือการลงทะเบียนรับประกันสินค้า

LIFF ต่างจาก LINE MINI App อย่างไร (2026)

LINE MINI App สร้างด้วย LIFF SDK ตัวเดียวกัน ความต่างเดิมอยู่ที่รูปแบบ MINI App คือบริการเต็มรูปแบบที่มีช่อง (channel) ของตัวเอง และเมื่อ LY Corporation ยืนยันแล้วจะได้เครื่องหมาย verified ค้นหาเจอผ่านการค้นหาใน LINE และขึ้นในส่วน “ใช้ล่าสุด” ของแท็บหน้าหลัก

ตอนนี้ LINE กำลังรวมสองอย่างเข้าด้วยกัน ตั้งแต่กุมภาพันธ์ 2025 LINE แนะนำให้สร้าง LIFF app ใหม่เป็น LINE MINI App และเอกสารของ LINE ระบุว่า LIFF จะถูกรวมเข้ากับแบรนด์ LINE MINI App มีบางอย่างที่ยังทำได้เฉพาะ LIFF แบบเดิม:

	LIFF app	LINE MINI App
SDK	@line/liff	@line/liff (โค้ดเดียวกัน)
ขนาดหน้าต่าง	Full, Tall หรือ Compact	Full เท่านั้น
จำนวนแอปต่อช่อง	หลายแอปในช่อง LINE Login เดียว	หนึ่งแอปต่อช่อง MINI App
ค้นหาใน LINE และเครื่องหมาย verified	ไม่มี	ได้หลังผ่านการยืนยัน
การตรวจสอบโดย LINE	ไม่ต้อง	ต้องผ่านเพื่อได้สถานะ verified

ถ้าเป็นบริการใหม่สำหรับลูกค้า เรามักเริ่มเป็น MINI App เลย เพราะถ้าย้ายทีหลังต้องสร้างช่องใหม่และเปลี่ยนลิงก์ทั้งหมด LIFF แบบเดิมยังเหมาะกับเครื่องมือภายในสำหรับพนักงาน หรือหน้าต่างครึ่งจอบนแชท กฎของ MINI App ในไทยอ่านได้ในLINE MINI App คืออะไร: กฎในประเทศไทยปี 2026

ตัวอย่างโค้ด LIFF กับ LINE Login

สร้างช่อง LINE Login (หรือช่อง MINI App) เพิ่ม LIFF app พร้อม URL ของหน้าเว็บ และเลือก scope openid กับ profile จากนั้นฝั่งเบราว์เซอร์:

npm install @line/liff

// app.js (เบราว์เซอร์)
import liff from '@line/liff';

await liff.init({ liffId: 'YOUR_LIFF_ID' });

if (!liff.isLoggedIn()) {
  // ใน LINE ลูกค้าล็อกอินอยู่แล้ว ในเบราว์เซอร์ภายนอกคำสั่งนี้จะเปิดหน้า LINE Login
  liff.login();
} else {
  // ใช้แสดงบนหน้าจอเท่านั้น: ชื่อและรูป
  const profile = await liff.getProfile();
  document.querySelector('#name').textContent = profile.displayName;

  // สำหรับเซิร์ฟเวอร์: ส่ง ID token ไปให้เซิร์ฟเวอร์ตรวจกับ LINE
  await fetch('/api/session', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ idToken: liff.getIDToken() }),
  });
}

ฝั่งเซิร์ฟเวอร์ (Node.js 22 ขึ้นไป, Express):

// server.mjs
import express from 'express';

const app = express();

app.post('/api/session', express.json(), async (req, res) => {
  // ถาม LINE ว่า token นี้ของจริง ยังไม่หมดอายุ และออกให้ช่องของเราหรือไม่
  const check = await fetch('https://api.line.me/oauth2/v2.1/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      id_token: req.body.idToken ?? '',
      client_id: process.env.LINE_LOGIN_CHANNEL_ID,
    }),
  });
  if (!check.ok) return res.sendStatus(401);

  const claims = await check.json();
  // claims.sub คือ LINE user ID ที่ผ่านการตรวจแล้ว ใช้ค้นหาหรือสร้างข้อมูลลูกค้า
  res.json({ lineUserId: claims.sub, name: claims.name });
});

app.listen(3000);

ความผิดพลาดที่ต้องหลีกเลี่ยง: เชื่อข้อมูลจากเบราว์เซอร์

บั๊กความปลอดภัยที่พบบ่อยใน LIFF app คือเซิร์ฟเวอร์เชื่อ user ID ที่หน้าเว็บส่งมา ทั้ง liff.getProfile(), liff.getDecodedIDToken() และ user ID ใน URL หรือใน body ล้วนมาจากเบราว์เซอร์ ใครก็แก้ได้ด้วย developer tools ถ้า API ส่ง “รายการจองของลูกค้าคนนี้” กลับไปตาม ID นั้น ลูกค้าคนหนึ่งก็ดูหรือยกเลิกการจองของอีกคนได้

กฎสั้น ๆ:

• การแสดงผล ใช้ getProfile() หรือ token ที่ถอดรหัสแล้วได้
• การระบุตัวตน ฝั่งเซิร์ฟเวอร์ต้องมาจาก token ที่เซิร์ฟเวอร์ตรวจแล้วเท่านั้น คือ ID token ผ่าน verify endpoint ข้างบน หรือ access token จาก liff.getAccessToken() ที่ตรวจกับ LINE ก่อนนำไปเรียก profile API
• อย่าถอดรหัส token ฝั่งเซิร์ฟเวอร์แล้วใช้เลยโดยไม่ตรวจลายเซ็น ผู้รับ (audience) และวันหมดอายุ verify endpoint ตรวจทั้งสามอย่างให้

อัปเดต SDK ให้ทันด้วย LINE ประกาศเลิกใช้ LIFF v2.28.0 เพราะปัญหาด้านความปลอดภัย และมีแผนจำกัด v2.20.0 ถึง v2.31.0 ราววันที่ 24 พฤศจิกายน 2026 จึงควรใช้ v2.31.1 ขึ้นไป (ล่าสุด ณ ตุลาคม 2026 คือ v2.31.2)

ขั้นต่อไป

ถ้า LIFF app ต้องส่งข้อความเตือนหรือยืนยัน คุณจะต้องใช้ Messaging API ด้วย อ่านได้ในคู่มือ LINE Messaging API ภาพรวมว่าเครื่องมือ LINE แบบไหนเหมาะกับคุณอยู่ในLINE OA, LIFF และ LINE MINI App ต่างกันอย่างไร ถ้าต้องการให้เราพัฒนา ดูบริการรับทำ LIFF app และบริการพัฒนาระบบ LINEทั้งหมด