เข้าสู่ระบบด้วย LINE
เชื่อมต่อ LINE MINI App ของคุณเอง เพื่อให้ลูกค้าเข้าสู่ระบบอัตโนมัติภายใน LINE และ Official Account ของคุณส่งข้อความหาลูกค้าได้
โดยค่าเริ่มต้น ลูกค้าที่เข้าสู่ระบบแอปของคุณด้วย LINE จะได้ LINE user ID จาก LINE provider ของ Stardeck LINE ให้ ID ที่ต่างกันแก่แต่ละคนภายใต้แต่ละ provider ดังนั้น Official Account ของคุณจึงไม่รู้จัก ID นั้นและส่งข้อความหาลูกค้าคนนั้นไม่ได้
เพื่อแก้ปัญหานี้ ให้สร้าง LINE MINI App ใน LINE provider เดียวกับ Official Account ของคุณ แล้วเชื่อมต่อกับแอปของคุณ ลูกค้าที่เปิดแอปของคุณภายใน LINE จะเข้าสู่ระบบด้วย ID ที่บัญชีของคุณส่งข้อความถึงได้ ลูกค้าที่มีบัญชีอยู่แล้วก็ยังใช้บัญชีเดิม
การตั้งค่าใช้การคัดลอกหนึ่งครั้ง การวางหนึ่งครั้ง และการสแกนหนึ่งครั้งบนโทรศัพท์ คุณไม่ต้องแก้แอปของคุณ
ก่อนเริ่ม
- LINE Official Account ที่เชื่อมต่อกับแอปแล้ว ต้องเป็นบัญชีที่แอปใช้ส่งข้อความ (บัญชีเริ่มต้น หากแอปมีมากกว่าหนึ่งบัญชี) ดู เชื่อมต่อ LINE
- เปิด LINE เป็นวิธีเข้าสู่ระบบ ของแอป ดู การยืนยันตัวตนของผู้ใช้
- แอปแบบสาธารณะ แอปภายในและพื้นที่ใช้งานภายในเปิดใน LINE ไม่ได้ เฉพาะแอปสาธารณะเท่านั้นที่ใช้ MINI App ได้
- แพลตฟอร์มเวอร์ชันล่าสุด หากแอปของคุณล้าหลัง การ์ดตั้งค่าจะขอให้คุณอัปเดตแอปและ deploy ขึ้น production ก่อน
- ประเทศที่ LINE เปิดให้บริการ MINI App ได้แก่ ญี่ปุ่น ไทย และไต้หวัน และประเทศของบริษัทคุณต้องตรงกัน
- โดเมนของคุณเอง (custom domain) หากวางแผนจะใช้ จนกว่า LINE จะตรวจสอบ MINI App ของคุณ ลูกค้าจะเห็นที่อยู่ของแอปในส่วนหัว โดเมนของคุณเองจึงดูดีกว่าโดเมนเริ่มต้น หากเปลี่ยนโดเมนภายหลัง ให้อัปเดตที่อยู่ใน LINE console ด้วย ดู Custom domains
เชื่อมต่อ MINI App ของคุณ
คุณจะพบการตั้งค่าได้ที่แท็บ Settings → Authentication ของแอป ในการ์ดชื่อ Open in LINE การ์ดนี้จะปรากฏเมื่อเปิด LINE เป็นวิธีเข้าสู่ระบบเท่านั้น
สร้าง MINI App channel ใน LINE
ใน LINE Developers Console เปิด provider เดียวกับ Official Account ของคุณ แล้วสร้าง LINE MINI App channel LINE ไม่ให้ย้าย channel ไป provider อื่นภายหลัง ดังนั้นหากเลือกผิด คุณต้องสร้าง channel ใหม่
วางที่อยู่ของแอปลงใน LINE
คัดลอก Endpoint URL จากการ์ด Open in LINE ใน console เปิด Web app settings ของ MINI App แล้ววางลงใน Published หาก MINI App ของคุณยังไม่ผ่านการตรวจสอบ ให้วางลงใน Developing ด้วย
ตั้งค่า scope และเชื่อมบัญชีของคุณ
ตั้งค่า scope เป็น openid และ profile เชื่อม Official Account ของคุณ
และเปิดตัวเลือกเพิ่มเพื่อน เพื่อให้ลูกค้าเพิ่มบัญชีของคุณได้ตอนเปิดแอปครั้งแรก
วาง LIFF ID ลงใน Stardeck
คัดลอก LIFF ID ที่ Published จาก console หน้าตาประมาณ 1234567890-AbCdEfGh
วางลงในการ์ดแล้วคลิก Save
สแกน QR code บนโทรศัพท์
การ์ดแสดง QR code และสถานะที่รอดำเนินการ ให้เพิ่ม Official Account ของคุณเป็นเพื่อนบนโทรศัพท์ก่อน แล้วจึงสแกนโค้ด การตั้งค่าเสร็จสมบูรณ์เมื่อคุณได้รับข้อความ LINE sign-in connected จากบัญชีของคุณ และสถานะเปลี่ยนจาก Pending เป็น Live
หากคุณมีพื้นที่ใช้งานสาธารณะมากกว่าหนึ่งแห่ง แต่ละแห่งจะมีส่วนของตัวเองในการ์ดและต้องมี MINI App ของตัวเอง
coding agent ของคุณทำฝั่ง Stardeck ได้ผ่าน MCP server: มันอ่าน endpoint URL ของแต่ละพื้นที่ใช้งาน และบันทึก LIFF ID ที่คุณให้ หลังจากคุณยืนยัน ส่วนขั้นตอนใน LINE console และการสแกน QR ยังเป็นหน้าที่ของคุณ
ค้างที่ Pending? ตรวจว่าโทรศัพท์เพิ่ม (และไม่ได้บล็อก) Official Account ของคุณแล้ว และ MINI App อยู่ใน LINE provider เดียวกับบัญชี
ใช้ลิงก์ MINI App ใน rich menu
เมื่อสถานะเป็น Live การ์ดจะแสดงลิงก์รูปแบบ https://miniapp.line.me/{liffId} เพิ่ม path เพื่อเปิดหน้าที่ต้องการ เช่น /account แล้วคัดลอกผลลัพธ์ไปใส่ในปุ่ม rich menu ของคุณ
ลิงก์นี้ใช้แทนลิงก์ portal แบบเก่าจากการยืนยันตัวตนของผู้ใช้ ลิงก์เก่ายังใช้งานได้เป็นทางสำรองสำหรับผู้ที่ใช้เบราว์เซอร์ทั่วไป และการ์ด LINE portal link แสดงลิงก์นี้ใต้ Browser fallback
ปุ่ม LINE ในหน้าเข้าสู่ระบบของแอปก็จะผ่าน MINI App เช่นกันเมื่อเชื่อมต่อแล้ว
MINI App ที่ยังไม่ผ่านการตรวจสอบจะแสดงหน้ายินยอมของ LINE เมื่อเปิดครั้งแรก ลูกค้าที่ยังไม่ได้เพิ่มหรือบล็อกบัญชีของคุณจะยังไม่ได้รับข้อความ
สำหรับผู้สร้างแอป
คุณไม่ต้องเขียนโค้ดสำหรับการเข้าสู่ระบบ ในแอปของคุณ session.user.lineUserId เก็บ LINE user ID จาก provider ของคุณเอง และเป็น ID ที่ Official Account ของคุณใช้ส่งข้อความ หากแอปต้องการฟีเจอร์ LINE เช่นการปิดหน้าต่างหรือการแชร์ ให้ขอจาก coding agent ของคุณ มันใช้ hook useLiff() จาก authentication package (@stardeck-customer-apps/project-auth) ซึ่ง SKILL.md ของ package มีเอกสารไว้
อย่าเชื่อ LINE user ID ที่เบราว์เซอร์ส่งมายัง backend ของคุณ เพราะใครก็ปลอมได้ ให้ใช้ ID บน session ที่เข้าสู่ระบบแล้วแทน
แอปของคุณรู้ได้ว่าลูกค้าเพิ่มบัญชีของคุณหรือยัง จึงแสดงข้อความชวนปิดได้ เช่น "เพิ่มเราบน LINE เพื่อรับข่าวสาร" โดยค่าเริ่มต้นแอปไม่แสดง หากต้องการเพิ่ม ให้ขอ coding agent ของคุณ หรืออธิบายในแท็บ Build ของแอป:
If someone opens the app in LINE and hasn't added our account yet, show a small dismissible prompt to add us