ลองใช้ LINE LIFF v2 กับ Vue 3
หลังจากพยายาม google อยู่นาน เราก็ไม่สามารถหาคนที่เขียนให้ liff ให้มาต่อกับ vue 3 แบบ composition api เลย ในขณะที่ React มี react-liff-v2 แต่ก็เข้าใจได้เพราะว่า vue 3 ออกมาได้ไม่นาน (จริงๆ ก็ร่วมปีกว่าๆ ละนะ) คนที่สนใจใน liff ก็อาจจะไม่เยอะ
ที่ผมหาเจอก็จะมีแค่ blog ของ LINE engineer ซึ่งเป็นของ engineer ไต้หวัน คนไทยแบบผมก็แน่นอนคืออ่านไม่ออก แต่ก็ยังดีที่มี code ตัวอย่างให้ ซึ่งก็คือการ init กับตัวอย่าง feature ShareTargetPicker ซึ่งถ้าใครสนใจก็ตามไปอ่านได้ครับ เราอ่านแค่ code ก็น่าจะเข้าใจได้
ดังนั้นวิธีการเดียวที่จะทำได้ก็คือเราเขียน LIFF composition API ขึ้นมาเองคล้ายๆ กับ custom hook ของ React
Setting Project
ตัว package ที่เราจะใช้มี @line/liff
npm i @line/liffในตัว vue project ผมสร้าง directory ใน src ชื่อว่า hooks เอาไว้เก็บพวก hook ต่างๆ เช่น api.js firebase.js liff.js แต่จริงๆ ก็สุดแล้วแต่จะตั้งชื่อบางคนอาจจะตั้งว่า modules หรือ composeables ตาม nuxt style ก็ได้ จากนั้นผมก็สร้างไฟล์ชื่อว่า liff.js
mkdir hooks
touch liff.js
ในส่วนของ liff.js
ผมสร้าง useLiff ซึ่งรับค่า liffId โดยมี default เป็นค่าที่ set อยู่ใน dotenv liffId เอาไว้ใช้ init ตัว liffInstance ของเราขึ้นมา โดย init จะทำให้ LIFF SDK ของเราไปรับ access token กับ ID token มาจาก LINE platform ให้ หลังจากนั้นผม set ค่า liffInstance ของผมให้มีค่าเท่ากับ object LIFF ที่ init แล้วในบรรทัดที่ 10
หลังจากนั้นผม check สถานะการ login ของ LIFF app ผ่าน function isLoggedIn() ถ้าหากไม่ login ก็ redirect ไปที่ endpoint URL ที่เราตั้งเอาไว้กับ LINE Console หลังจากนั้นผม return ค่าออกไป 2 ตัวแปรคือ liff ซึ่งเป็น liffInstance เอาไว้ให้ component เอาไปใช้ และ error เอาไว้ทำ handle error ต่างๆ
โอเคตอนนี้เราได้ LIFF Composition API มาละ ทีนี้เราก็เอามันไปใช้งานใน component ต่างๆ ได้
import useLiff from "../hooks/liff";const {liff, error} = useLiff();
// ในกรณีที่อยาก pass liffId ไป
const {liff, error} = useLiff("abcdefg");
สมมุติเราอยากใช้ getProfile ของ LIFF SDK
const profile = ref(null);
const profile = ref(null);
profile.value = liff.value.getProfile()อันนี้เป็นการเขียน Composition API เบื้องต้นมากๆ จะสังเกตได้ว่าผม return liff ออกมาเป็น ref เวลาเราใช้ liff ก็ต้องมี .value ตามมาด้วยเสมอ กรณีที่เราอยากเอา .value ออกตอนนี้ผมยังหาวิธีทำไม่ได้ หากใครเป็นผู้รู้ด้าน Vue 3 Composition API รบกวน comment เพิ่มเติมแชร์ความรู้กันด้วยนะครับ 😊
