Back to n8n Management Hub

LINE LIFF Web App – Complete Setup Guide

Build secure web forms with LINE authentication for n8n workflows
สร้างฟอร์มเว็บที่ปลอดภัยด้วยการยืนยันตัวตน LINE สำหรับเวิร์กโฟลว์ n8n

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

2. Create LINE Channel สร้าง LINE Channel

  1. Go to LINE Developers Console
    ไปที่ LINE Developers Console
  2. Create a new Provider
    สร้าง Provider ใหม่
  3. Create Channel → LINE Login
    สร้าง Channel → LINE Login
  4. Enable Web app in App types
    เปิดใช้งาน Web app ใน App types
  5. Save and note your Channel ID
    บันทึกและจดบันทึก Channel ID

3. Setup LIFF App ตั้งค่าแอป LIFF

  1. In your LINE Login channel, go to LIFF tab
    ใน LINE Login channel ไปที่แท็บ LIFF
  2. Click Add to create new LIFF app
    คลิก Add เพื่อสร้าง LIFF app ใหม่
  3. Configure:
    ตั้งค่า:
    • Size: Full
      ขนาด: Full
    • Endpoint URL: Your HTTPS page URL
      Endpoint URL: URL หน้าเว็บ HTTPS ของคุณ
    • Scopes: profile, openid
      Scopes: profile, openid
  4. Save and note your LIFF ID
    บันทึกและจดบันทึก LIFF ID
⚠️ Important: Endpoint URL must exactly match your hosted page URL!
⚠️ สำคัญ: Endpoint URL ต้องตรงกับ URL หน้าเว็บของคุณทุกตัว!

4. Create Your Web Page สร้างหน้าเว็บ

Basic HTML template:
แม่แบบ HTML พื้นฐาน:

<!DOCTYPE html>
<html>
<head>
  <title>My LIFF App</title>
</head>
<body>
  <div id="loading">Loading...</div>
  <div id="profile" style="display:none">
    <h2>Welcome!</h2>
    <img id="userPhoto" width="100">
    <p>Name: <span id="userName"></span></p>
    <button onclick="sendToN8N()">Send to n8n</button>
  </div>

  <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
  <script>
    const LIFF_ID = "YOUR_LIFF_ID_HERE";
    const WEBHOOK = "YOUR_N8N_WEBHOOK_URL";
    
    window.onload = async () => {
      try {
        await liff.init({ liffId: LIFF_ID });
        
        if (!liff.isLoggedIn()) {
          liff.login();
          return;
        }
        
        const profile = await liff.getProfile();
        document.getElementById('loading').style.display = 'none';
        document.getElementById('profile').style.display = 'block';
        document.getElementById('userPhoto').src = profile.pictureUrl;
        document.getElementById('userName').textContent = profile.displayName;
      } catch (error) {
        alert('LIFF init failed: ' + error.message);
      }
    };
    
    async function sendToN8N() {
      const profile = await liff.getProfile();
      const data = {
        user: { name: profile.displayName, id: profile.userId },
        token: liff.getIDToken()
      };
      
      fetch(WEBHOOK, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      }).then(() => alert('Sent to n8n!'));
    }
  </script>
</body>
</html>

5. Test Your Setup ทดสอบการตั้งค่า

  1. Upload HTML file to HTTPS hosting
    อัปโหลดไฟล์ HTML ไปยังโฮสติ้ง HTTPS
  2. Open LIFF URL: https://liff.line.me/YOUR_LIFF_ID
    เปิด LIFF URL: https://liff.line.me/YOUR_LIFF_ID
  3. Test login in LINE app and browser
    ทดสอบการล็อกอินในแอป LINE และเบราว์เซอร์
  4. Verify profile displays correctly
    ตรวจสอบว่าโปรไฟล์แสดงถูกต้อง

6. n8n Integration การเชื่อมต่อกับ n8n

n8n Function node code for token verification:
โค้ด n8n Function node สำหรับยืนยัน token:

const idToken = $json.token;

if (idToken) {
  const [header, payload, signature] = idToken.split('.');
  const userData = JSON.parse(Buffer.from(payload, 'base64').toString());
  
  // Check expiration
  if (userData.exp * 1000 < Date.now()) {
    throw new Error('Token expired');
  }
  
  // Verify channel ID
  if (userData.aud !== 'YOUR_CHANNEL_ID') {
    throw new Error('Invalid channel');
  }
  
  return {
    lineUserId: userData.sub,
    displayName: $json.user.name,
    verified: true
  };
}

7. Common Issues ปัญหาที่พบบ่อย

"LIFF init failed"
Check LIFF ID and endpoint URL match exactly
"LIFF init ล้มเหลว"
ตรวจสอบ LIFF ID และ endpoint URL ให้ตรงกันทุกตัวอักษร
"Can't get profile"
Ensure scopes include "profile" and "openid"
"ไม่สามารถดึงโปรไฟล์ได้"
ตรวจสอบว่า scopes มี "profile" และ "openid"
"Webhook not working"
Test webhook URL directly, check n8n is running
"Webhook ไม่ทำงาน"
ทดสอบ webhook URL โดยตรง ตรวจสอบว่า n8n รันอยู่

8. Production Checklist เช็คลิสต์การใช้งานจริง

🎉 You're Ready! / เรียบร้อยแล้ว!

Your LINE LIFF web app is set up and ready to collect authenticated user data for your n8n workflows.
แอป LINE LIFF ของคุณพร้อมแล้วสำหรับเก็บข้อมูลผู้ใช้ที่ยืนยันตัวตนแล้วสำหรับเวิร์กโฟลว์ n8n