LINE Front-end Framework (LIFF) คือ แพลตฟอร์มสำหรับเว็บแอปที่จัดทำโดย LY Corporation เป็นเครื่องมือที่ช่วยให้เราสร้างหน้าเว็บที่สามารถเปิดและใช้งานได้ภายในแอป LINE โดยตรง เหมือนสร้างเว็บแอปที่แทรกอยู่ในแชทของลูกค้า ทำให้เราดึงข้อมูลผู้ใช้จาก LINE ได้ เช่น ชื่อ รูป และไอดี โดยไม่ต้องให้ลูกค้า login ใหม่ เหมาะมากกับระบบสะสมแต้ม สมัครสมาชิก หรือแลกของรางวัลผ่าน LINE
ขั้นตอนการสร้างและตั้งค่าใน Channel
1. สร้าง Channel
เข้าไปที่ https://developers.line.biz/console เพื่อสร้าง Channel โดยต้องกำหนด type เป็น LINE Login กรอกข้อมูลให้ครบถ้วน
- Microsoft Office Knowledge & line & Etc-1.png (80.71 KiB) Viewed 1840 times
2. เพิ่ม LIFF สำหรับใช้กับ Channel
หลังจากสร้าง Channel ของ LINE Login ให้เข้าไปที่แท็บ LIFF และคลิกปุ่ม Add
- Microsoft Office Knowledge & line & Etc-1.png (121.21 KiB) Viewed 1840 times
3. ตั้งค่าข้อมูล LIFF
ในหน้านี้ให้กรอกรายละเอียดสำหรับตัว LIFF และกำหนด URL ของ Web ที่เชื่อมต่อ (ต้องเป็น https://)
4. เสร็จเรียบร้อย
สามารถนำ Link ที่ได้ไปใช้งานต่อ อาจจะส่งให้ลูกค้า หรือ ทำปุ่มกดจากระบบอื่นได้
- Microsoft Office Knowledge & line & Etc-1.png (110.77 KiB) Viewed 1840 times
การสร้างหน้าจอและดึงข้อมูลจาก LINE
โดยปกติในเอกสารของ LINE จะแนะนำให้ใช้ Node.js ในการพัฒนา https://developers.line.biz/en/docs/lif ... -liff-app/
แต่ในตัวอย่างนี้จะใช้ LIFF SDK ดึงผ่าน CDN แทน ตอนนี้เป็นเวอร์ชั่น 2.26.0 https://linedevth.line.me/th/knowledge-api/liff-2-26-0
ตัวอย่างโค้ด อย่าลืมแก้ไข liffId ให้ตรงกับที่สร้างไว้
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LIFF Basic</title>
<script src="https://static.line-scdn.net/liff/edge/versions/2.26.0/sdk.js"></script>
<style>
body {
font-family: sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>สวัสดีจาก LIFF</h1>
<p id="status">กำลังโหลด...</p>
<button onclick="logout()">ออกจากระบบ</button>
<script>
async function main() {
try {
await liff.init({
liffId: 'xxxxxxxxxxxxxxxxxxxxxxx' // ใส่ LIFF ID ของคุณที่นี่
});
if (!liff.isLoggedIn()) {
liff.login();
return;
}
const profile = await liff.getProfile();
document.getElementById("status").innerText =
`ยินดีต้อนรับคุณ ${profile.displayName}`;
} catch (err) {
document.getElementById("status").innerText = "เกิดข้อผิดพลาด: " + err;
}
}
function logout() {
liff.logout();
location.reload();
}
main();
</script>
</body>
</html>ทดสอบเข้า Link ของ LIFF ผ่านมือถือ
หน้าจอแรกที่เจอ ระบบจะขอสิทธิ์เพื่อเชื่อมต่อข้อมูลก่อน ส่วนนี้จะเหมือนให้ผู้ใช้เข้าสู่ระบบผ่านไลน์