จัดการ LINE OA

ภาพรวม

หน้า /line-oa-management เป็นหน้าระดับบัญชี (account-level) ที่ผูกกับองค์กร ไม่ได้ผูกกับ channel ใด channel หนึ่ง จึงเข้าถึงได้ตั้งแต่ก่อนที่ผู้ใช้จะเลือก channel และแสดงผลด้วย layout แบบจำกัดที่ไม่มีเมนูด้านข้าง

หน้านี้ทำหน้าที่สองอย่างพร้อมกัน

• หน้าเลือก LINE OA — เป็นขั้นที่ 2 ของการเข้าสู่ระบบ เมื่อคลิกการ์ด OA ระบบจะแลก token ใหม่ที่ระบุ channel นั้นแล้วพาเข้าสู่แดชบอร์ด
• หน้าจัดการ channel — เพิ่ม แก้ไข ลบ เปิดปิดสถานะ และตั้งค่ารายละเอียดของ channel ทั้งหมดในฟอร์มเดียว

ฟอร์มของ channel รวมการตั้งค่าไว้ 9 ส่วน ครอบคลุมตั้งแต่ credentials ของ Messaging API, ข้อมูล channel และ webhook URL, LINE Login กับ LIFF, API Key, GA Retargeting, System Attribute, ลำดับความสำคัญในการตอบข้อความ, Live Agent (Mbox) ไปจนถึงการตั้งค่า AI ส่วนใหญ่เปิดใช้งานเฉพาะในโหมดแก้ไข

ข้อจำกัดสำคัญคือจำนวน channel ที่สร้างได้ถูกกำหนดโดยค่า maxChannel ที่ติดมากับ token ของผู้ใช้

Business Flow

1. แสดงรายการและเลือก channel

1. เมื่อเปิดหน้า ระบบตรวจสิทธิ์การดูข้อมูล LINE OA ก่อน จากนั้นตั้งค่า breadcrumb และเมนูที่กำลังใช้งาน
2. ระบบโหลดเงื่อนไขการค้นหาล่าสุดจาก sessionStorage หากไม่มีจะใช้ค่าเริ่มต้นคือหน้าแรก 10 รายการ แล้วดึงข้อมูลจาก GET /line-oa
3. แถบเครื่องมือด้านบนประกอบด้วยช่องค้นหา ตัวเลือกกรองสถานะ (ทั้งหมด / ใช้งาน / ปิดใช้งาน) และตัวเลขแสดงจำนวน channel ที่มีเทียบกับโควตาสูงสุด
4. ทุกครั้งที่ผู้ใช้เปลี่ยนเงื่อนไข ระบบจะรีเซ็ตกลับไปหน้าแรกและบันทึกเงื่อนไขลง sessionStorage เพื่อคงไว้เมื่อกลับมาหน้านี้อีกครั้ง
5. รายการแสดงเป็นตารางการ์ด แต่ละการ์ดมีภาพหน้าปก ป้ายสถานะ สวิตช์เปิดปิด และปุ่มแก้ไข ปุ่มจัดการสิทธิ์เข้าถึง และปุ่มลบ
6. การ์ด "สร้างใหม่" จะปรากฏก็ต่อเมื่อจำนวน channel ปัจจุบันยังไม่ถึงโควตาที่กำหนด
7. ผู้ใช้คลิกเข้า channel ได้เฉพาะการ์ดที่มีสถานะใช้งานเท่านั้น
8. ปุ่มจัดการสิทธิ์เข้าถึงบนการ์ดจะปรากฏเฉพาะผู้ใช้ที่มีบทบาทเป็น super admin

2. เข้าสู่ channel ที่เลือก

1. เมื่อคลิกการ์ด ระบบเรียก POST /auth/login-with-line-oa เพื่อแลก token ชุดใหม่ที่ระบุ channel
2. ระบบอัปเดตข้อมูลโปรไฟล์และสิทธิ์จาก token ใหม่
3. ก่อนพาไปหน้าถัดไป ระบบโหลดสิทธิ์การใช้งานใหม่จาก GET /user/{id}/permission ทันที เพราะชุดกฎการเข้าถึงถูกคำนวณเฉพาะตอนโหลดหน้าใหม่ทั้งหน้า หากข้ามขั้นนี้ผู้ใช้จะติดอยู่กับสิทธิ์ชุดเดิมที่ยังจำกัด
4. ล้าง cache ของตัวกรองทุกหน้า แล้วเข้าสู่หน้าแดชบอร์ด

3. เปิดหรือปิดสถานะ channel

สวิตช์บนการ์ดเรียก PUT /line-oa/{id}/status โดยตรง เมื่อสำเร็จจะแสดง modal ยืนยันและโหลดรายการใหม่ ทุกคนที่เข้าหน้านี้ได้สามารถกดสวิตช์นี้ได้ ไม่มีการตรวจสิทธิ์เพิ่มเติมในระดับปุ่ม

4. ลบ channel

ปุ่มลบเปิดกล่องยืนยันแบบเตือนก่อนเสมอ เมื่อยืนยันแล้วระบบเรียก DELETE /line-oa/{id} และโหลดรายการใหม่

5. กำหนดสิทธิ์เข้าถึง channel รายผู้ใช้

1. ปุ่มจัดการสิทธิ์บนการ์ด (เฉพาะ super admin) เปิด modal ที่ดึงรายชื่อผู้ใช้ทั้งหมดจาก GET /line-oa/{id}/user-access
2. ผู้ใช้แต่ละคนมีสถานะบอกว่าเข้าถึง channel นี้ได้หรือไม่ และผู้ที่ยังไม่เคยถูกกำหนดสิทธิ์เจาะจงจะมีป้ายกำกับว่าเข้าถึงได้ทุก channel
3. เมื่อติ๊กเลือกผู้ใช้แล้วบันทึก ระบบส่งรายการไปยัง PUT /line-oa/{id}/user-access
4. หากเซิร์ฟเวอร์ปฏิเสธ ระบบจะแสดงข้อความผิดพลาดโดย ไม่ปิด modal เพื่อให้แก้ไขต่อได้ กรณีที่พบคือการพยายามถอด channel สุดท้ายที่ผู้ใช้คนหนึ่งเข้าถึงได้ออก
5. มุมกลับของการตั้งค่านี้อยู่ที่หน้าจัดการผู้ใช้ ซึ่งมองจากฝั่งผู้ใช้แทนที่จะมองจากฝั่ง channel

6. สร้าง channel ใหม่ด้วย wizard 3 ขั้น

1. ผู้ใช้กรอกชื่อ OA พร้อม channel ID และ channel secret ของ Messaging API และหากต้องการใช้ LINE Login ก็กรอกข้อมูลของ LINE Login channel เพิ่ม (ส่วนนี้จะเปิดให้กรอกอัตโนมัติในโหมดสร้างใหม่)
2. เมื่อกดยืนยัน ระบบเปิด modal แสดงความคืบหน้าแบบขั้นตอน โดยไม่อนุญาตให้ปิดจนกว่าจะเสร็จ
   • ขั้นที่ 1 ตรวจสอบ Messaging API — เรียก POST /line-oa/get-oa-info เพื่ออ่านชื่อ channel, basic ID และภาพหน้าปกจาก LINE โดยไม่เปลี่ยนแปลงข้อมูลใด
   • ขั้นที่ 2 ตรวจสอบ LINE Login — เรียก POST /line-oa/validate-login ขั้นนี้จะถูกข้ามหากผู้ใช้ไม่ได้กรอกข้อมูล LINE Login ครบ
   • ขั้นที่ 3 สร้าง channel — สร้างรหัส webhook แบบสุ่มจากชื่อ channel รวมกับเวลาปัจจุบัน แล้วเรียก POST /line-oa โดยฝั่งเซิร์ฟเวอร์จะลงทะเบียน webhook และสร้าง LIFF ให้อัตโนมัติ หากมีคำเตือนตอบกลับมา จะแสดงไว้ในขั้นตอนนี้
3. เมื่อทุกขั้นสำเร็จจะมีปุ่มเสร็จสิ้นให้กลับไปหน้ารายการ หากล้มเหลวจะมีเพียงปุ่มปิด

7. แก้ไข channel

1. เปิดฟอร์มด้วยรหัส channel ระบบดึงข้อมูลจาก GET /line-oa/{id} แล้วเติมค่าลงในทุกส่วนของฟอร์ม รวมถึงประกอบ webhook URL เต็มจากรหัส webhook ที่บันทึกไว้
2. ปุ่ม Sync ดึงข้อมูลล่าสุดจาก LINE มาเติมทับ หากพบว่า basic ID ของ bot เปลี่ยนไปจากเดิม ระบบจะสร้างรหัส webhook ใหม่ให้อัตโนมัติ หากยังเป็น bot เดิมจะคง webhook URL เดิมไว้
3. หากการ Sync ล้มเหลวและเซิร์ฟเวอร์ระบุว่าฟิลด์ใดผิด ระบบจะแสดงข้อผิดพลาดรายฟิลด์ มิฉะนั้นจะเปิด modal แจ้งว่าไม่พบข้อมูล OA
4. ปุ่ม Reissue ข้าง webhook URL สร้างรหัส webhook ใหม่ทันทีฝั่งหน้าเว็บ แต่ยังไม่บันทึกจนกว่าจะกดบันทึกฟอร์ม
5. ปุ่ม Sync cover ดึงเฉพาะภาพหน้าปกล่าสุดมาแสดง
6. เมื่อกดบันทึก ระบบประกอบข้อมูลทั้งหมด แสดงกล่องยืนยัน แล้วเรียก PUT /line-oa/{id}

8. ส่วนการตั้งค่าย่อยในโหมดแก้ไข

ส่วนการตั้งค่า	สิ่งที่ตั้งค่าได้
API Keys	จัดการกุญแจ API ของ channel แบบการ์ด เปิดปิดสถานะ คัดลอก แก้ไข และลบ
GA Retargeting	เปิดปิดการติดตามผ่าน Google Analytics และกำหนดพารามิเตอร์ระบุตัวตน
System Attributes	ตารางแอตทริบิวต์ระดับระบบ (คีย์ ค่า ชนิดข้อมูล คำอธิบาย) นำไปอ้างอิงในข้อความได้ด้วยรูปแบบ {{system.KEY}} โดยคีย์แก้ไขไม่ได้หลังสร้างแล้ว
Message Handling	เลือกลำดับความสำคัญในการตอบข้อความระหว่าง ใช้ auto response เท่านั้น / ให้ auto response ทำงานก่อน / ใช้ AI จำแนกเท่านั้น
Live Agent (Mbox)	เชื่อมต่อระบบแชทสดภายนอก ตั้งค่า URL, token, บัญชี, กล่องข้อความ, เวลาหมดอายุและเวลาเตือน, ชุดข้อความอัตโนมัติ, คำสั่งพิเศษสำหรับออกจากการสนทนาและเรียกเจ้าหน้าที่, การจัดสรรแผนก และปุ่มทดสอบการเชื่อมต่อ พร้อมแสดง callback URL ที่ต้องนำไปตั้งค่าฝั่ง Mbox
AI Configuration	เลือกผู้ให้บริการและรุ่นโมเดล พร้อมกรอก API key ค่าเหล่านี้เป็นค่าระดับองค์กร ไม่ได้ผูกกับ channel

9. การจัดการ API Key

1. ระบบดึงรายการกุญแจของ channel นั้นด้วย GET /api-key
2. สวิตช์บนการ์ดเปิดปิดสถานะกุญแจผ่าน PUT /api-key/{id}/status
3. ปุ่มคัดลอกใช้ clipboard API และมีวิธีสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ
4. การสร้างหรือแก้ไขเปิดผ่าน modal โดยค่ากุญแจถูกสร้างอัตโนมัติและแก้ไขด้วยมือไม่ได้ ต้องกดปุ่มออกใหม่หากต้องการเปลี่ยน
5. เมื่อบันทึก ระบบเรียก POST /api-key หรือ PUT /api-key/{id} โดยแนบรหัส channel ไปด้วยเสมอ
6. ข้อควรทราบ กรณีบันทึกไม่สำเร็จ ระบบจะปิด modal โดยไม่แสดงข้อความผิดพลาด

หน้าจอและองค์ประกอบหลัก

หน้ารายการ

หน้ารายการแบ่งเป็นตัวควบคุมหลัก (src/components/line-oa-management/list/line-oa-management.container.tsx) ที่ดูแลการดึงข้อมูล การจัดการ cache ตัวกรอง การเข้าสู่ channel การลบ และการเปลี่ยนสถานะ กับคอมโพเนนต์แสดงผลที่ประกอบด้วยตารางการ์ด แถบเครื่องมือค้นหา และ modal จัดการสิทธิ์เข้าถึง

หน้าฟอร์ม

หน้าฟอร์มใช้ตัวควบคุมเดียวรับผิดชอบทั้งโหมดสร้างและโหมดแก้ไข โดยแยกความแตกต่างจากการมีรหัส channel ใน URL หรือไม่ ส่วนคอมโพเนนต์แสดงผลจัดกลุ่มการตั้งค่าทั้ง 9 ส่วนเป็นการ์ดและแผงพับได้

แต่ละฟิลด์ที่ต้องกรอกจาก LINE Developers Console มีไอคอนช่วยเหลือกำกับ พร้อม modal คู่มือที่มีภาพประกอบขั้นตอนการหาค่านั้น

ข้อควรทราบ หน้าฟอร์มปัจจุบันไม่มีการตรวจสิทธิ์ระดับ route ผู้ที่ทราบ URL จึงเข้าถึงได้โดยตรง

Modal ความคืบหน้าการสร้าง

Modal นี้เป็นเพียงส่วนแสดงผลล้วน ทำหน้าที่วาดขั้นตอนแนวตั้งพร้อมสถานะของแต่ละขั้น และปิดด้วยการคลิกนอกกรอบไม่ได้

ปลายทาง API หลัก

การทำงาน	ปลายทาง
รายการ channel	GET /line-oa
ข้อมูล channel รายตัว	GET /line-oa/{id}
สร้าง channel	POST /line-oa
แก้ไข channel	PUT /line-oa/{id}
เปลี่ยนสถานะ	PUT /line-oa/{id}/status
ลบ channel	DELETE /line-oa/{id}
อ่านข้อมูล OA จาก LINE	POST /line-oa/get-oa-info
ตรวจสอบ LINE Login channel	POST /line-oa/validate-login
ตั้งค่า GA Retargeting	GET และ PUT /line-oa/{id}/ga-tracking-settings
ตั้งค่าการตอบข้อความและ Mbox	PUT /line-oa/{id}/message-handling
ทดสอบการเชื่อมต่อ Mbox	POST /line-oa/{id}/mbox/test-connection
รายชื่อแผนกใน Mbox	GET /line-oa/{id}/mbox/teams
สิทธิ์เข้าถึง channel รายผู้ใช้	GET และ PUT /line-oa/{id}/user-access
จัดการ API Key	GET, POST, PUT, DELETE ใต้ /api-key
จัดการ System Attribute	GET, POST, PUT, DELETE ใต้ /system-attribute
ตั้งค่า AI	GET และ PUT /ai-config

จุดเชื่อมต่อกับฟีเจอร์อื่น

• เข้าสู่ระบบ — หน้านี้คือขั้นที่ 2 ของการเข้าสู่ระบบ และเป็นทางเดียวที่จะได้ token ที่ระบุ channel
• จัดการผู้ใช้ — ปุ่มเข้าหน้าจัดการผู้ใช้อยู่ที่ส่วนหัวของหน้านี้ (แสดงเฉพาะผู้ที่มีสิทธิ์) และ modal จัดการสิทธิ์เข้าถึง channel เป็นมุมกลับของการตั้งค่า OA access ในหน้าจัดการผู้ใช้
• บริการ webhook — รหัส webhook ที่สร้างจากหน้านี้คือปลายทางที่ LINE จะส่งเหตุการณ์เข้ามา หากรหัสเปลี่ยนโดยไม่ได้ตั้งใจ ข้อความจากผู้ใช้จะไม่ถูกส่งมาถึงระบบ
• สิทธิ์การเข้าถึง — โมดูล line-oa ฝั่งเซิร์ฟเวอร์ปลดล็อกหน้านี้พร้อมกับกลุ่มหน้าเมนูและเนื้อหาอีกหลายหน้า
• ระบบภายนอก — Mbox สำหรับแชทสด, Google Analytics สำหรับ retargeting และผู้ให้บริการ AI สำหรับการจำแนกข้อความ
• การตั้งค่าสภาพแวดล้อม — ค่า base URL ของ webhook ต้องมี prefix ที่ถูกต้อง มิฉะนั้น webhook จะตอบกลับไม่พบข้อมูลโดยไม่มีการแจ้งเตือน

รายละเอียดฝั่ง Backend (CMS API)

LINE OA คือ หน่วยของ tenant ในระบบนี้ ตารางข้อมูลแทบทุกตารางถูกจำกัดขอบเขตด้วยรหัส OA โมดูลนี้ฝั่ง backend จึงเป็นแกนกลางที่ฟีเจอร์อื่นแทบทั้งหมดพึ่งพา

ทำไม endpoint ของหน้านี้จึงเรียกได้ก่อนเลือก OA

route เกือบทั้งหมดของโมดูลนี้ถูกวางไว้บน guard แบบ "ยอมรับ token ที่ยังไม่มีรหัส OA" ไม่ใช่ guard ปกติ เพราะหน้าเลือก OA ต้องดึงรายการ OA มาแสดงตั้งแต่ก่อนที่ token จะระบุ OA ได้ ถ้าใช้ guard ปกติ ผู้ใช้จะติดวนอยู่ที่หน้าเลือก OA เพราะดึงรายการไม่ได้เลย

ข้อยกเว้นสำคัญคือ GET และ PUT /api/line-oa/:id/user-access ที่ถูกย้ายไปวางบน route group ปกติแทน เพราะการตรวจสิทธิ์ super admin ต้องอ่านค่า role จาก context ที่ guard ปกติเป็นผู้เติมให้ก่อน

สิ่งที่ backend ทำในแต่ละขั้นตอนสร้าง channel

• ขั้นตรวจ credential (POST /api/line-oa/get-oa-info) — backend ยิงถาม LINE Messaging API จริงเพื่อยืนยันว่า channel id / secret / access token ใช้ได้ แล้วดึงชื่อและรูป OA กลับมา ขั้นนี้ยังไม่เขียนข้อมูลใดลงฐานข้อมูล
• ขั้นสร้าง (POST /api/line-oa) — ตรวจโควตา maxChannels ตามแพ็กเกจขององค์กรก่อนเสมอ ถ้าเต็มจะถูกปฏิเสธที่ backend ไม่ได้พึ่งการซ่อนการ์ด "สร้างใหม่" ฝั่งหน้าเว็บเพียงอย่างเดียว จากนั้นจึงสร้างแถวใหม่พร้อม generate ทั้ง webhook_id และ line_oa_hash ให้อัตโนมัติ
• การออก webhook id ใหม่ (PUT /api/line-oa/:id/regenerate-webhook) — มีไว้สำหรับกรณีที่ URL รั่วออกไป การเปลี่ยนค่านี้หมายความว่าต้องกลับไปตั้ง URL ใหม่ใน LINE Developer Console ด้วย มิฉะนั้นข้อความจะหยุดเข้าระบบ
• การค้นย้อนกลับจาก webhook (GET /api/line-oa/webhook/:webhookId) — ใช้แปลงรหัส webhook กลับเป็น OA ซึ่งเป็นกลไกที่ทำให้บริการ webhook รู้ว่า event ที่เข้ามาเป็นของ tenant ใด

การลบและ soft delete

• DELETE /api/line-oa/:id เป็น soft delete ข้อมูลยังอยู่ในฐานข้อมูลแต่ถูกทำเครื่องหมายว่าลบแล้ว
• DELETE /api/line-oa/:id/hard เป็นการลบจริง ซึ่งถูกล็อกไว้ 2 ชั้น คือต้องเป็น super admin และต้องส่งพารามิเตอร์ยืนยันมาด้วย หน้าเว็บปัจจุบันไม่มีปุ่มเรียกเส้นทางนี้

สิทธิ์และข้อสังเกตด้านความปลอดภัย

• สิทธิ์ระดับโมดูลยังไม่ถูกบังคับ — โมดูลนี้มีข้อมูลกำกับสิทธิ์ (policy metadata) สำหรับ line-oa เตรียมไว้ แต่ยังไม่ได้เปิดใช้บังคับจริง สิ่งที่บังคับจริงคือ guard ระดับ super admin บนเส้นทาง hard delete และ user-access เท่านั้น — สอดคล้องกับที่หน้าเว็บระบุว่าสวิตช์เปิดปิดสถานะไม่มีการตรวจสิทธิ์ระดับปุ่ม
• GET /api/line-oa/find-all-object ไม่มี guard ใด ๆ เลย เป็นเส้นทางที่คืนรายการ OA ตามรูปแบบที่ระบุใน query (dropdown, group, object) โดยไม่ต้องมี token ควรถือเป็นข้อควรระวังเมื่อประเมินความปลอดภัยของระบบ
• การถอดสิทธิ์เข้าถึง OA มีกฎกันขาดทาง — เมื่อบันทึกผ่าน PUT /api/line-oa/:id/user-access backend จะเขียนตาราง user_line_oa และปฏิเสธคำขอที่ทำให้ผู้ใช้คนใดไม่เหลือ OA ที่เข้าถึงได้เลย นี่คือเหตุผลที่ modal ไม่ปิดตัวเองเมื่อบันทึกไม่ผ่าน

ผลข้างเคียงและระบบที่เกี่ยวข้อง

• Redis cache — backend เก็บ cache ข้อมูล OA และ LINE access token ไว้ การแก้ credential จึงอาจยังไม่มีผลทันทีจนกว่า cache จะหมดอายุหรือถูกล้าง
• RabbitMQ — เมื่อสั่ง sync follower ระบบจะ publish งานเข้าคิว line_sync_follower_user ให้ worker ทำงานแบบ asynchronous หน้าเว็บจึงได้คำตอบกลับทันทีแม้ข้อมูลจะยังไม่ถูก sync
• ระบบภายนอก — เชื่อมกับ LINE Messaging API และระบบ mbox ผ่าน HTTP โดยตรง ทั้งปุ่มทดสอบการเชื่อมต่อ mbox และการดึงรายชื่อทีมคือการยิงไปที่ระบบ mbox จริงในขณะนั้น
• การตั้งค่า audience auto-refresh ที่ตั้งจากหน้านี้เป็นตัวกำหนดว่า cron ที่รีเฟรช audience ของ OA นั้นจะทำงานอย่างไร ผลจึงไปปรากฏที่ฟีเจอร์จัดการกลุ่มเป้าหมาย ไม่ได้เห็นผลในหน้านี้
• การตั้งค่า message handling เป็นตัวชี้ว่าข้อความที่เข้ามาจะถูกส่งต่อให้ auto-response, workflow หรือ mbox รับ ซึ่งกระทบพฤติกรรมของทั้งระบบตอบข้อความอัตโนมัติ