LINE LIFF Web App – Complete Setup Guide

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

1. Prerequisites

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

HTTPS hosting: Vercel, Netlify, GitHub Pages
โฮสติ้ง HTTPS: Vercel, Netlify, GitHub Pages
LINE account: For accessing developers console
บัญชี LINE: สำหรับเข้าถึง developers console
Basic HTML knowledge: Understanding of HTML, JavaScript
ความรู้ HTML พื้นฐาน: ความเข้าใจ HTML, JavaScript
n8n instance: Running n8n with webhook capability (optional)
n8n instance: n8n ที่รันอยู่และมีความสามารถ webhook (ไม่บังคับ)

2. Create LINE Channel

2. สร้าง LINE Channel

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

3. Setup LIFF App

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

In your LINE Login channel, go to LIFF tab
ใน LINE Login channel ไปที่แท็บ LIFF
Click Add to create new LIFF app
คลิก Add เพื่อสร้าง LIFF app ใหม่
Configure: / ตั้งค่า:
- Size: Full / ขนาด: Full
- Endpoint URL: Your HTTPS page URL / Endpoint URL: URL หน้าเว็บ HTTPS ของคุณ
- Scopes: profile, openid / Scopes: profile, openid
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

4. สร้างหน้าเว็บ

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

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

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

6. n8n Integration

6. การเชื่อมต่อกับ 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

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

"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

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

✅ HTTPS certificate valid / ใบรับรอง HTTPS ใช้งานได้
✅ Privacy policy URL set / ตั้งค่า URL นโยบายความเป็นส่วนตัวแล้ว
✅ Server-side token verification / ยืนยัน token ฝั่งเซิร์ฟเวอร์แล้ว
✅ Error handling implemented / จัดการข้อผิดพลาดแล้ว
✅ Tested on multiple devices / ทดสอบบนหลายอุปกรณ์แล้ว

🎉 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

Quick Reference

Essential URLs:

LINE Developers Console: https://developers.line.biz/
LIFF App URL: https://liff.line.me/YOUR_LIFF_ID
LIFF SDK: https://static.line-scdn.net/liff/edge/2/sdk.js

Configuration Summary:

App Type: Web App
Size: Full
Scopes: profile, openid
Endpoint: Your HTTPS URL

Required IDs to Save:

Channel ID: For token verification
LIFF ID: For app initialization

HTML Template Variables:

const LIFF_ID = "YOUR_LIFF_ID_HERE";
const WEBHOOK = "YOUR_N8N_WEBHOOK_URL";

n8n Token Verification:

// Replace YOUR_CHANNEL_ID with your actual Channel ID
if (userData.aud !== 'YOUR_CHANNEL_ID') {
  throw new Error('Invalid channel');
}

Need help? Contact us at ShantiLink.com 💬

Canva + n8n AWS S3