Logto คือทางเลือกแทน Auth0 ที่ออกแบบมาสำหรับแอปและผลิตภัณฑ์ SaaS ยุคใหม่ โดยมีทั้งบริการ Cloud และ Open-source เพื่อช่วยให้คุณเปิดตัวระบบการจัดการเอกลักษณ์และการเข้าถึง (IAM) ได้อย่างรวดเร็ว สนุกกับการยืนยันตัวตน (การยืนยันตัวตน), การอนุญาต (การอนุญาต), และการจัดการหลายผู้เช่า ครบจบในที่เดียว
เราแนะนำให้เริ่มต้นด้วย tenant สำหรับการพัฒนาแบบฟรีบน Logto Cloud เพื่อให้คุณสามารถสำรวจฟีเจอร์ทั้งหมดได้อย่างง่ายดาย
ในบทความนี้ เราจะพาคุณไปทีละขั้นตอนเพื่อสร้างประสบการณ์ลงชื่อเข้าใช้ GitHub (การยืนยันตัวตนของผู้ใช้) อย่างรวดเร็วด้วย ปลั๊กอิน WordPress และ Logto
ข้อกำหนดเบื้องต้น
- มี Logto instance ที่พร้อมใช้งาน ดู หน้าแนะนำ เพื่อเริ่มต้นใช้งาน
- มีความรู้พื้นฐานเกี่ยวกับ ปลั๊กอิน WordPress
- มีบัญชี GitHub ที่ใช้งานได้
สร้างแอปพลิเคชันใน Logto
Logto สร้างขึ้นบนพื้นฐานของการยืนยันตัวตน OpenID Connect (OIDC) และการอนุญาต OAuth 2.0 โดยรองรับการจัดการข้อมูลระบุตัวตนแบบรวมศูนย์ข้ามหลายแอปพลิเคชัน ซึ่งมักเรียกว่า การลงชื่อเข้าใช้ครั้งเดียว (Single Sign-On; SSO)
ในการสร้างแอปพลิเคชัน เว็บแบบดั้งเดิม ของคุณ เพียงทำตามขั้นตอนเหล่านี้:
- เปิด Logto Console ในส่วน "เริ่มต้นใช้งาน" ให้คลิกที่ลิงก์ "ดูทั้งหมด" เพื่อเปิดรายการเฟรมเวิร์กของแอปพลิเคชัน หรือคุณสามารถไปที่ Logto Console > Applications แล้วคลิกปุ่ม "สร้างแอปพลิเคชัน"
- ในหน้าต่างที่เปิดขึ้น ให้คลิกที่ส่วน "เว็บแบบดั้งเดิม" หรือกรองเฟรมเวิร์ก "เว็บแบบดั้งเดิม" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก "WordPress" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ
- กรอกชื่อแอปพลิเคชัน เช่น "Bookstore" แล้วคลิก "สร้างแอปพลิเคชัน"
🎉 เยี่ยมมาก! คุณเพิ่งสร้างแอปพลิเคชันแรกของคุณใน Logto คุณจะเห็นหน้าข้อความแสดงความยินดีซึ่งมีคู่มือการเชื่อมต่ออย่างละเอียด ให้ทำตามคู่มือเพื่อดูประสบการณ์ที่จะเกิดขึ้นในแอปพลิเคชันของคุณ
ผสานรวม WordPress กับ Logto
ติดตั้งปลั๊กอิน
- จากแผงผู้ดูแล WordPress
- จากการอัปโหลด
- ไปที่ ปลั๊กอิน (Plugins) > เพิ่มใหม่ (Add New).
- ค้นหา "Logto" หรือกรอก https://wordpress.org/plugins/logto/ ในช่องค้นหา
- คลิก ติดตั้งตอนนี้ (Install Now)
- คลิก เปิดใช้งาน (Activate)
- ดาวน์โหลดปลั๊กอิน Logto WordPress จากลิงก์ใดลิงก์หนึ่งต่อไปนี้:
- รุ่นล่าสุด (Latest release): ดาวน์โหลดไฟล์ที่มีชื่อในรูปแบบ
logto-plugin-<version>.zip
- ไดเรกทอรีปลั๊กอิน WordPress (WordPress plugin directory): ดาวน์โหลดไฟล์โดยคลิกปุ่ม ดาวน์โหลด (Download)
- รุ่นล่าสุด (Latest release): ดาวน์โหลดไฟล์ที่มีชื่อในรูปแบบ
- ดาวน์โหลดไฟล์ ZIP ของปลั๊กอิน
- ไปที่ ปลั๊กอิน (Plugins) > เพิ่มใหม่ (Add New) ในแผงผู้ดูแล WordPress ของคุณ
- คลิก อัปโหลดปลั๊กอิน (Upload Plugin)
- เลือกไฟล์ ZIP ที่ดาวน์โหลดมาแล้วคลิก ติดตั้งตอนนี้ (Install Now)
- คลิก เปิดใช้งาน (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
- คัดลอกค่า Redirect URI และ Post sign-out redirect URI แล้ววางลงในฟิลด์ Redirect URIs และ Post sign-out redirect URIs ใน Logto Console ของคุณ
- คลิก บันทึกการเปลี่ยนแปลง (Save changes) ใน Logto Console
จุดตรวจสอบ: ทดสอบเว็บไซต์ WordPress ของคุณ
ตอนนี้คุณสามารถทดสอบการผสาน Logto ในเว็บไซต์ WordPress ของคุณได้แล้ว:
- เปิดหน้าต่างเบราว์เซอร์แบบไม่ระบุตัวตนหากจำเป็น
- เข้าเว็บไซต์ WordPress ของคุณแล้วคลิก เข้าสู่ระบบ (Log in) หากมี; หรือเข้าหน้าล็อกอินโดยตรง (เช่น
https://example.com/wp-login.php
) - หน้าจะเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto
- ดำเนินการลงชื่อเข้าใช้หรือสมัครสมาชิกให้เสร็จสิ้น
- หลังจากยืนยันตัวตนสำเร็จ คุณจะถูกเปลี่ยนเส้นทางกลับไปยังเว็บไซต์ WordPress ของคุณและเข้าสู่ระบบโดยอัตโนมัติ
- คลิก ออกจากระบบ (Log out) เพื่อออกจากระบบเว็บไซต์ WordPress ของคุณ
- คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าออกจากระบบของ Logto แล้วกลับไปยังเว็บไซต์ WordPress ของคุณ
- คุณจะถูกออกจากระบบเว็บไซต์ WordPress ของคุณ
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการตั้งค่าปลั๊กอิน WordPress โปรดดูที่ เริ่มต้นใช้งาน WordPress อย่างรวดเร็ว
เพิ่มตัวเชื่อมต่อ GitHub
เพื่อเปิดใช้งานการลงชื่อเข้าใช้อย่างรวดเร็วและเพิ่มอัตราการเปลี่ยนผู้ใช้ ให้เชื่อมต่อกับ WordPress ในฐานะผู้ให้บริการข้อมูลระบุตัวตน (Identity provider) ตัวเชื่อมต่อโซเชียลของ Logto ช่วยให้คุณสร้างการเชื่อมต่อนี้ได้ภายในไม่กี่นาที โดยสามารถกรอกพารามิเตอร์ได้หลายค่า
ในการเพิ่มตัวเชื่อมต่อโซเชียล ให้ทำตามขั้นตอนดังนี้:
- ไปที่ Console > Connectors > Social Connectors
- คลิก "Add social connector" และเลือก "GitHub"
- ทำตามคู่มือ README กรอกข้อมูลที่จำเป็น และปรับแต่งการตั้งค่า

หากคุณกำลังทำตามคู่มือ Connector แบบ in-place คุณสามารถข้ามส่วนถัดไปได้
ตั้งค่า GitHub OAuth app
ขั้นตอนที่ 1: สร้าง OAuth app บน GitHub
ก่อนที่คุณจะใช้ GitHub เป็นผู้ให้บริการการยืนยันตัวตน คุณต้องสร้าง OAuth App บน GitHub เพื่อรับข้อมูลประจำตัว OAuth 2.0
- ไปที่ GitHub และลงชื่อเข้าใช้ด้วยบัญชีของคุณ หรือสร้างบัญชีใหม่หากจำเป็น
- ไปที่ Settings > Developer settings > OAuth apps
- คลิก New OAuth App เพื่อขึ้นทะเบียนแอปใหม่:
- Application name: กรอกชื่อที่สื่อความหมายสำหรับแอปของคุณ
- Homepage URL: กรอก URL หน้าแรกของแอปพลิเคชันของคุณ
- Authorization callback URL: คัดลอก Callback URI จากตัวเชื่อมต่อ GitHub ของคุณใน Logto แล้ววางที่นี่ หลังจากผู้ใช้ลงชื่อเข้าใช้ด้วย GitHub แล้ว พวกเขาจะถูกเปลี่ยนเส้นทางมาที่นี่พร้อมรหัสการอนุญาตที่ Logto ใช้เพื่อดำเนินการยืนยันตัวตนให้เสร็จสมบูรณ์
- Application description: (ไม่บังคับ) เพิ่มคำอธิบายสั้น ๆ เกี่ยวกับแอปของคุณ
- คลิก Register application เพื่อสร้าง OAuth App
เราแนะนำว่าไม่ควรติ๊กเลือก Enable Device Flow เพราะผู้ใช้ที่ลงชื่อเข้าใช้ด้วย GitHub บนอุปกรณ์มือถือจะต้องยืนยันการลงชื่อเข้าใช้ครั้งแรกในแอป GitHub บนมือถือ ซึ่งผู้ใช้ GitHub จำนวนมากไม่ได้ติดตั้งแอป GitHub บนโทรศัพท์ อาจทำให้ขั้นตอนการลงชื่อเข้าใช้ติดขัด เปิดใช้งานเฉพาะเมื่อคุณคาดว่าผู้ใช้จะยืนยันการลงชื่อเข้าใช้ผ่านแอป GitHub บนมือถือเท่านั้น ดูรายละเอียดเกี่ยวกับ device flow
สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่า GitHub OAuth Apps ดูที่ Creating an OAuth App
ขั้นตอนที่ 2: ตั้งค่าตัวเชื่อมต่อ Logto ของคุณ
หลังจากสร้าง OAuth app ใน GitHub แล้ว คุณจะถูกเปลี่ยนเส้นทางไปยังหน้ารายละเอียดซึ่งคุณสามารถคัดลอก Client ID และสร้าง Client secret ได้
- คัดลอก Client ID จาก GitHub OAuth app ของคุณแล้ววางลงในช่อง
clientId
ใน Logto - คลิก Generate a new client secret ใน GitHub เพื่อสร้าง secret ใหม่ จากนั้นคัดลอกและวางลงในช่อง
clientSecret
ใน Logto - คลิก Save and Done ใน Logto เพื่อเชื่อมต่อระบบข้อมูลระบุตัวตนของคุณกับ GitHub
เก็บรักษา Client secret ของคุณให้ปลอดภัยและอย่าเปิดเผยในโค้ดฝั่งไคลเอนต์ Client secret ของ GitHub ไม่สามารถกู้คืนได้หากสูญหาย — คุณจะต้องสร้างใหม่เท่านั้น
ขั้นตอนที่ 3: ตั้งค่าขอบเขต (Scopes) (ไม่บังคับ)
ขอบเขต (Scopes) กำหนดสิทธิ์ที่แอปของคุณร้องขอจากผู้ใช้ และควบคุมว่าแอปของคุณจะเข้าถึงข้อมูลใดจากบัญชี GitHub ของพวกเขาได้บ้าง
ใช้ช่อง Scopes
ใน Logto เพื่อร้องขอสิทธิ์เพิ่มเติมจาก GitHub เลือกวิธีการต่อไปนี้ตามความต้องการของคุณ:
ตัวเลือกที่ 1: ไม่ต้องการขอบเขต API เพิ่มเติม
- เว้นว่างช่อง
Scopes
ในตัวเชื่อมต่อ GitHub ของคุณใน Logto - ขอบเขตเริ่มต้น
read:user
จะถูกขอโดยอัตโนมัติเพื่อให้ Logto สามารถดึงข้อมูลผู้ใช้พื้นฐาน (เช่น อีเมล ชื่อ รูปโปรไฟล์) ได้อย่างถูกต้อง
ตัวเลือกที่ 2: ขอขอบเขตเพิ่มเติมขณะลงชื่อเข้าใช้
- ดู GitHub scopes สำหรับ OAuth apps ทั้งหมด และเพิ่มเฉพาะขอบเขตที่แอปของคุณต้องการ
- กรอกขอบเขตทั้งหมดที่ต้องการในช่อง Scopes โดยคั่นด้วยช่องว่าง
- ขอบเขตที่คุณระบุที่นี่จะเขียนทับค่าตั้งต้น ดังนั้นควรใส่ขอบเขตการยืนยันตัวตนเสมอ:
read:user
- ขอบเขตเพิ่มเติมที่พบบ่อย เช่น:
repo
: ควบคุม repository ส่วนตัวทั้งหมดpublic_repo
: เข้าถึง repository สาธารณะuser:email
: เข้าถึงอีเมลของผู้ใช้notifications
: เข้าถึงการแจ้งเตือน
- ตรวจสอบให้แน่ใจว่าขอบเขตทั้งหมดสะกดถูกต้องและใช้งานได้ ขอบเขตที่ผิดหรือไม่รองรับจะทำให้เกิดข้อผิดพลาด "Invalid scope" จาก GitHub
ตัวเลือกที่ 3: ขอขอบเขตเพิ่มเติมภายหลัง
- หลังจากผู้ใช้ลงชื่อเข้าใช้แล้ว คุณสามารถร้องขอขอบเขตเพิ่มเติมตามต้องการโดยเริ่ม federated social authorization flow ใหม่และอัปเดต token set ของผู้ใช้
- ขอบเขตเพิ่มเติมเหล่านี้ไม่จำเป็นต้องกรอกในช่อง
Scopes
ของตัวเชื่อมต่อ GitHub ใน Logto และสามารถทำได้ผ่าน Social Verification API ของ Logto
เมื่อทำตามขั้นตอนเหล่านี้ ตัวเชื่อมต่อ GitHub ของคุณใน Logto จะร้องขอสิทธิ์ที่แอปของคุณต้องการอย่างพอดี — ไม่มากหรือน้อยเกินไป
หากแอปของคุณร้องขอขอบเขตเหล่านี้เพื่อเข้าถึง GitHub API และดำเนินการต่าง ๆ อย่าลืมเปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ GitHub ของ Logto ดูรายละเอียดในหัวข้อถัดไป
ขั้นตอนที่ 4: การตั้งค่าทั่วไป
นี่คือการตั้งค่าทั่วไปบางประการที่แม้จะไม่ขัดขวางการเชื่อมต่อกับ GitHub แต่ก็อาจมีผลต่อประสบการณ์การยืนยันตัวตนของผู้ใช้ปลายทาง
ซิงค์ข้อมูลโปรไฟล์
ในตัวเชื่อมต่อ GitHub คุณสามารถตั้งค่านโยบายการซิงค์ข้อมูลโปรไฟล์ เช่น ชื่อผู้ใช้และรูปโปรไฟล์ ได้ดังนี้:
- ซิงค์เฉพาะตอนสมัครสมาชิก: ดึงข้อมูลโปรไฟล์ครั้งเดียวเมื่อผู้ใช้ลงชื่อเข้าใช้ครั้งแรก
- ซิงค์ทุกครั้งที่ลงชื่อเข้าใช้: อัปเดตข้อมูลโปรไฟล์ทุกครั้งที่ผู้ใช้ลงชื่อเข้าใช้
เก็บโทเค็นเพื่อเข้าถึง GitHub APIs (ไม่บังคับ)
หากคุณต้องการเข้าถึง GitHub APIs และดำเนินการต่าง ๆ ด้วยการอนุญาตของผู้ใช้ (ไม่ว่าจะผ่าน social sign-in หรือ account linking) Logto จำเป็นต้องขอขอบเขต API ที่เกี่ยวข้องและเก็บโทเค็นไว้
- เพิ่มขอบเขตที่ต้องการตามคำแนะนำข้างต้น
- เปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ GitHub ของ Logto Logto จะเก็บ GitHub access token ไว้อย่างปลอดภัยใน Secret Vault
เมื่อใช้ OAuth App ของ GitHub ตามที่อธิบายไว้ในคู่มือนี้ คุณจะไม่ได้รับ refresh token จาก GitHub เพราะ access token จะไม่มีวันหมดอายุ เว้นแต่ผู้ใช้จะเพิกถอนด้วยตนเอง ดังนั้นคุณไม่จำเป็นต้องเพิ่ม offline_access
ในช่อง Scopes
— การเพิ่มอาจทำให้เกิดข้อผิดพลาด
หากคุณต้องการให้ access token หมดอายุหรือใช้ refresh token ให้พิจารณาเชื่อมต่อกับ GitHub App แทน ศึกษา ความแตกต่างระหว่าง GitHub Apps และ OAuth Apps
ขั้นตอนที่ 5: ทดสอบการเชื่อมต่อของคุณ (ไม่บังคับ)
ก่อนเปิดใช้งานจริง ให้ทดสอบการเชื่อมต่อ GitHub ของคุณ:
- ใช้ตัวเชื่อมต่อใน Logto development tenant
- ตรวจสอบว่าผู้ใช้สามารถลงชื่อเข้าใช้ด้วย GitHub ได้
- ตรวจสอบว่าขอบเขตที่ร้องขอถูกต้อง
- ทดสอบเรียก API หากคุณเก็บโทเค็นไว้
GitHub OAuth Apps สามารถใช้งานได้กับบัญชีผู้ใช้ GitHub ทันที — ไม่จำเป็นต้องมีผู้ใช้ทดสอบหรือขออนุมัติแอปเหมือนบางแพลตฟอร์มอื่น
บันทึกการตั้งค่าของคุณ
โปรดตรวจสอบให้แน่ใจว่าคุณได้กรอกค่าที่จำเป็นในพื้นที่การตั้งค่าตัวเชื่อมต่อ Logto เรียบร้อยแล้ว คลิก "บันทึกและเสร็จสิ้น" (หรือ "บันทึกการเปลี่ยนแปลง") และตัวเชื่อมต่อ GitHub ควรพร้อมใช้งานแล้ว
เปิดใช้งานตัวเชื่อมต่อ GitHub ในประสบการณ์การลงชื่อเข้าใช้
เมื่อคุณสร้างตัวเชื่อมต่อโซเชียลสำเร็จแล้ว คุณสามารถเปิดใช้งานเป็นปุ่ม "ดำเนินการต่อด้วย GitHub" ในประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience) ได้
- ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ > สมัครและลงชื่อเข้าใช้
- (ไม่บังคับ) เลือก "ไม่เกี่ยวข้อง" สำหรับตัวระบุการสมัคร หากคุณต้องการเฉพาะการเข้าสู่ระบบโซเชียล
- เพิ่มตัวเชื่อมต่อ GitHub ที่ตั้งค่าไว้แล้วในส่วน "เข้าสู่ระบบโซเชียล" (Social sign-in)

การทดสอบและการตรวจสอบความถูกต้อง
กลับไปที่แอป ปลั๊กอิน WordPress ของคุณ ตอนนี้คุณควรจะสามารถลงชื่อเข้าใช้ด้วย GitHub ได้แล้ว ขอให้สนุก!
อ่านเพิ่มเติม
กระบวนการสำหรับผู้ใช้ปลายทาง: 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 ไปจนถึงหัวข้อขั้นสูงและอื่น ๆ