สรุปบทเรียนการสร้าง LIFF จาก LINE x Skooldio [PART 3]

เดินทางจนมาถึงพาร์ทสุดท้ายแล้ว ในพาร์ทนี้เป็นโบนัสที่ทาง LINE Developer Thailand เขารวบรวมปัญหาที่เจอ พร้อมวิธีแก้มาให้กัน

OUTLINE

• พาร์ทที่ 1
  — รีวิวปัญหาที่เจอตอนเรียน
  — บทเรียนที่ 1: บทเกริ่นนำ
  — บทเรียนที่ 2: สิ่งที่ต้องมีในการสร้าง LIFF
• พาร์ทที่ 2
  — บทเรียนที่ 3: สร้าง LIFF App ใน LINE
• พาร์ทที่ 3
  — บทเรียนที่ 4: ฺTricks and tips for happy coding

บทเรียนที่ 4: Tricks and tips for happy coding

1. The right way to do LIFF Login in external browser

เริ่มมาจากคำถามที่ว่าเราจะ liff.int() ได้แ่ค่ endpoint URL ที่เราเซ็ทไว้ใน console ลิ้งก์เดียวหรือป่าว คำตอบคือเราสามารถ init ได้ทุกที่เลย สำหรับการเปิดผ่าน external browser ก็ทำได้เหมือนกัน แต่อาจต้องใช้ตัวช่วยจาก query param ใน URL โดยในคอร์สจะใช้ index.html จากในโฟลเดอร์ path ที่เอาไว้เป็น html ของอีกหน้าหนึ่งของเว็บเรา HTML ส่วนใหญ่ก็คล้าย ๆ หน้า home ของเราเลย จุดที่เพิ่มขึ้นมาก็คือ พารามิเตอร์ของ liff.login() ที่เพิ่ม redirectUri เข้าไปสำหรับการทำให้วิ่งมาแสดงหน้าเพจที่เรากำหนดไว้ในพารามิเตอร์ แทนที่จะแสดงหน้า root หน้าแรกตามค่า default

อีกขั้นตอนหนึ่งถัดจากโค๊ด คือเราต้องเอา redirect URI นี้ไปบอกใน console ตรง Callback URL ด้วย ซึ่งช่องตรงนี้สามารถใส่ได้มากกว่า 1 ลิ้งก์ โดยการเพิ่มไปลิ้งก์ละบรรทัดได้เรื่อย ๆ เท่านี้เราก็สามารถ login จากหน้าไหนของเพจได้แล้ว

2. Making sure LIFF app is ready

ด้วยความที่ โค๊ดแต่ละบรรทัดของ JS มันทำงานไปพร้อม ๆ กัน เราเลยควรจะต้องเช็คให้แน่ใจก่อนว่า liff.init() มันจัดการเสร็จเรียบร้อย ก่อนที่จะไปใช้ฟังก์ชั่นอื่น ๆ ซึ่งฟังก์ชั่นที่จะมาช่วยเราก็คือ liff.ready

3. Debugging your LIFF app

นักพัฒนาหลายคนถามหาถึงวิธีการ debug ใน LIFF ทาง LINE จึงขอนำเสนอ Vconsole() ซึ่งทำงานคล้าย developer tool ใน browser เลย วิธีติดตั้งมีแค่ไปอัพโหลดไฟล์ vconsole.min.js มาแล้วประกาศตัวแปร vConsole = new Vconsole() ใน index.html ของเรา (ก็มีเตรียมไว้ให้ใน source code แล้ว ไป uncomment อย่างเดียว)

4. Avoid LIFF Caching

ในระหว่างเรียน หลายคนอาจจะเจอปัญหาเวลา deploy โค๊ดใหม่ไปแล้ว แต่พอไปเปิดใน LINE กลับไม่แสดงเหมือนโค๊ดใหม่ที่เราแก้ อาการนี้ คุณหมอเรียกว่า ติด cache ซึ่งมักจะเกิดขึ้นจากการ import CSS หรือ JS file เข้ามาที่ html คุณตี๋เลยนำเสนอวิธีแก้มาให้ 2 วิธี

1. การเขียน CSS ด้วย JS ใน HTML แล้วเติม ?cache={timestamp} ต่อท้าย href แทนการ import ใน HTML เพื่อให้ไฟล์มันใหม่อยู่เสมอ แต่เวลาเอาไปใช้จริง ควรใช้การ import แบบเดิม

2. การเติม query string ใน endpoint URL ในหน้า console วนไปเรื่อย ๆ ให้มันไม่เหมือนเดิมก็เป็นอีกวิธีหนึ่งถ้าแก้ในโค๊ดอย่างวิธีที่ 1 แล้วยังไม่หาย

5. จัดการ Back-end เพิ่มความปลอดภัย

1. [Back-end] Verifying Access Token and Channel ID
   ใช้ access token ตรวจว่า request ที่เข้ามาหลังบ้านถูกปลอมหรือไม่
2. [Back-end] Getting User Profile by Access Token
   ถึงแม้ LIFF จะดึง profile ของผู้ใช้ได้ แต่การส่งกลับมาที่ back-end อาจจะไม่ปลอดภัย การดึง profile ด้วย API จากหลังบ้านจะปลอดภัยกว่า
3. [Back-end] Revoke Access Token
   บางกรณีเราอาจจะอยาก revoke token เอง ไม่ทิ้งไว้ เพื่อป้องกันผู้ไม่หวังดีมาขโมย access token เราไปใช้ API ได้

จบลงแล้วกับมหากาพย์ LINE Front-end Framework หรือ LIFF (ณ ปัจจุบัน) จริง ๆ ในคอร์สยังมีบทเรียนที่กำลังจะมาเพิ่มอี๊ก ใครอยากเริ่มต้นเรียนรู้จากศูนย์ ขอบอกเลยว่าเหมาะมาก ๆ แต่ถ้ามีพื้นฐาน HTML กับ Javascript ก็จะดีเลิศ เอาไปต่อยอดงานต่าง ๆ ได้แน่นอน ใครสนใจเรียนจากคอร์สนี้ หรือมีจุดไหนที่งงกับสรุปเรา ตามเข้าไปเรียนได้ที่ Skooldio ในลิ้งก์ด้านล่างนี้เลย

Getting Started with LIFF Development - เรียนรู้การพัฒนาแอปพลิเคชันด้วย LINE Front-end Framework |…