LINE Integration

ภาพรวม

Ocriva เชื่อมต่อกับ LINE — แอปพลิเคชันส่งข้อความที่ได้รับความนิยมสูงสุดในประเทศไทย การเชื่อมต่อครอบคลุม 3 ฟีเจอร์หลักที่ทำงานร่วมกันเพื่อให้ประสบการณ์ประมวลผลเอกสารบนมือถือที่ราบรื่น:

1. LINE Login — ลงชื่อเข้าใช้ Ocriva ด้วยบัญชี LINE
2. LIFF Scanner — สแกนและอัปโหลดเอกสารโดยตรงจากกล้องในแอป LINE
3. Rich Menu — เมนู Chatbot สำหรับเข้าถึงฟีเจอร์ Ocriva ได้ทันที

---

LINE Login

LINE Login ช่วยให้ผู้ใช้ลงชื่อเข้าใช้ Ocriva ด้วยบัญชี LINE ที่มีอยู่แล้ว โดยไม่ต้องสร้างรหัสผ่านใหม่หรือสร้างบัญชีแยกต่างหาก

ขั้นตอนการทำงาน

1. คลิก Sign in with LINE ในหน้าล็อกอิน Ocriva
2. ระบบเปลี่ยนเส้นทางไปยังหน้าอนุมัติสิทธิ์ของ LINE (https://access.line.me/oauth2/v2.1/authorize)
3. อนุมัติสิทธิ์ที่ร้องขอ (profile, email, openid)
4. LINE เปลี่ยนเส้นทางกลับมายัง Ocriva พร้อมรหัสการอนุมัติ
5. Ocriva แลกเปลี่ยนรหัสเป็น Token ที่ https://api.line.me/oauth2/v2.1/token
6. โปรไฟล์ LINE ของคุณเชื่อมโยงกับบัญชี Ocriva และระบบออก JWT สำหรับ Session

สิทธิ์ที่ขออนุมัติ

สิทธิ์	วัตถุประสงค์
profile	ชื่อแสดงผลและรูปโปรไฟล์สำหรับบัญชี Ocriva
email	ระบุตัวตนบัญชีและการกู้คืนบัญชี
openid	การยืนยันตัวตนตามมาตรฐาน OpenID Connect

---

LIFF Scanner (สแกนเอกสารบนมือถือ)

LIFF คืออะไร

LIFF (LINE Front-end Framework) คือเทคโนโลยีที่ช่วยให้เว็บแอปพลิเคชันทำงานภายในเบราว์เซอร์ของแอป LINE ได้โดยตรง หน้าสแกนของ Ocriva (/scan) ถูกพัฒนาให้เป็น LIFF App ซึ่งทำให้สามารถเข้าถึงกล้อง LINE และข้อมูลยืนยันตัวตน LINE ได้ — ผู้ใช้จึงสแกน อัปโหลด และตรวจสอบผลลัพธ์เอกสารได้ทั้งหมดภายในแอป LINE เพียงแอปเดียว

นี่คือ ฟีเจอร์หลักสำหรับตลาดไทย เนื่องจากผู้ใช้ชาวไทยส่วนใหญ่ใช้ LINE เป็นช่องทางการสื่อสารหลัก การสแกนเอกสารผ่าน LINE จึงไม่ต้องติดตั้งแอปเพิ่มเติมหรือเปิดเบราว์เซอร์แยก

ขั้นตอนการสแกนเอกสาร (LIFF Flow)

1. เปิด URL ของ LIFF ในแอป LINE (ผ่าน Rich Menu, ลิงก์ที่ส่งในแชท หรือ URL โดยตรง)
2. LIFF App เริ่มต้นทำงานและยืนยันตัวตนกับ LINE โดยอัตโนมัติ
3. หากคุณล็อกอิน LINE อยู่แต่ยังไม่ได้ลงทะเบียน Ocriva ระบบจะสร้างบัญชีให้อัตโนมัติจากข้อมูลโปรไฟล์ LINE
4. เลือก Project ที่ต้องการบันทึกเอกสาร
5. เลือก Template ที่ตรงกับประเภทเอกสารของคุณ (เช่น ใบเสร็จ ใบแจ้งหนี้ บัตรประชาชน)
6. แตะ สแกนด้วยกล้อง LINE เพื่อเปิดกล้องในแอป LINE
7. ถ่ายภาพเอกสาร — จัดตำแหน่งให้เอกสารอยู่ในกรอบให้มากที่สุด
8. ตรวจสอบภาพที่ถ่าย — แตะ ถ่ายใหม่ หากภาพไม่ชัดหรือมุมไม่ดี
9. แตะ อัปโหลด เพื่อส่งภาพไปยัง Ocriva สำหรับประมวลผล
10. เอกสารถูกประมวลผลด้วย Template ที่เลือกไว้
11. ดูผลลัพธ์ข้อมูลที่ดึงออกมาได้ที่ Processing History

วิธีการถ่ายภาพที่รองรับ

วิธี	เงื่อนไข
กล้อง LINE	เปิดในแอป LINE พร้อม LIFF เริ่มต้นแล้ว
กล้องของอุปกรณ์	เบราว์เซอร์มือถือทั่วไป (Fallback อัตโนมัติ)

การเลือก Template

• ต้องเลือก Template ก่อนสแกนเสมอ
• Template กำหนดว่าระบบจะดึงข้อมูลฟิลด์ใดออกจากเอกสาร (เช่น วันที่ ยอดเงิน ชื่อผู้ขาย)
• คุณสามารถสลับ Project และ Template ระหว่างการสแกนแต่ละครั้งโดยไม่ต้องปิดแอป
• Template เดียวกับที่ใช้ในหน้าอัปโหลดบนเว็บ

---

Rich Menu

Rich Menu คืออะไร

Rich Menu คือเมนูกราฟิกแบบกำหนดเองที่แสดงที่ด้านล่างของหน้าแชท LINE กับบอทขององค์กร ช่วยให้ผู้ใช้แตะปุ่มขนาดใหญ่เพื่อเปิด LIFF Scanner หรือเข้าสู่แดชบอร์ด Ocriva ได้โดยตรง โดยไม่ต้องจำ URL หรือค้นหาในเบราว์เซอร์

ข้อกำหนดของ Rich Menu

คุณสมบัติ	ค่า
ขนาดรูปภาพ	2400 × 809 พิกเซล
ขนาดไฟล์สูงสุด	1 MB
รูปแบบที่รองรับ	PNG, JPEG
พื้นที่แอคชัน	ปุ่มกดแบบกำหนดเองได้สูงสุด 6 ปุ่ม

เนื้อหาทั่วไปใน Rich Menu

• สแกนเอกสาร — เปิดหน้า LIFF Scanner
• แดชบอร์ด — เปิดแดชบอร์ดเว็บ Ocriva
• ประวัติการประมวลผล — เปิดหน้าผลลัพธ์

การตั้งค่า Rich Menu

การกำหนดค่า Rich Menu ดำเนินการโดยผู้ดูแลระบบผ่าน LINE Messaging API โดย LineService ใน Ocriva Backend จัดการ CRUD ของ Rich Menu ขั้นตอนการตั้งค่า:

1. สร้าง LINE Messaging API channel (แยกจาก LINE Login channel)
2. กำหนดค่า MESSAGE_CHANNEL_ID และ MESSAGE_CHANNEL_SECRET ในตัวแปรสภาพแวดล้อม
3. เตรียมรูปภาพ Rich Menu ขนาดถูกต้อง (2400 × 809 พิกเซล ขนาด < 1 MB)
4. กำหนด Action Areas ให้ชี้ไปยัง LIFF URL และแดชบอร์ดเว็บ

---

การตั้งค่าสภาพแวดล้อม (สำหรับผู้ดูแลระบบ)

ตัวแปรสภาพแวดล้อมที่จำเป็น

ตัวแปร	วัตถุประสงค์
LINE_CLIENT_ID	Channel ID ของ LINE Login channel (จาก LINE Developers Console)
LINE_CLIENT_SECRET	Channel Secret ของ LINE Login channel
LINE_CALLBACK_URL	URL ที่ LINE เปลี่ยนเส้นทางหลังยืนยันตัวตน เช่น https://your-domain.com/auth/line/callback
NEXT_PUBLIC_LIFF_ID	ID ของ LIFF App (ใช้บน Frontend Next.js)
MESSAGE_CHANNEL_ID	Channel ID ของ Messaging API channel (สำหรับ Rich Menu)
MESSAGE_CHANNEL_SECRET	Channel Secret ของ Messaging API channel (สำหรับ Rich Menu)

ขั้นตอนการตั้งค่าใน LINE Developers Console

1. ไปที่ LINE Developers Console และสร้างหรือเลือก Provider
2. สร้าง LINE Login channel — คัดลอก Channel ID และ Channel Secret ไปใส่ใน LINE_CLIENT_ID และ LINE_CLIENT_SECRET
3. ตั้งค่า Callback URL ในการตั้งค่า channel ให้ตรงกับค่าของ LINE_CALLBACK_URL
4. ภายใต้ LINE Login channel เดิม สร้าง LIFF App — ตั้ง endpoint URL เป็น URL ของหน้า /scan แล้วคัดลอก LIFF ID ไปใส่ใน NEXT_PUBLIC_LIFF_ID
5. สร้าง Messaging API channel (แยกจาก Login channel) — คัดลอก Channel ID และ Channel Secret ไปใส่ใน MESSAGE_CHANNEL_ID และ MESSAGE_CHANNEL_SECRET
6. ออกแบบและอัปโหลดรูปภาพ Rich Menu ผ่าน LINE Official Account Manager หรือ Messaging API

---

กรณีการใช้งาน

สแกนเอกสารในสนาม

• ทีมขายถ่ายใบเสร็จและใบแจ้งหนี้ขณะอยู่นอกสถานที่ โดยไม่ต้องกลับสำนักงาน
• พนักงานส่งของสแกนป้ายพัสดุและเอกสารนำส่ง ณ จุดส่ง
• พนักงานตรวจสอบภาคสนามถ่ายภาพแบบฟอร์มตรวจสอบที่กรอกเสร็จแล้ว

บริการตนเองของลูกค้าผ่าน LINE

• ลูกค้าถ่ายภาพเอกสารของตนเอง (บัตรประชาชน ใบแจ้งหนี้ แบบฟอร์ม) โดยตรงในแชท LINE
• Rich Menu นำทางลูกค้าไปยัง Scanner โดยไม่ต้องจำ URL
• เอกสารถูกประมวลผลอัตโนมัติและผลลัพธ์พร้อมใช้งานทันที

Workflow แบบ Mobile-First

• ไม่ต้องใช้คอมพิวเตอร์ — Workflow ทั้งหมดตั้งแต่สแกน ประมวลผล ไปจนถึงตรวจสอบผลลัพธ์ ทำได้บนสมาร์ทโฟนเพียงเครื่องเดียว
• ทีมงานในสนามส่งเอกสารแบบ Real-time ในขณะที่พนักงาน Back-office ตรวจสอบผลลัพธ์ผ่านแดชบอร์ดบนเว็บ

---

สรุปจุดเชื่อมต่อ

ฟีเจอร์	ประเภท Channel	ตัวแปรสภาพแวดล้อมหลัก
LINE Login	LINE Login channel	LINE_CLIENT_ID, LINE_CLIENT_SECRET, LINE_CALLBACK_URL
LIFF Scanner	LIFF App (ภายใต้ Login channel)	NEXT_PUBLIC_LIFF_ID
Rich Menu	Messaging API channel	MESSAGE_CHANNEL_ID, MESSAGE_CHANNEL_SECRET