ข้ามไปยังเนื้อหา

Docs

Docs

เชื่อม LINE กับระบบของสตูดิโอ

คู่มือทีละขั้นสำหรับเปิด Messaging API และ LINE Login ให้ระบบส่งข้อความในแชต และให้สมาชิกล็อกอินเข้าแอปด้วยบัญชี LINE ทำครั้งเดียวด้วยบัญชี LINE ของเจ้าของ

https://

สิ่งที่จะได้เมื่อทำเสร็จ

สอง channel ใน Provider เดียวกัน ตัวหนึ่งผูกกับ LINE Official Account ไว้ส่งข้อความ อีกตัวไว้ให้สมาชิกล็อกอินและเปิดแอปสมาชิก

Provider ชื่อบริษัทของสตูดิโอ

Messaging API channel

ผูกกับ LINE Official Account ส่งข้อความยืนยันการจอง เตือนคลาส และแจ้งผู้สอน

Webhook URL

https://booking.yourstudio.com/api/webhook

LINE Login channel และ LIFF app

สมาชิกล็อกอินด้วยบัญชี LINE แล้วเปิดแอปสมาชิกจากเมนูในแชต

Endpoint URL

https://booking.yourstudio.com/liff

ต้องเตรียม

  • บัญชี LINE ของเจ้าของ ที่เป็นแอดมินของ LINE Official Account
  • LINE Official Account ของสตูดิโอ ถ้ายังไม่มี สมัครได้ที่ LINE Official Account Manager
  • โดเมนของสตูดิโอ ที่ชี้มาที่ Cloud แล้ว ดูหน้า Cloud
  • ชื่อบริษัทหรือชื่อธุรกิจ สำหรับตั้งชื่อ Provider

สอง channel ต้องอยู่ใน Provider เดียวกัน

LINE ให้รหัสผู้ใช้แยกตาม Provider ถ้า LINE Login กับ Messaging API อยู่คนละ Provider ระบบจะส่งข้อความหาสมาชิกที่ล็อกอินผ่านแอปไม่ได้ และย้าย Provider ภายหลังไม่ได้

ส่วนที่ 1

Messaging API

ให้ระบบส่งข้อความยืนยันการจอง เตือนก่อนคลาส และแจ้งผู้สอน ผ่าน LINE Official Account ของสตูดิโอ

ขั้นที่ 1

เปิดใช้ Messaging API

  1. 1เข้า LINE Official Account Manager เลือกบัญชีของสตูดิโอ ไปที่ Settings แล้วเลือกเมนู Messaging API
  2. 2กด Enable Messaging API
  3. 3เลือก Provider ที่จะใช้กับทั้งสอง channel หรือสร้างใหม่โดยตั้งชื่อเป็นชื่อบริษัท แล้วกด OK

เลือก Provider แล้วเปลี่ยนภายหลังไม่ได้ ตรวจชื่อให้ถูกก่อนกด OK

ตั้งแต่ปี 2024 LINE ไม่ให้สร้าง Messaging API channel ใน LINE Developers Console โดยตรงแล้ว ต้องเปิดจาก LINE Official Account Manager เท่านั้น

LINE Official Account Manager

Haven Reformer › Settings

Messaging API

Messaging API is not enabled for this account.

2

ขั้นที่ 2

คัดลอก Channel ID และ Channel secret

  1. 1เข้า LINE Developers Console ด้วยบัญชีเดียวกัน เลือก Provider แล้วเลือก channel ของ Official Account ที่แท็บ Basic settings คัดลอก Channel ID
  2. 2กด Show ที่ Channel secret แล้วคัดลอก
ค่าที่ได้Messaging API Channel IDMessaging API Channel secret
LINE Developers Console

Haven Studio Co., Ltd. › Haven Reformer

Basic settingsMessaging APIStatisticsRoles

Channel ID1

2001234567

Channel secret2

••••••••••••••••••••••••

ขั้นที่ 3

ออก Channel access token

  1. 1ไปที่แท็บ Messaging API เลื่อนลงไปที่ Channel access token (long-lived)
  2. 2กด Issue แล้วคัดลอกค่าที่ได้
ค่าที่ได้Messaging API Channel access token

ถ้า token หลุดไปถึงคนอื่น กด Reissue ได้ทันที token เดิมจะใช้ไม่ได้ แล้วแจ้งค่าใหม่ให้ทีม Svana

LINE Developers Console

Haven Studio Co., Ltd. › Haven Reformer

Basic settingsMessaging APIStatisticsRoles

Channel access token

Channel access token (long-lived)1

2

Webhook settings

Webhook URL

https://booking.yourstudio.com/api/webhook

Use webhook

ขั้นที่ 4

ตั้ง Webhook URL

  1. 1ที่แท็บ Messaging API กด Edit ที่ Webhook URL แล้ววางhttps://booking.yourstudio.com/api/webhook
  2. 2กด Verify ต้องขึ้นว่า Success
  3. 3เปิด Use webhook

ถ้ากด Verify แล้วไม่ผ่าน อาจเป็นเพราะระบบยังไม่ได้รับ Channel secret ให้ส่งค่าให้ทีม Svana ในขั้นที่ 10 ก่อน แล้วกลับมากดอีกครั้ง

LINE Developers Console

Haven Studio Co., Ltd. › Haven Reformer

Basic settingsMessaging APIStatisticsRoles

Webhook settings

Webhook URL1

https://booking.yourstudio.com/api/webhook
2

Use webhook3

Channel access token

Channel access token (long-lived)

ขั้นที่ 5

ปิดข้อความตอบกลับอัตโนมัติ

  1. 1กลับไปที่ LINE Official Account Manager เปิด Settings แล้วเลือก Response settings ปิด Auto-reply messages เพื่อไม่ให้ตอบซ้อนกับระบบ
  2. 2เปิด Webhooks ส่วน Greeting message จะเปิดไว้ต้อนรับเพื่อนใหม่ก็ได้
LINE Official Account Manager

Haven Reformer › Settings

Response settings

Greeting message

ข้อความต้อนรับเพื่อนใหม่ เปิดหรือปิดก็ได้

Auto-reply messages1

ปิด เพื่อไม่ให้ตอบซ้อนกับระบบ

Webhooks2

เปิด เพื่อส่งข้อความเข้าระบบ

ส่วนที่ 2

LINE Login และ LIFF

ให้สมาชิกเปิดแอปสมาชิกจากในแชต ล็อกอินด้วยบัญชี LINE โดยไม่ต้องตั้งรหัสผ่าน

ขั้นที่ 6

สร้าง LINE Login channel

  1. 1ใน LINE Developers Console เลือก Provider เดียวกับขั้นที่ 1 กด Create a new channel แล้วเลือก LINE Login
  2. 2Region to provide the service เลือก Thailand และ App types เลือก Web app
  3. 3ตั้ง Channel name เช่น ชื่อสตูดิโอตามด้วย Member ห้ามมีคำว่า LINE ใส่คำอธิบายและอีเมล แล้วกด Create
LINE Developers Console

Haven Studio Co., Ltd. › Create a new channel

Channel type

LINE Login

Provider1

Haven Studio Co., Ltd.

ต้องเป็น Provider เดียวกับ Messaging API

Region to provide the service2

Thailand

Channel name3

Haven Reformer Member

ห้ามมีคำว่า LINE

App types

✓Web app

ขั้นที่ 7

คัดลอกค่า และผูก Official Account

  1. 1ที่แท็บ Basic settings คัดลอก Channel ID
  2. 2คัดลอก Channel secret
  3. 3ที่ Linked LINE Official Account เลือกบัญชีของสตูดิโอ เพื่อให้แอปชวนสมาชิกเพิ่มเพื่อนได้
ค่าที่ได้LINE Login Channel IDLINE Login Channel secret

ถ้าอยากได้อีเมลของสมาชิกจาก LINE ให้กด Apply ที่ Email address permission ในหน้าเดียวกัน ไม่บังคับ ระบบใช้งานได้โดยไม่ต้องมีอีเมล

LINE Developers Console

Haven Studio Co., Ltd. › Haven Reformer Member

Basic settingsLINE LoginLIFFSecurityRoles

Channel ID1

2001234890

Channel secret2

••••••••••••••••••••••••

Linked LINE Official Account3

Haven Reformer (@havenreformer)

OpenID Connect

Email address permission

ไม่บังคับ ขอเมื่ออยากได้อีเมลของสมาชิกจาก LINE

ขั้นที่ 8

เพิ่ม LIFF app

  1. 1ไปที่แท็บ LIFF กด Add แล้วเลือก Size เป็น Full
  2. 2Endpoint URL ใส่https://booking.yourstudio.com/liff
  3. 3Scopes เลือก openid และ profile ส่วน email เลือกได้เมื่อได้สิทธิ์อีเมลแล้ว
  4. 4Add friend option เลือก On (Aggressive) เพื่อชวนสมาชิกเพิ่มเพื่อนตอนล็อกอินครั้งแรก
  5. 5กด Add แล้วคัดลอก LIFF ID และ LIFF URL
ค่าที่ได้LINE Login LIFF IDLINE Login LIFF URL
LINE Developers Console

Haven Studio Co., Ltd. › Haven Reformer Member

Basic settingsLINE LoginLIFFSecurityRoles

LIFF app name

Haven Reformer

Size1

CompactTallFull

Endpoint URL2

https://booking.yourstudio.com/liff

Scopes3

✓openid✓profileemail

Add friend option4

On (Aggressive)
5

ขั้นที่ 9

เผยแพร่ channel

  1. 1เปิด LIFF URL ในมือถือด้วยบัญชีแอดมิน เพื่อลองล็อกอินก่อน
  2. 2กดป้าย Developing ที่หัว channel แล้วยืนยัน Publish

ระหว่างที่ยังเป็น Developing มีแค่แอดมินและผู้ทดสอบที่ล็อกอินได้ เมื่อ Publish แล้วเปลี่ยนกลับไม่ได้

LINE Developers Console

Haven Studio Co., Ltd.

H

Haven Reformer Member

LINE Login

2

ส่วนที่ 3

ส่งค่าให้ Svana และตั้ง Rich menu

ทีม Svana ใส่ค่าทั้งหมดในระบบของสตูดิโอ จากนั้นตั้งเมนูในแชตให้เปิดแอปสมาชิก

ขั้นที่ 10

ส่งค่าทั้ง 7 ให้ทีม Svana

ติ๊กรายการที่เก็บครบแล้ว แล้วส่งทั้งหมดในครั้งเดียว

ส่งผ่านช่องทางที่ทีม Svana ให้ไว้เท่านั้น อย่าวางค่าเหล่านี้ในแชตกลุ่มหรืออีเมลที่หลายคนเห็น ถ้าค่าหลุด ออกค่าใหม่ใน Console แล้วแจ้งทีมอีกครั้ง

เมื่อทีมแจ้งว่าใส่ค่าแล้ว กลับไปกด Verify ในขั้นที่ 4 อีกครั้ง

ค่าที่ต้องส่ง

ครบ 0 จาก 7

ขั้นที่ 11

ตั้ง Rich menu ให้เปิดแอปสมาชิก

  1. 1ใน LINE Official Account Manager ไปที่ Rich menus กด Create แล้วเลือกเทมเพลต
  2. 2ตั้ง Action ของแต่ละช่องเป็น Link ไปที่ LIFF URL ต่อด้วยหน้าที่ต้องการ
ลิงก์สำหรับแต่ละช่องของ Rich menu
จอง Sessionhttps://liff.line.me/2001234890-AbCdEfGh/booking
การจองของฉันhttps://liff.line.me/2001234890-AbCdEfGh/my-bookings
แพ็กเกจhttps://liff.line.me/2001234890-AbCdEfGh/packages
หน้าหลักhttps://liff.line.me/2001234890-AbCdEfGh

ใช้ LIFF ID ของสตูดิโอแทนค่าตัวอย่าง LINE จะเปิดหน้าตามที่ต่อท้ายไว้ในแอปสมาชิก

LINE Official Account Manager

Haven Reformer › Rich menus › Create

Template 1

Action ของช่อง A 2

Type

Link

URL

https://liff.line.me/2001234890-AbCdEfGh/booking

Action label

จอง Session

ขั้นที่ 12

ทดสอบก่อนบอกสมาชิก

  1. 1เปิดแชตของสตูดิโอในมือถือ กดเมนู แล้วล็อกอินด้วย LINE แอปสมาชิกต้องเปิดบนโดเมนของสตูดิโอ
  2. 2จองคลาสหนึ่งรอบ แล้วดูว่าได้ข้อความยืนยันในแชต
  3. 3ให้ผู้สอนพิมพ์คำเปิดใช้งานในแชต เช่น Activate Instructor เพื่อผูกบัญชีผู้สอน แล้วลองจองคลาสของผู้สอนคนนั้น

ข้อความที่ระบบส่งหาสมาชิก นับรวมในโควตาข้อความของแพ็กเกจ LINE Official Account ที่สตูดิโอใช้

ถ้ามีปัญหา

กด Verify แล้วไม่ขึ้น Success

ตรวจว่า URL ขึ้นต้นด้วย https และลงท้ายด้วย /api/webhook ตรงกับ https://booking.yourstudio.com/api/webhook และทีม Svana ใส่ Channel secret ของ Messaging API แล้ว

สมาชิกล็อกอินได้ แต่ไม่ได้รับข้อความในแชต

ตรวจว่า LINE Login กับ Messaging API อยู่ใน Provider เดียวกัน และสมาชิกเพิ่ม Official Account เป็นเพื่อนแล้วโดยไม่ได้บล็อก

แอดมินล็อกอินได้ แต่คนอื่นล็อกอินไม่ได้

LINE Login channel ยังเป็น Developing อยู่ กลับไปทำขั้นที่ 9

เปิดแอปแล้วขึ้นหน้าว่างหรือหน้าผิด

Endpoint URL ของ LIFF ต้องเป็น https://booking.yourstudio.com/liff และโดเมนต้องชี้มาที่ Cloud แล้ว

สมาชิกได้ข้อความตอบกลับซ้ำสองข้อความ

Auto-reply messages ใน Response settings ยังเปิดอยู่ กลับไปทำขั้นที่ 5

หน้าจอในคู่มือเป็นภาพจำลอง ชื่อเมนูอ้างอิงจาก LINE Developers Console และ LINE Official Account Manager ภาษาอังกฤษ หน้าจอจริงอาจต่างเล็กน้อย ดูรายละเอียดเพิ่มได้ที่ Messaging API และ LIFF ในเอกสารของ LINE