เว็บกับแชทคนละโดเมน ข้อมูลลูกค้าเลยขาดตอน: แก้ด้วย LIFF App ให้เป็นสะพานเดียวกัน
สรุปสั้น ๆ
ปัญหา cross-domain เกิดเพราะเบราว์เซอร์ไม่ยอมส่งคุกกี้ข้ามโดเมนให้กันเอง LIFF app แก้ปัญหานี้ได้เพราะมันทำงานอยู่ภายในแอป LINE โดยตรง ทำให้ส่งข้อมูลผู้ใช้ระหว่างเว็บกับแชทได้โดยไม่ต้องพึ่งคุกกี้ข้ามโดเมน
ทีมของร้านเฟอร์นิเจอร์สั่งทำแห่งหนึ่งเจอปัญหาแปลก ๆ คือลูกค้าเข้าเว็บมาเลือกแบบโซฟา กดปุ่ม 'ให้ทีมงานติดต่อกลับทาง LINE' แล้วระบบก็พาไปเปิด LINE OA จริง แต่พอแอดมินตอบกลับ กลับไม่รู้เลยว่าลูกค้าคนนี้เลือกแบบไหนไว้ ต้องถามซ้ำใหม่ตั้งแต่ต้น ทั้งที่เพิ่งกดมาจากหน้าเว็บเมื่อสิบวินาทีก่อน
ต้นตอของปัญหานี้คือเรื่อง cross-domain แบบคลาสสิก เว็บสั่งซื้อ (เช่น sofa-custom.com) กับ LINE OA เป็นคนละระบบคนละโดเมนกันโดยสิ้นเชิง เบราว์เซอร์ถูกออกแบบมาให้ปกป้องความเป็นส่วนตัวด้วยการไม่ยอมให้คุกกี้หรือข้อมูล session ของโดเมนหนึ่งไหลไปหาอีกโดเมนหนึ่งได้ง่าย ๆ พอกดสลับไปเปิดแอป LINE ข้อมูลที่เว็บเก็บไว้ก็ถูกตัดขาดทันที
ทางแก้ที่หลายทีมเทคนิคเลือกใช้คือ LIFF (LINE Front-end Framework) ซึ่งเป็นเว็บแอปที่รันอยู่ 'ข้างใน' แอป LINE โดยตรง ทำให้ไม่ต้องข้ามโดเมนแบบเดิมอีกต่อไป บทความนี้จะอธิบายว่ามันทำงานยังไงและควรวางระบบยังไงให้ใช้งานได้จริง
LIFF คืออะไร ทำไมถึงแก้ปัญหา cross-domain ได้
LIFF คือหน้าเว็บธรรมดาที่เขียนด้วย HTML/JS เหมือนเว็บทั่วไป แต่ถูกเปิดผ่าน SDK พิเศษของ LINE ทำให้มันรู้จักตัวตนของผู้ใช้ (LINE UID) ได้ทันทีโดยไม่ต้องให้ผู้ใช้ล็อกอินซ้ำ และสำคัญที่สุดคือมันสามารถส่งข้อความเข้าไปในห้องแชทของ LINE OA ได้โดยตรงผ่านฟังก์ชัน sendMessages
จุดต่างจากเว็บทั่วไปคือ LIFF ไม่ต้องพึ่งคุกกี้ข้ามโดเมนเลย เพราะมันรับรู้ตัวตนผู้ใช้ผ่าน LIFF SDK ที่ผูกอยู่กับบัญชี LINE ของ OA นั้นโดยตรง พูดง่าย ๆ คือแทนที่จะพยายามส่งข้อมูลข้ามโดเมน เราเปลี่ยนวิธีคิดเป็น 'ให้หน้าที่ผู้ใช้กรอกข้อมูลนั้นรันอยู่ในระบบนิเวศเดียวกับ LINE ไปเลย'
โครงสร้างที่ใช้งานได้จริง 3 ชิ้นส่วน
| ชิ้นส่วน | หน้าที่ | ตัวอย่าง |
|---|---|---|
| ปุ่มบนเว็บหลัก | ส่งต่อพารามิเตอร์สำคัญไปยัง LIFF URL | แนบรหัสสินค้าที่เลือกไว้ต่อท้ายลิงก์ |
| LIFF app | ดึง LINE UID + รับพารามิเตอร์จากเว็บ แล้วยิงเก็บลงฐานข้อมูลกลาง | หน้ายืนยันข้อมูลสั้น ๆ ก่อนเข้าแชท |
| ฐานข้อมูลกลาง | ผูก LINE UID กับข้อมูลที่มาจากเว็บไว้ให้แอดมินเรียกดู | แสดงในหน้าแชทว่าลูกค้าคนนี้เลือกแบบไหนไว้ |
ขั้นตอนคร่าว ๆ ในการวางระบบ
- สร้าง LIFF app ผูกกับ LINE OA ของธุรกิจ (ทำผ่าน LINE Developers Console) แล้วได้ LIFF URL มาหนึ่งชุด
- ปรับปุ่มบนเว็บหลักให้ลิงก์ไปที่ LIFF URL แทนลิงก์ OA ตรง ๆ พร้อมแนบพารามิเตอร์ที่อยากส่งต่อ เช่น รหัสสินค้า หรือรหัสตะกร้าที่ค้างอยู่
- ใน LIFF app เขียนสคริปต์เล็ก ๆ ให้ดึง LINE UID ผ่าน liff.getProfile() แล้วบันทึกคู่กับพารามิเตอร์ที่รับมาไว้ในฐานข้อมูลกลาง
- ให้ LIFF app เด้งเข้าห้องแชทต่อทันทีหลังบันทึกเสร็จ (ผู้ใช้แทบไม่รู้สึกว่ามีขั้นตอนเพิ่ม เพราะใช้เวลาไม่ถึงวินาที)
- ฝั่งแอดมิน ให้ระบบดึงข้อมูลจากฐานข้อมูลกลางมาแสดงข้าง ๆ ห้องแชท เพื่อให้เห็นทันทีว่าคนนี้เข้ามาจากไหนสนใจอะไร ไม่ต้องถามซ้ำ
ต่อยอดให้ลึกกว่าการส่งแค่รหัสสินค้า
พอมี LIFF เป็นสะพานแล้ว มันไม่ได้ใช้ได้แค่ส่งชื่อสินค้า สามารถต่อยอดไปถึงการส่ง ค่า UTM เต็มชุด จากต้นทางโฆษณาให้ติดตามมาถึงห้องแชท หรือส่งข้อมูลตะกร้าที่ลูกค้ากดค้างไว้ก่อนออกจากเว็บ เพื่อให้แอดมินตอบคำถามได้ตรงจุดทันทีโดยไม่ต้องรอลูกค้าอธิบายใหม่
ธุรกิจที่มีทีมหลายสาขาหรือหลายแบรนด์ที่ใช้ LINE OA หลายบัญชี ก็ใช้หลักการเดียวกันนี้ทำ LIFF แยกตามแบรนด์ เพื่อให้แยกข้อมูลของแต่ละบัญชีได้ชัดเจนไม่ปนกัน
สรุป
ปัญหา cross-domain ไม่ใช่เรื่องที่แก้ด้วยการพยายามส่งคุกกี้ข้ามโดเมนให้ได้ เพราะเบราว์เซอร์ยุคใหม่บล็อกพฤติกรรมแบบนั้นเข้มขึ้นเรื่อย ๆ ทางที่ยั่งยืนกว่าคือเปลี่ยนวิธีคิด ให้ข้อมูลสำคัญไหลผ่านช่องทางที่ LINE รองรับโดยตรงอย่าง LIFF แทน
ร้านเฟอร์นิเจอร์ที่เล่าไว้ตอนต้น หลังวางระบบ LIFF เสร็จ แอดมินไม่ต้องถามซ้ำว่าลูกค้าสนใจแบบไหนอีกแล้ว เวลาปิดการขายเฉลี่ยต่อเคสลดลงเพราะไม่มีขั้นตอนถามซ้ำที่ทำให้ลูกค้าเสียความอยากไปกลางทาง
- cross-domain พังเพราะเบราว์เซอร์บล็อกคุกกี้ข้ามโดเมน ไม่ใช่เพราะระบบตั้งค่าผิด
- LIFF ทำงานในระบบนิเวศ LINE โดยตรง จึงไม่ต้องพึ่งคุกกี้ข้ามโดเมนเลย
- ต่อยอดได้ถึงขั้นส่ง UTM และข้อมูลตะกร้าสินค้าให้แอดมินเห็นก่อนเริ่มคุย
คำถามที่พบบ่อย
LIFF ต้องมีนักพัฒนาเว็บทำเองไหม
ส่วนใหญ่ต้องมีคนที่เขียน JavaScript พื้นฐานได้ เพราะต้องต่อกับ LIFF SDK และฐานข้อมูล แต่โครงสร้างไม่ซับซ้อนเท่าการทำแอปมือถือเต็มรูปแบบ ใช้เวลาวางระบบตั้งต้นราวหนึ่งถึงสองสัปดาห์
ลูกค้าต้องติดตั้งอะไรเพิ่มไหม
ไม่ต้อง LIFF ทำงานผ่านเบราว์เซอร์ในตัวของแอป LINE อยู่แล้ว ลูกค้าแค่กดลิงก์แล้วมันเปิดขึ้นมาเหมือนหน้าเว็บทั่วไป ไม่มีขั้นตอนติดตั้งเพิ่ม
ถ้าลูกค้ายังไม่เคยเพิ่มเพื่อน LINE OA จะใช้ LIFF ได้ไหม
ได้ LIFF สามารถทำงานได้แม้ยังไม่ได้เพิ่มเพื่อน แต่ถ้าต้องการส่งข้อความเข้าห้องแชทอัตโนมัติ ผู้ใช้ต้องเพิ่มเพื่อนก่อนหรือระหว่างขั้นตอนนั้น
LIFF ต่างจากการฝัง LINE Login บนเว็บปกติยังไง
LINE Login ใช้ยืนยันตัวตนบนเว็บทั่วไปที่อยู่นอกแอป LINE ส่วน LIFF คือหน้าเว็บที่รันอยู่ในแอป LINE เลย ทำให้เชื่อมต่อกับฟีเจอร์แชทและโปรไฟล์ได้ลึกกว่า
ข้อมูลที่ส่งผ่าน LIFF ปลอดภัยแค่ไหน
ควรส่งผ่าน HTTPS เสมอและตรวจสอบ ID token ที่ LIFF SDK ออกให้ ก่อนบันทึกข้อมูลลงฐานข้อมูล เพื่อป้องกันการปลอมแปลงคำขอจากภายนอก
ถ้าไม่มีเว็บหลักเลย ใช้แค่ LINE OA อย่างเดียว จำเป็นต้องทำ LIFF ไหม
ถ้าธุรกิจไม่มีเว็บภายนอกที่ต้องส่งข้อมูลข้ามมา อาจไม่จำเป็นต้องทำ LIFF ในตอนแรก แต่ถ้ามีแผนทำหน้าแลนดิ้งเพจหรือระบบสั่งซื้อแยกในอนาคต ควรวางโครงสร้างรองรับไว้ตั้งแต่ต้น
บทความที่เกี่ยวข้อง
