การเชื่อมต่อกับ WordPress

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

กระบวนการลงชื่อเข้าใช้ด้วยการเชื่อมต่อ Logto#

1. ผู้ใช้เข้าถึงหน้าล็อกอินของเว็บไซต์ WordPress ซึ่งโดยปกติจะเป็น [SITE URL]/wp-login.php และมีปุ่มลงชื่อเข้าใช้ด้วย OIDC
2. ผู้ใช้คลิกที่ปุ่มและถูกส่งต่อไปยังหน้าลงชื่อเข้าใช้ของ Logto เพื่อปลดประสบการณ์การลงชื่อเข้าใช้ที่คุณปรับแต่งไว้
3. ผู้ใช้เลือกวิธีการลงชื่อเข้าใช้ และ Logto จะยืนยันตัวตนของผู้ใช้
4. เมื่อยืนยันตัวตนของผู้ใช้แล้ว Logto จะส่งต่อผู้ใช้กลับไปยังเว็บไซต์ WordPress
5. WordPress จะสร้างบัญชีผู้ใช้ใหม่หรือลงชื่อเข้าใช้บัญชีผู้ใช้ที่มีอยู่และส่งต่อผู้ใช้ไปยังหน้าก่อนหน้า

ตอนนี้เราได้เห็นผลลัพธ์สุดท้ายของการเชื่อมต่อ Logto กับ WordPress แล้ว ไปดูขั้นตอนการเชื่อมต่อกันเร็ว

สิ่งที่ต้องเตรียม#

ก่อนที่เราจะเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:

1. เว็บไซต์ WordPress: ต้องมีเว็บไซต์ WordPress ที่ทำงานได้เต็มที่แน่นอน ตรวจสอบให้มีการเข้าถึงระดับผู้ดูแลสามารถจัดการปลั๊กอินและตั้งค่าการกำหนดได้
2. อินสแตนซ์ Logto: สร้างอินสแตนซ์ Logto ใหม่ได้โดยไปที่ Logto Console หรือโฮสต์อินสแตนซ์ของคุณเองตาม guide การติดตั้ง

ขั้นตอนการเชื่อมต่อ#

ขั้นตอน 1: สร้างแอปพลิเคชัน Logto#

1. ไปที่ Logto Console
2. ไปที่ "Applications" และคลิก "Create application"
3. คลิก "Create app without framework"
4. เลือก "Traditional Web" เป็นประเภทแอปพลิเคชัน
5. ตั้งชื่อแอปพลิเคชันของคุณและคลิก "Create application"

ขั้นตอน 2: ติดตั้งปลั๊กอิน#

1. ล็อกอินเข้าสู่เว็บไซต์ WordPress ของคุณ
2. ไปที่ "Plugins" และคลิก "Add New"
3. ค้นหา "OpenID Connect Generic" และติดตั้งปลั๊กอินโดย daggerhart
4. เปิดใช้งานปลั๊กอิน

ขั้นตอน 3: การกำหนดค่าปลั๊กอิน#

1. เปิดการตั้งค่าปลั๊กอินโดยไปที่ "Settings" > "OpenID Connect Generic"
2. กรอกข้อมูลในช่องต่อไปนี้:
   • Client ID: รหัสแอปพลิเคชันของคุณใน Logto
   • Client Secret: ความลับของแอปพลิเคชันของคุณใน Logto
   • OpenID Scope: ใส่ email profile openid offline_access
   • Login Endpoint URL: URL ของจุดให้สิทธิ์ของแอปพลิเคชันของคุณใน Logto ที่เป็น https://[tenant-id].logto.app/oidc/auth คุณสามารถคลิก "show endpoint details" ในหน้าแอปพลิเคชัน Logto เพื่อรับ URL ได้
   • Userinfo Endpoint URL: URL ของจุดให้ข้อมูลผู้ใช้ของแอปพลิเคชันของคุณใน Logto ซึ่งคือ https://[tenant-id].logto.app/oidc/me
   • Token Validation Endpoint URL: URL ของจุดตรวจสอบโทเค็นของแอปพลิเคชันของคุณใน Logto ที่เป็น https://[tenant-id].logto.app/oidc/token
   • End Session Endpoint URL: URL ของจุดสิ้นสุดเซสชันของแอปพลิเคชันของคุณใน Logto ที่เป็น https://[tenant-id].logto.app/oidc/session/end
   • Identity Key: คีย์ที่ไม่ซ้ำในโทเค็น ID ที่บรรจุตัวตนของผู้ใช้ อาจเป็น email หรือ sub ขึ้นอยู่กับการตั้งค่าของคุณ
   • Nickname Key: คีย์ในโทเค็น ID ที่บรรจุนามแฝงของผู้ใช้ คุณสามารถตั้งค่าให้เป็น sub และเปลี่ยนแปลงได้ในภายหลัง

ขั้นตอน 4: การกำหนดค่าแอปพลิเคชัน#

1. ในการตั้งค่าปลั๊กอิน เลื่อนลงไปยังส่วน "Notes" และคัดลอกค่า "Redirect URI"
2. ใน Logto Console ไปที่การตั้งค่าของแอปพลิเคชันของคุณ
3. เพิ่มค่า "Redirect URI" ที่คัดลอกมาไปยังช่อง "Redirect URIs"

ขั้นตอน 5: ทดสอบการเชื่อมต่อ#

1. ออกจากระบบเว็บไซต์ WordPress ของคุณ
2. ไปที่หน้าล็อกอินของ WordPress และคลิกปุ่ม "Sign in with Logto"
3. คุณจะถูกส่งต่อไปยังหน้าลงชื่อเข้าใช้ของ Logto
4. ลงชื่อเข้าใช้ด้วยบัญชี Logto ของคุณ
5. คุณจะถูกส่งต่อกลับไปยังเว็บไซต์ WordPress และเข้าสู่ระบบอัตโนมัติ

ขั้นตอนสุดท้าย#

ยินดีด้วย! คุณได้เชื่อมต่อ Logto กับ WordPress อย่างสำเร็จแล้ว

หากต้องการปรับแต่งการเชื่อมต่อเพิ่มเติม คุณสามารถสำรวจคุณสมบัติเพิ่มเติมในหน้าการตั้งค่าปลั๊กอิน เช่น การเชื่อมต่อลิงก์ผู้ใช้ที่มีอยู่ การปรับแต่งปุ่มลงชื่อเข้าใช้ การใช้โหมด SSO และอื่น ๆ