LINE Front-end Framework (LIFF) คือ แพลตฟอร์มสำหรับเว็บแอปที่จัดทำโดย LY Corporation เป็นเครื่องมือที่ช่วยให้เราสร้างหน้าเว็บที่สามารถเปิดและใช้งานได้ภายในแอป LINE โดยตรง เหมือนสร้างเว็บแอปที่แทรกอยู่ในแชทของลูกค้า ทำให้เราดึงข้อมูลผู้ใช้จาก LINE ได้ เช่น ชื่อ รูป และไอดี โดยไม่ต้องให้ลูกค้า login ใหม่ เหมาะมากกับระบบสะสมแต้ม สมัครสมาชิก หรือแลกของรางวัลผ่าน LINE
ขั้นตอนการสร้างและตั้งค่าใน Channel
1. สร้าง Channel
เข้าไปที่ https://developers.line.biz/console เพื่อสร้าง Channel โดยต้องกำหนด type เป็น LINE Login กรอกข้อมูลให้ครบถ้วน
2. เพิ่ม LIFF สำหรับใช้กับ Channel
หลังจากสร้าง Channel ของ LINE Login ให้เข้าไปที่แท็บ LIFF และคลิกปุ่ม Add
3. ตั้งค่าข้อมูล LIFF
ในหน้านี้ให้กรอกรายละเอียดสำหรับตัว LIFF และกำหนด URL ของ Web ที่เชื่อมต่อ (ต้องเป็น https://)
4. เสร็จเรียบร้อย
สามารถนำ Link ที่ได้ไปใช้งานต่อ อาจจะส่งให้ลูกค้า หรือ ทำปุ่มกดจากระบบอื่นได้
การสร้างหน้าจอและดึงข้อมูลจาก 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 ผ่านมือถือ
หน้าจอแรกที่เจอ ระบบจะขอสิทธิ์เพื่อเชื่อมต่อข้อมูลก่อน ส่วนนี้จะเหมือนให้ผู้ใช้เข้าสู่ระบบผ่านไลน์