ข้ามไปยังเนื้อหาหลัก
สำหรับเพื่อนใหม่ของเรา:

Logto คือทางเลือกแทน Auth0 ที่ออกแบบมาสำหรับแอปและผลิตภัณฑ์ SaaS ยุคใหม่ โดยมีทั้งบริการ Cloud และ Open-source เพื่อช่วยให้คุณเปิดตัวระบบการจัดการเอกลักษณ์และการเข้าถึง (IAM) ได้อย่างรวดเร็ว สนุกกับการยืนยันตัวตน (การยืนยันตัวตน), การอนุญาต (การอนุญาต), และการจัดการหลายผู้เช่า ครบจบในที่เดียว

เราแนะนำให้เริ่มต้นด้วย tenant สำหรับการพัฒนาแบบฟรีบน Logto Cloud เพื่อให้คุณสามารถสำรวจฟีเจอร์ทั้งหมดได้อย่างง่ายดาย

ในบทความนี้ เราจะพาคุณไปทีละขั้นตอนเพื่อสร้างประสบการณ์ลงชื่อเข้าใช้ Slack (การยืนยันตัวตนของผู้ใช้) อย่างรวดเร็วด้วย ปลั๊กอิน WordPress และ Logto

ข้อกำหนดเบื้องต้น

  • มี Logto instance ที่พร้อมใช้งาน ดู หน้าแนะนำ เพื่อเริ่มต้นใช้งาน
  • มีความรู้พื้นฐานเกี่ยวกับ ปลั๊กอิน WordPress
  • มีบัญชี Slack ที่ใช้งานได้

สร้างแอปพลิเคชันใน Logto​

Logto สร้างขึ้นบนพื้นฐานของการยืนยันตัวตน OpenID Connect (OIDC) และการอนุญาต OAuth 2.0 โดยรองรับการจัดการข้อมูลระบุตัวตนแบบรวมศูนย์ข้ามหลายแอปพลิเคชัน ซึ่งมักเรียกว่า การลงชื่อเข้าใช้ครั้งเดียว (Single Sign-On; SSO)

ในการสร้างแอปพลิเคชัน เว็บแบบดั้งเดิม ของคุณ เพียงทำตามขั้นตอนเหล่านี้:

  1. เปิด Logto Console ในส่วน "เริ่มต้นใช้งาน" ให้คลิกที่ลิงก์ "ดูทั้งหมด" เพื่อเปิดรายการเฟรมเวิร์กของแอปพลิเคชัน หรือคุณสามารถไปที่ Logto Console > Applications แล้วคลิกปุ่ม "สร้างแอปพลิเคชัน" Get started
  2. ในหน้าต่างที่เปิดขึ้น ให้คลิกที่ส่วน "เว็บแบบดั้งเดิม" หรือกรองเฟรมเวิร์ก "เว็บแบบดั้งเดิม" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก "WordPress" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ Frameworks
  3. กรอกชื่อแอปพลิเคชัน เช่น "Bookstore" แล้วคลิก "สร้างแอปพลิเคชัน"

🎉 เยี่ยมมาก! คุณเพิ่งสร้างแอปพลิเคชันแรกของคุณใน Logto คุณจะเห็นหน้าข้อความแสดงความยินดีซึ่งมีคู่มือการเชื่อมต่ออย่างละเอียด ให้ทำตามคู่มือเพื่อดูประสบการณ์ที่จะเกิดขึ้นในแอปพลิเคชันของคุณ

ผสานรวม WordPress กับ Logto​

ติดตั้งปลั๊กอิน​

  1. ไปที่ ปลั๊กอิน (Plugins) > เพิ่มใหม่ (Add New).
  2. ค้นหา "Logto" หรือกรอก https://wordpress.org/plugins/logto/ ในช่องค้นหา
  3. คลิก ติดตั้งตอนนี้ (Install Now)
  4. คลิก เปิดใช้งาน (Activate)

ตั้งค่าปลั๊กอิน​

ตอนนี้คุณควรจะเห็นเมนู Logto ในแถบด้านข้างของแผงผู้ดูแล WordPress ของคุณ คลิก Logto > Settings เพื่อกำหนดค่าปลั๊กอิน

บันทึก:

คุณควรสร้างแอปพลิเคชัน เว็บแบบดั้งเดิม (traditional web) ใน Logto Console ก่อนตั้งค่าปลั๊กอิน หากคุณยังไม่ได้สร้าง โปรดดู การผสาน Logto เข้ากับแอปพลิเคชันของคุณ สำหรับข้อมูลเพิ่มเติม

การตั้งค่าขั้นต่ำที่จำเป็นสำหรับเริ่มต้นใช้งานปลั๊กอินคือ:

  • Logto endpoint: จุดปลายทางของ Logto tenant ของคุณ
  • App ID: รหัสแอปของแอปพลิเคชัน Logto ของคุณ
  • App secret: หนึ่งในรหัสลับแอปที่ถูกต้องของแอปพลิเคชัน Logto ของคุณ

ค่าทั้งหมดนี้สามารถดูได้ที่หน้ารายละเอียดแอปพลิเคชันใน Logto Console

หลังจากกรอกค่าแล้ว คลิก บันทึกการเปลี่ยนแปลง (Save Changes) (เลื่อนลงไปด้านล่างของหน้า หากไม่พบปุ่ม)

ตั้งค่า redirect URI​

Redirect URI คือ URL ที่ Logto จะเปลี่ยนเส้นทางผู้ใช้ไปหลังจากยืนยันตัวตนเสร็จ; และ post sign-out redirect URI คือ URL ที่ Logto จะเปลี่ยนเส้นทางผู้ใช้ไปหลังจากออกจากระบบ

นี่คือไดอะแกรมลำดับ (sequence diagram) แบบไม่เป็นทางการเพื่อแสดงขั้นตอนการลงชื่อเข้าใช้:

นี่คือขั้นตอนการออกจากระบบในไดอะแกรมลำดับแบบไม่เป็นทางการ:

หากต้องการเรียนรู้เพิ่มเติมว่าทำไมต้องมีการเปลี่ยนเส้นทาง ดู อธิบายประสบการณ์การลงชื่อเข้าใช้

ในกรณีนี้ คุณต้องตั้งค่าทั้งสอง redirect URI ใน Logto Console ของคุณ วิธีค้นหา redirect URI ให้ไปที่หน้า Logto > Settings ในแผงผู้ดูแล WordPress ของคุณ คุณจะเห็นฟิลด์ Redirect URI และ Post sign-out redirect URI

  1. คัดลอกค่า Redirect URI และ Post sign-out redirect URI แล้ววางลงในฟิลด์ Redirect URIs และ Post sign-out redirect URIs ใน Logto Console ของคุณ
  2. คลิก บันทึกการเปลี่ยนแปลง (Save changes) ใน Logto Console

จุดตรวจสอบ: ทดสอบเว็บไซต์ WordPress ของคุณ​

ตอนนี้คุณสามารถทดสอบการผสาน Logto ในเว็บไซต์ WordPress ของคุณได้แล้ว:

  1. เปิดหน้าต่างเบราว์เซอร์แบบไม่ระบุตัวตนหากจำเป็น
  2. เข้าเว็บไซต์ WordPress ของคุณแล้วคลิก เข้าสู่ระบบ (Log in) หากมี; หรือเข้าหน้าล็อกอินโดยตรง (เช่น https://example.com/wp-login.php)
  3. หน้าจะเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto
  4. ดำเนินการลงชื่อเข้าใช้หรือสมัครสมาชิกให้เสร็จสิ้น
  5. หลังจากยืนยันตัวตนสำเร็จ คุณจะถูกเปลี่ยนเส้นทางกลับไปยังเว็บไซต์ WordPress ของคุณและเข้าสู่ระบบโดยอัตโนมัติ
  6. คลิก ออกจากระบบ (Log out) เพื่อออกจากระบบเว็บไซต์ WordPress ของคุณ
  7. คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าออกจากระบบของ Logto แล้วกลับไปยังเว็บไซต์ WordPress ของคุณ
  8. คุณจะถูกออกจากระบบเว็บไซต์ WordPress ของคุณ

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการตั้งค่าปลั๊กอิน WordPress โปรดดูที่ เริ่มต้นใช้งาน WordPress อย่างรวดเร็ว

เพิ่มตัวเชื่อมต่อ Slack​

เพื่อเปิดใช้งานการลงชื่อเข้าใช้อย่างรวดเร็วและเพิ่มอัตราการเปลี่ยนผู้ใช้ ให้เชื่อมต่อกับ WordPress ในฐานะผู้ให้บริการข้อมูลระบุตัวตน (Identity provider) ตัวเชื่อมต่อโซเชียลของ Logto ช่วยให้คุณสร้างการเชื่อมต่อนี้ได้ภายในไม่กี่นาที โดยสามารถกรอกพารามิเตอร์ได้หลายค่า

ในการเพิ่มตัวเชื่อมต่อโซเชียล ให้ทำตามขั้นตอนดังนี้:

  1. ไปที่ Console > Connectors > Social Connectors
  2. คลิก "Add social connector" และเลือก "Slack"
  3. ทำตามคู่มือ README กรอกข้อมูลที่จำเป็น และปรับแต่งการตั้งค่า
Connector tab
บันทึก:

หากคุณกำลังทำตามคู่มือ Connector แบบ in-place คุณสามารถข้ามส่วนถัดไปได้

ตั้งค่า Slack OAuth app​

ตั้งค่า Slack App​

ไปที่ Slack API: Applications และลงชื่อเข้าใช้ด้วยบัญชี Slack ของคุณ หากคุณยังไม่มีบัญชี สามารถลงทะเบียนได้

จากนั้น สร้างแอป

ขั้นตอนที่ 1: ค้นหา Client ID และ Client Secret

คุณสามารถค้นหา Client ID และ Client Secret ได้ในส่วน "Basic Information"

ขั้นตอนที่ 2: ตั้งค่า redirect URLs

ไปที่ส่วน "OAuth & Permissions" คุณจะพบฟอร์ม "Redirect URLs"

ในกรณีของเรา จะเป็น ${your_logto_endpoint}/callback/${connector_id} เช่น https://foo.logto.app/callback/${connector_id} โดย connector_id สามารถดูได้ที่แถบด้านบนของหน้ารายละเอียดตัวเชื่อมต่อใน Logto Admin Console

คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่ เอกสาร Slack API

กำหนดค่าตัวเชื่อมต่อของคุณ​

ในหน้ากำหนดค่าตัวเชื่อมต่อ Logto ของคุณ ให้กรอกข้อมูลในช่องต่อไปนี้ด้วยค่าที่ได้จากหน้า "Keys and tokens" ส่วน "OAuth 2.0 Client ID and Client Secret" ของแอปคุณ:

  • clientId: Client ID ของแอปคุณ
  • clientSecret: Client Secret ของแอปคุณ

scope คือรายการ OpenID scopes ที่คั่นด้วยช่องว่าง หากไม่ระบุ จะใช้ scope เริ่มต้นคือ openid profile

ประเภทของ config​

NameType
clientIdstring
clientSecretstring
scopestring

บันทึกการตั้งค่าของคุณ​

โปรดตรวจสอบให้แน่ใจว่าคุณได้กรอกค่าที่จำเป็นในพื้นที่การตั้งค่าตัวเชื่อมต่อ Logto เรียบร้อยแล้ว คลิก "บันทึกและเสร็จสิ้น" (หรือ "บันทึกการเปลี่ยนแปลง") และตัวเชื่อมต่อ Slack ควรพร้อมใช้งานแล้ว

เปิดใช้งานตัวเชื่อมต่อ Slack ในประสบการณ์การลงชื่อเข้าใช้​

เมื่อคุณสร้างตัวเชื่อมต่อโซเชียลสำเร็จแล้ว คุณสามารถเปิดใช้งานเป็นปุ่ม "ดำเนินการต่อด้วย Slack" ในประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience) ได้

  1. ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ > สมัครและลงชื่อเข้าใช้
  2. (ไม่บังคับ) เลือก "ไม่เกี่ยวข้อง" สำหรับตัวระบุการสมัคร หากคุณต้องการเฉพาะการเข้าสู่ระบบโซเชียล
  3. เพิ่มตัวเชื่อมต่อ Slack ที่ตั้งค่าไว้แล้วในส่วน "เข้าสู่ระบบโซเชียล" (Social sign-in)
แท็บประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience tab)

การทดสอบและการตรวจสอบความถูกต้อง​

กลับไปที่แอป ปลั๊กอิน WordPress ของคุณ ตอนนี้คุณควรจะสามารถลงชื่อเข้าใช้ด้วย Slack ได้แล้ว ขอให้สนุก!

อ่านเพิ่มเติม​

กระบวนการสำหรับผู้ใช้ปลายทาง: Logto มีโฟลว์การยืนยันตัวตนสำเร็จรูปพร้อมใช้งาน รวมถึง MFA และ Enterprise SSO พร้อม API อันทรงพลังสำหรับการปรับแต่งการตั้งค่าบัญชี การตรวจสอบความปลอดภัย และประสบการณ์แบบหลายผู้เช่า (multi-tenant) ได้อย่างยืดหยุ่น

การอนุญาต (Authorization): การอนุญาต (Authorization) กำหนดว่าผู้ใช้สามารถทำอะไรหรือเข้าถึงทรัพยากรใดได้บ้างหลังจากได้รับการยืนยันตัวตนแล้ว สำรวจวิธีปกป้อง API ของคุณสำหรับแอปเนทีฟและแอปหน้าเดียว (SPA) และการใช้งานการควบคุมการเข้าถึงตามบทบาท (RBAC)

องค์กร (Organizations): ฟีเจอร์องค์กรมีประสิทธิภาพอย่างยิ่งใน SaaS แบบหลายผู้เช่าและแอป B2B โดยช่วยให้สร้างผู้เช่า จัดการสมาชิก RBAC ระดับองค์กร และ Just-in-Time Provisioning ได้

ชุดบทความ Customer IAM: บทความต่อเนื่องเกี่ยวกับการจัดการข้อมูลระบุตัวตนและการเข้าถึงของลูกค้า (Customer IAM) ตั้งแต่ระดับพื้นฐาน 101 ไปจนถึงหัวข้อขั้นสูงและอื่น ๆ