Logto คือทางเลือกแทน Auth0 ที่ออกแบบมาสำหรับแอปและผลิตภัณฑ์ SaaS ยุคใหม่ โดยมีทั้งบริการ Cloud และ Open-source เพื่อช่วยให้คุณเปิดตัวระบบการจัดการเอกลักษณ์และการเข้าถึง (IAM) ได้อย่างรวดเร็ว สนุกกับการยืนยันตัวตน (การยืนยันตัวตน), การอนุญาต (การอนุญาต), และการจัดการหลายผู้เช่า ครบจบในที่เดียว
เราแนะนำให้เริ่มต้นด้วย tenant สำหรับการพัฒนาแบบฟรีบน Logto Cloud เพื่อให้คุณสามารถสำรวจฟีเจอร์ทั้งหมดได้อย่างง่ายดาย
ในบทความนี้ เราจะพาคุณไปทีละขั้นตอนเพื่อสร้างประสบการณ์ลงชื่อเข้าใช้ Xiaomi (การยืนยันตัวตนของผู้ใช้) อย่างรวดเร็วด้วย PHP และ Logto
ข้อกำหนดเบื้องต้น
- มี Logto instance ที่พร้อมใช้งาน ดู หน้าแนะนำ เพื่อเริ่มต้นใช้งาน
- มีความรู้พื้นฐานเกี่ยวกับ PHP
- มีบัญชี Xiaomi ที่ใช้งานได้
สร้างแอปพลิเคชันใน Logto
Logto สร้างขึ้นบนพื้นฐานของการยืนยันตัวตน OpenID Connect (OIDC) และการอนุญาต OAuth 2.0 โดยรองรับการจัดการข้อมูลระบุตัวตนแบบรวมศูนย์ข้ามหลายแอปพลิเคชัน ซึ่งมักเรียกว่า การลงชื่อเข้าใช้ครั้งเดียว (Single Sign-On; SSO)
ในการสร้างแอปพลิเคชัน เว็บแบบดั้งเดิม ของคุณ เพียงทำตามขั้นตอนเหล่านี้:
- เปิด Logto Console ในส่วน "เริ่มต้นใช้งาน" ให้คลิกที่ลิงก์ "ดูทั้งหมด" เพื่อเปิดรายการเฟรมเวิร์กของแอปพลิเคชัน หรือคุณสามารถไปที่ Logto Console > Applications แล้วคลิกปุ่ม "สร้างแอปพลิเคชัน"
- ในหน้าต่างที่เปิดขึ้น ให้คลิกที่ส่วน "เว็บแบบดั้งเดิม" หรือกรองเฟรมเวิร์ก "เว็บแบบดั้งเดิม" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก "Laravel" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ
- กรอกชื่อแอปพลิเคชัน เช่น "Bookstore" แล้วคลิก "สร้างแอปพลิเคชัน"
🎉 เยี่ยมมาก! คุณเพิ่งสร้างแอปพลิเคชันแรกของคุณใน Logto คุณจะเห็นหน้าข้อความแสดงความยินดีซึ่งมีคู่มือการเชื่อมต่ออย่างละเอียด ให้ทำตามคู่มือเพื่อดูประสบการณ์ที่จะเกิดขึ้นในแอปพลิเคชันของคุณ
ผสานรวม Laravel กับ Logto
คู่มือนี้จะแสดงวิธีการผสานรวม Logto เข้ากับเว็บแอปพลิเคชัน PHP ของคุณ
- ตัวอย่าง ใช้ Laravel แต่แนวคิดเดียวกันนี้สามารถนำไปใช้กับเฟรมเวิร์กอื่น ๆ ได้เช่นกัน
การติดตั้ง
composer require logto/sdk
เริ่มต้น LogtoClient
ก่อนอื่น สร้างการตั้งค่า Logto:
use Logto\Sdk\LogtoClient;
use Logto\Sdk\LogtoConfig;
$client = new LogtoClient(
new LogtoConfig(
endpoint: "https://you-logto-endpoint.app",
appId: "replace-with-your-app-id",
appSecret: "replace-with-your-app-secret",
),
);
คุณสามารถค้นหาและคัดลอก "App Secret" ได้จากหน้ารายละเอียดแอปพลิเคชันใน Admin Console:

โดยปกติ SDK จะใช้ session ของ PHP ที่มีมาในตัวเพื่อเก็บข้อมูล Logto หากคุณต้องการใช้ที่เก็บข้อมูลอื่น สามารถส่งอ็อบเจกต์ storage แบบกำหนดเองเป็นพารามิเตอร์ตัวที่สองได้:
$client = new LogtoClient(
new LogtoConfig(
// ...
),
new YourCustomStorage(),
);
ดูรายละเอียดเพิ่มเติมได้ที่ Storage
กำหนดค่า redirect URIs
ก่อนที่เราจะลงลึกในรายละเอียด นี่คือภาพรวมประสบการณ์ของผู้ใช้ปลายทาง กระบวนการลงชื่อเข้าใช้สามารถสรุปได้ดังนี้:
- แอปของคุณเรียกใช้งานเมธอดลงชื่อเข้าใช้
- ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto สำหรับแอปเนทีฟ ระบบจะเปิดเบราว์เซอร์ของระบบ
- ผู้ใช้ลงชื่อเข้าใช้และถูกเปลี่ยนเส้นทางกลับไปยังแอปของคุณ (ตามที่กำหนดไว้ใน redirect URI)
เกี่ยวกับการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง (redirect-based sign-in)
- กระบวนการยืนยันตัวตนนี้เป็นไปตามโปรโตคอล OpenID Connect (OIDC) และ Logto บังคับใช้มาตรการรักษาความปลอดภัยอย่างเข้มงวดเพื่อปกป้องการลงชื่อเข้าใช้ของผู้ใช้
- หากคุณมีหลายแอป คุณสามารถใช้ผู้ให้บริการข้อมูลระบุตัวตน (Logto) เดียวกันได้ เมื่อผู้ใช้ลงชื่อเข้าใช้แอปหนึ่งแล้ว Logto จะดำเนินการลงชื่อเข้าใช้โดยอัตโนมัติเมื่อผู้ใช้เข้าถึงแอปอื่น
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเหตุผลและประโยชน์ของการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง โปรดดูที่ อธิบายประสบการณ์การลงชื่อเข้าใช้ของ Logto
ในตัวอย่างโค้ดต่อไปนี้ เราถือว่าแอปของคุณกำลังทำงานอยู่ที่ http://localhost:3000/
กำหนดค่า Redirect URI
ไปที่หน้ารายละเอียดแอปพลิเคชันใน Logto Console เพิ่ม redirect URI http://localhost:3000/callback

เช่นเดียวกับการลงชื่อเข้าใช้ ผู้ใช้ควรถูกเปลี่ยนเส้นทางไปที่ Logto เพื่อออกจากเซสชันที่ใช้ร่วมกัน เมื่อเสร็จสิ้นแล้ว ควรเปลี่ยนเส้นทางผู้ใช้กลับไปยังเว็บไซต์ของคุณ ตัวอย่างเช่น เพิ่ม http://localhost:3000/
ในส่วน post sign-out redirect URI
จากนั้นคลิก "Save" เพื่อบันทึกการเปลี่ยนแปลง
จัดการ callback
หลังจากผู้ใช้ลงชื่อเข้าใช้แล้ว Logto จะเปลี่ยนเส้นทางผู้ใช้ไปยัง callback URL ที่คุณตั้งค่าไว้ใน Logto Console ในตัวอย่างนี้ เราใช้ /callback
เป็น callback URL:
Route::get('/callback', function () {
try {
$client->handleSignInCallback(); // จัดการกระบวนการต่าง ๆ ที่เกี่ยวข้อง
} catch (\Throwable $exception) {
return $exception; // เปลี่ยนส่วนนี้เป็นตรรกะจัดการข้อผิดพลาดของคุณ
}
return redirect('/'); // เปลี่ยนเส้นทางผู้ใช้ไปยังหน้าแรกหลังลงชื่อเข้าใช้สำเร็จ
});
สร้างเส้นทางสำหรับลงชื่อเข้าใช้
ในแอปพลิเคชันเว็บของคุณ ให้เพิ่มเส้นทาง (route) เพื่อจัดการคำขอลงชื่อเข้าใช้จากผู้ใช้อย่างถูกต้อง ตัวอย่างเช่น:
Route::get('/sign-in', function () {
return redirect($client->signIn('http://localhost:3000/callback'));
});
แทนที่ http://localhost:3000/callback
ด้วย callback URL ที่คุณตั้งค่าไว้ใน Logto Console สำหรับแอปพลิเคชันนี้
หากคุณต้องการแสดงหน้าสมัครสมาชิก (sign-up) ในหน้าจอแรก สามารถตั้งค่า interactionMode
เป็น signUp
ได้ดังนี้:
Route::get('/sign-in', function () {
return redirect($client->signIn('http://localhost:3000/callback', InteractionMode::signUp));
});
ตอนนี้ ทุกครั้งที่ผู้ใช้ของคุณเข้าชม http://localhost:3000/sign-in
จะเริ่มความพยายามลงชื่อเข้าใช้ใหม่ และเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ของ Logto
หมายเหตุ การสร้างเส้นทางลงชื่อเข้าใช้ไม่ใช่วิธีเดียวในการเริ่มต้นความพยายามลงชื่อเข้าใช้ คุณสามารถใช้เมธอด
signIn
เพื่อรับ URL สำหรับลงชื่อเข้าใช้และเปลี่ยนเส้นทางผู้ใช้ไปยังหน้านั้นได้เสมอ
สร้างเส้นทางสำหรับลงชื่อออก
หลังจากที่ผู้ใช้ส่งคำขอลงชื่อออก Logto จะล้างข้อมูลการยืนยันตัวตนของผู้ใช้ทั้งหมดในเซสชัน
เพื่อทำความสะอาดเซสชัน PHP และเซสชันของ Logto สามารถสร้างเส้นทางสำหรับลงชื่อออกได้ดังนี้:
Route::get('/sign-out', function () {
return redirect(
// เปลี่ยนเส้นทางผู้ใช้ไปยังหน้าแรกหลังจากลงชื่อออกสำเร็จ
$client->signOut('http://localhost:3000/')
);
});
postLogoutRedirectUri
เป็นตัวเลือกเสริม และหากไม่ได้ระบุไว้ ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าพื้นฐานของ Logto หลังจากออกจากระบบสำเร็จ (โดยจะไม่เปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณ)
หมายเหตุ ชื่อ
postLogoutRedirectUri
มาจากข้อกำหนด OpenID Connect RP-Initiated Logout แม้ว่า Logto จะใช้คำว่า "sign-out" แทน "logout" แต่แนวคิดยังคงเหมือนเดิม
จัดการสถานะการยืนยันตัวตน
ใน Logto SDK เราสามารถใช้ $client->isAuthenticated()
เพื่อตรวจสอบสถานะการยืนยันตัวตน (authentication) ได้ หากผู้ใช้ลงชื่อเข้าใช้แล้ว ค่านี้จะเป็น true หากยังไม่ได้ลงชื่อเข้าใช้ ค่านี้จะเป็น false
เรายังต้องสร้างหน้าแรกสำหรับการสาธิตดังนี้:
- หากผู้ใช้ยังไม่ได้ลงชื่อเข้าใช้ ให้แสดงปุ่มลงชื่อเข้าใช้
- หากผู้ใช้ลงชื่อเข้าใช้แล้ว ให้แสดงปุ่มลงชื่อออก
Route::get('/', function () {
if ($client->isAuthenticated() === false) {
return "ยังไม่ได้ยืนยันตัวตน <a href='/sign-in'>ลงชื่อเข้าใช้</a>";
}
return "<a href='/sign-out'>ลงชื่อออก</a>";
});
จุดตรวจสอบ: ทดสอบแอปพลิเคชันของคุณ
ตอนนี้คุณสามารถทดสอบแอปพลิเคชันของคุณได้แล้ว:
- รันแอปพลิเคชันของคุณ คุณจะเห็นปุ่มลงชื่อเข้าใช้
- คลิกปุ่มลงชื่อเข้าใช้ SDK จะเริ่มกระบวนการลงชื่อเข้าใช้และเปลี่ยนเส้นทางคุณไปยังหน้าลงชื่อเข้าใช้ของ Logto
- หลังจากที่คุณลงชื่อเข้าใช้แล้ว คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณและเห็นปุ่มลงชื่อออก
- คลิกปุ่มลงชื่อออกเพื่อเคลียร์ที่เก็บโทเค็นและออกจากระบบ
เพิ่มตัวเชื่อมต่อ Xiaomi
เพื่อเปิดใช้งานการลงชื่อเข้าใช้อย่างรวดเร็วและเพิ่มอัตราการเปลี่ยนผู้ใช้ ให้เชื่อมต่อกับ Laravel ในฐานะผู้ให้บริการข้อมูลระบุตัวตน (Identity provider) ตัวเชื่อมต่อโซเชียลของ Logto ช่วยให้คุณสร้างการเชื่อมต่อนี้ได้ภายในไม่กี่นาที โดยสามารถกรอกพารามิเตอร์ได้หลายค่า
ในการเพิ่มตัวเชื่อมต่อโซเชียล ให้ทำตามขั้นตอนดังนี้:
- ไปที่ Console > Connectors > Social Connectors
- คลิก "Add social connector" และเลือก "Xiaomi"
- ทำตามคู่มือ README กรอกข้อมูลที่จำเป็น และปรับแต่งการตั้งค่า

หากคุณกำลังทำตามคู่มือ Connector แบบ in-place คุณสามารถข้ามส่วนถัดไปได้
ตั้งค่า Xiaomi OAuth app
เริ่มต้นใช้งาน
- สร้างบัญชีนักพัฒนาที่ Xiaomi Open Platform
- ไปที่ Xiaomi Account Service
- สร้างแอปพลิเคชันใหม่หากคุณยังไม่มี
ตั้งค่าแอปพลิเคชัน Xiaomi OAuth
- ไปที่ Xiaomi Account Service
- ตั้งค่าการตั้งค่า OAuth:
- เปิดแอปพลิเคชันที่คุณต้องการใช้สำหรับเข้าสู่ระบบ คลิกที่ "Callback URL" (หากคุณยังไม่ได้แก้ไข callback URL จะปรากฏเป็น "Enabled")
- เพิ่ม URL callback สำหรับการอนุญาต:
${your_logto_origin}/callback/${connector_id}
connector_id
สามารถดูได้ที่ด้านบนของหน้ารายละเอียดตัวเชื่อมต่อใน Logto Console
- รับ
AppID
และAppSecret
จากหน้ารายละเอียดแอปพลิเคชัน - กรอกข้อมูลในช่อง
clientId
และclientSecret
ใน Logto Console ด้วยค่าจากขั้นตอนที่ 3 - การตั้งค่าเพิ่มเติม (ไม่บังคับ):
skipConfirm
: ข้ามหน้าการยืนยันการอนุญาตของ Xiaomi หรือไม่ เมื่อผู้ใช้เข้าสู่ระบบ Xiaomi อยู่แล้ว ค่าเริ่มต้นคือ false
คำอธิบายขอบเขต (Scopes)
โดยค่าเริ่มต้น ตัวเชื่อมต่อจะร้องขอขอบเขตดังต่อไปนี้:
1
: อ่านโปรไฟล์ผู้ใช้
ขอบเขตที่สามารถใช้ได้:
ค่า Scope | คำอธิบาย | API Interface |
---|---|---|
1 | รับโปรไฟล์ผู้ใช้ | user/profile |
3 | รับ user open_id | user/openIdV2 |
1000 | รับข้อมูลเราเตอร์ Xiaomi | Mi Router |
1001 | เข้าถึงข้อมูลเราเตอร์ Xiaomi ทั้งหมด | Mi Router |
2001 | เข้าถึงปฏิทินคลาวด์ Xiaomi | Mi Cloud |
2002 | เข้าถึงนาฬิกาปลุกคลาวด์ Xiaomi | Mi Cloud |
6000 | ใช้บริการสมาร์ทโฮม Mi Home | Mi Home |
6002 | เพิ่มอุปกรณ์บุคคลที่สามใน Mi Home | Mi Home |
6003 | ควบคุมอุปกรณ์ Xiaomi ด้วย Alexa | Mi Home |
6004 | บริการบุคคลที่สามเข้าถึงอุปกรณ์ Xiaomi | Mi Home |
7000 | ติดตามบัญชี Yellow Pages service | Mi Cloud |
11000 | รับรูปภาพคลาวด์ Xiaomi | Mi Cloud |
12001 | บันทึกข้อมูลแอปลงใน Mi Cloud | Mi Cloud |
12005 | ใช้บริการ ECG สุขภาพ | Health |
16000 | รับบัตรผ่าน Mi Wallet | app/get_pass |
20000 | เปิดใช้งานบริการเสียง XiaoAI | XiaoAI |
40000 | เปิดใช้งานบริการ AI คลาวด์ | Internal Use |
สามารถตั้งค่าขอบเขตหลายค่าได้โดยคั่นด้วยช่องว่าง เช่น: 1 3 6000
ทดสอบตัวเชื่อมต่อ Xiaomi
เสร็จเรียบร้อย อย่าลืม เปิดใช้งานการเข้าสู่ระบบโซเชียล ในประสบการณ์การลงชื่อเข้าใช้
บันทึกการตั้งค่าของคุณ
โปรดตรวจสอบให้แน่ใจว่าคุณได้กรอกค่าที่จำเป็นในพื้นที่การตั้งค่าตัวเชื่อมต่อ Logto เรียบร้อยแล้ว คลิก "บันทึกและเสร็จสิ้น" (หรือ "บันทึกการเปลี่ยนแปลง") และตัวเชื่อมต่อ Xiaomi ควรพร้อมใช้งานแล้ว
เปิดใช้งานตัวเชื่อมต่อ Xiaomi ในประสบการณ์การลงชื่อเข้าใช้
เมื่อคุณสร้างตัวเชื่อมต่อโซเชียลสำเร็จแล้ว คุณสามารถเปิดใช้งานเป็นปุ่ม "ดำเนินการต่อด้วย Xiaomi" ในประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience) ได้
- ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ > สมัครและลงชื่อเข้าใช้
- (ไม่บังคับ) เลือก "ไม่เกี่ยวข้อง" สำหรับตัวระบุการสมัคร หากคุณต้องการเฉพาะการเข้าสู่ระบบโซเชียล
- เพิ่มตัวเชื่อมต่อ Xiaomi ที่ตั้งค่าไว้แล้วในส่วน "เข้าสู่ระบบโซเชียล" (Social sign-in)

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