Give us a call now: 02-108-1791, 084-909-9596
Logo
28 Apr 2022

วิธีสร้าง LINE LIFF (LINE Login Channel) เพื่อเชื่อมต่อ Loga กับ LINE

หลังจากเปิดการเชื่อมต่อ LINE และจ่ายค่าบริการผ่านเว็บไซต์ Loga Merchant เรียบร้อยแล้ว จะมีส่วนตั้งค่าการเชื่อมต่อ ซึ่งจำเป็นต้องตั้งค่าในเว็บไซต์ของ LINE Official account และ LINE Developer console ก่อน ในบทความนี้จะเป็นรายละเอียดการสร้าง LINE Login Channel ผ่านเว็บไซต์ของ LINE Developer console นะคะ

หากต้องการให้ระบบส่งข้อความอัตโนมัติผ่าน LINE OA ของท่านด้วย รบกวนสร้าง LINE Messaging API Channel ก่อน นะคะ สามารถดูวิธีสร้างได้ที่นี่ค่ะ https://blog.loga.app/manual-line-integration-setup-msgapi/

*** หากทางร้านเลือกต้องการระบบแจ้งเตือน (โดยใช้ Messaging API) ทั้ง 2 Channel (LINE Login และ Messaging API) จำ เป็นต้องอยู่ในProvider เดียวกัน และท่านมีสิทธิ์ระดับ Admin

  1. เข้าเว็บไซต์ LINE Developer (https://developers.line.biz/) และ Login ด้วยบัญชี LINE ของท่าน
  2. เข้าหน้า Developer console จากเมนูด้านขวาบน หรือ URL https://developers.line.biz/console/
LINE Developer – Home
  1. เลือก Provider ที่มีอยู่ (LINE OA ได้สร้างให้แล้วถ้าท่านผ่านขั้นตอนการเปิดใช้ LINE Messaging API มาแล้ว) ถ้ายังไม่เคยมี Provider และไม่เปิดให้ระบบส่งข้อความผ่าน LINE OA สร้าง Provider ใหม่ได้เลยค่ะ
LINE Developer – Console
  1. สร้าง Channel ใหม่ โดยกดปุ่ม “Create a new channel”
LINE Developer – Provider
  1. เลือกประเภทชาแนลเป็น LINE Login
LINE Developer – Create a new channel
  1. กรอกฟอร์มให้ครบถ้วน ตรวจสอบความถูกต้องให้เรียบร้อย
    กรอกข้อมูลตรง Email, Privacy URL, Terms URL
    Email: support@loga.app
    Privacy URL: https://www.loga.app/privacy/
    Terms URL: https://www.loga.app/terms/
    ติ๊กยอมรับ “I have read and agree to the LINE Developers Agreement” แล้วกด “Create”
LINE Developer – Create channel form 1
LINE Developer – Create channel form 2
LINE Developer – Create channel form 3
  1. เมื่อสร้างสำเร็จ จะเห็นหน้าจอดังภาพ
LINE Developer – LINE Login Channel
  1. เลือกแถบ LIFF ด้านบน
LINE Developer – LINE Login Channel – LIFF Tab
  1. คลิกปุ่ม “Add” บริเวณกลางหน้าจอ
LINE Developer – LINE Login Channel – LIFF
  1. กรอกข้อมูลและติ๊กเครื่องหมายถูก ตามรูปด้านล่างให้ครบถ้วนในส่วน Add a LIFF app ให้ครบถ้วน ตามภาพ

* Endpoint URL ระบุเป็น “https://client.loga.app/card/” ไปก่อน (เราจะกลับมาแก้ภายหลัง)

LINE Developer – Add a LIFF app form
  1. ตรวจสอบข้อมูลในส่วน ในส่วน Add a LIFF app ให้เรียบร้อยแล้วกด “Save” หน้าจอจะเป็นดังภาพ
LINE Developer – LINE Login Channel – LIFF
  1. กดเปิด shareTargetPicker
LINE Developer – LIFF – ShareTargetPicker
  1. scroll down ลงไปด้านล่างเพื่อยอมรับข้อกำหนดด้วยการทำเครื่องหมายถูกยอมรับแล้วกด “Enable”
LINE Developer – LIFF – accept agreement
  1. ระบบจะพากลับมาหน้าเดิม ให้คลิกเข้า LIFF Application ที่เราสร้างไว้เมื่อสักครู่
LINE Developer – Select LIFF app
  1. คลิก COPY เพื่อคัดลอก LIFF ID จากด้านบน
LINE Developer – Copy LIFF ID
  1. กลับมาที่เว็บไซต์ Loga Merchant (https://merchant.loga.app/) นำ LIFF ID ที่คัดลอกจากข้อ 15 มากรอกในข้อ 2 ตามภาพ และคัดลอก Endpoint URL จากช่องด้านล่างเก็บไว้ (รูปแบบจะเป็น https://client.loga.app/card/{Card ID}?liffId={LIFF ID})
LINE Developer – Copy LIFF ID
  1. ที่หัวข้อ Endpoint URL กด “Edit” เพื่อแก้ไข Endpoint URL และนำ Endpoint URL ที่คัดลอกจาก Loga Merchant ในข้อ 16 มาใช้ หลังจากนั้นกด Update ด้านล่างเพื่อบันทึก
LINE Developer – Edit Endpoint URL
LINE Developer – Update Endpoint URL
  1. เลื่อนขึ้นไปด้านบนแล้วคลิกปุ่ม “Developing” แล้วเลือก “Publish” เพื่อเปิดใช้งาน
LINE Developer – Change mode
LINE Developer – Change mode to Publish
  1. กลับไปตั้งค่าที่ Loga Merchant ต่อ, เลือกสีแล้วอย่าลืม Save ด้วยนะคะ
  2. หลังจากบันทึกเรียบร้อยแล้ว ทดสอบการเชื่อมต่อได้ตามที่หน้าเว็บแนะนำได้เลยค่ะ
Tags:
Post by Remy Loga

0 Comments