ในบทช่วยสอนนี้ เราจะสาธิตวิธีการสร้างลำดับการตรวจสอบสิทธิ์ด้วย Logto ใน Capacitor ซึ่งจะช่วยให้คุณสร้างลำดับการเข้าสู่ระบบและลงทะเบียนข้ามแพลตฟอร์มได้อย่างง่ายดาย
ในบทช่วยสอนนี้ เราจะสาธิตวิธีการสร้างลำดับการตรวจสอบสิทธิ์ด้วย Logto ใน Capacitor ซึ่งจะช่วยให้คุณสร้างลำดับการเข้าสู่ระบบและลงทะเบียนข้ามแพลตฟอร์มได้อย่างง่ายดาย
ก่อนที่จะเริ่ม ตรวจสอบว่าคุณมีสิ่งต่อไปนี้:
เริ่มต้นด้วยการสร้างแอปพลิเคชัน Logto ที่มีประเภท "Native" แอปพลิเคชัน Logto ทำหน้าที่เป็นแอปพลิเคชันไคลเอนต์ในลำดับ OAuth 2.0 และ OpenID Connect (OIDC) ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:
หลังจากสร้างแอปพลิเคชัน Logto แล้ว ให้กำหนดค่า redirect URI ซึ่งใช้เพื่อเปลี่ยนเส้นทางผู้ใช้กลับไปยังแอปพลิเคชันของคุณหลังจากสิ้นสุดกระบวนการตรวจสอบสิทธิ์
ตรวจสอบว่า URI เปลี่ยนเส้นทางไปยังแอป Capacitor เช่น com.example.app://callback ค่านี้อาจแตกต่างกันไปขึ้นอยู่กับการตั้งค่าแอปพลิเคชัน Capacitor ของคุณ สำหรับรายละเอียดเพิ่มเติม ดู Capacitor Deep Links
อย่าลืมคลิกที่ Save Changes หลังจากอัปเดต redirect URI
หากคุณไม่แน่ใจเกี่ยวกับ redirect URI คุณสามารถปล่อยว่างไว้ก่อนและอัปเดตในภายหลังได้
สมมุติว่าคุณมีโครงการ Capacitor อยู่แล้ว บทช่วยสอนนี้ไม่ขึ้นกับกรอบงาน ดังนั้นคุณสามารถใช้กรอบงาน UI ที่คุณชอบและอัปเดตโค้ดให้สอดคล้องกันได้
endpoint คือจุดเชื่อม Logto API คุณสามารถค้นหาได้ในคู่มือในตัวหรือในส่วน Domains ในการตั้งค่าเช่าappId คือรหัสแอปพลิเคชัน Logto คุณสามารถค้นหาได้ในหน้าแสดงรายละเอียดแอปพลิเคชันเพิ่มโค้ดต่อไปนี้ลงใน onClick handler ของปุ่ม sign-in:
แทนที่ com.example.app://callback ด้วย redirect URI ที่คุณตั้งค่าในแอปพลิเคชัน Logto
รันแอป Capacitor และคลิกปุ่ม sign-in จะมีหน้าต่างเบราว์เซอร์เปิดขึ้นและเปลี่ยนเส้นทางไปยังหน้า sign-in ของ Logto
เนื่องจาก Capacitor ใช้ Safari View Controller บน iOS และ Chrome Custom Tabs บน Android การสภาพสถานะการตรวจสอบสามารถเก็บไว้อยู่ได้บางช่วงเวลา แต่อาจมีบางครั้งที่ผู้ใช้ต้องการออกจากแอปพลิเคชันทันที ในกรณีนี้เราสามารถใช้วิธี signOut เพื่อออกจากระบบผู้ใช้:
วิธี signOut มีพารามิเตอร์ตัวเลือกสำหรับ redirect URI หลังออกจากระบบ หากไม่ได้ระบุ ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้า sign-out ของ Logto:
ผู้ใช้จำเป็นต้องคลิก "Done" เพื่อปิด WebView และกลับไปยังแอป Capacitor หากคุณต้องการให้เปลี่ยนเส้นทางผู้ใช้กลับไปยังแอป Capacitor โดยอัตโนมัติ คุณสามารถระบุ redirect URI หลังออกจากระบบ:
ตรวจสอบว่า redirect URI หลังออกจากระบบเปลี่ยนเส้นทางไปยังแอป Capacitor และอย่าลืมเพิ่ม redirect URI หลังออกจากระบบไปยัง Logto Console:
รันแอป Capacitor อีกครั้งและคลิกปุ่ม sign-in หากทุกอย่างเป็นไปด้วยดี เมื่อสิ้นสุดกระบวนการตรวจสอบสิทธิ์ แอป Capacitor จะได้รับผลลัพธ์การ sign-in และพิมพ์คำร้องของผู้ใช้ในคอนโซล
จากนั้นคลิกปุ่ม sign-out แอป Capacitor จะถูกเปลี่ยนเส้นทางไปยังหน้า sign-out ของ Logto โดยจะเปลี่ยนเส้นทางกลับไปยังแอป Capacitor โดยอัตโนมัติหากตั้งค่า redirect URI หลังออกจากระบบแล้ว
ตอนนี้คุณสามารถตั้งค่ากระบวนการตรวจสอบสิทธิ์ใน Logto Cloud Console โดยไม่ต้องเขียนโค้ดที่ซับซ้อน การตั้งค่าจะนำไปใช้กับแอปพลิเคชันไคลเอนต์ทั้งหมด มอบประสบการณ์ผู้ใช้อย่างสม่ำเสมอ
หากคุณพบปัญหาใด ๆ ในกระบวนการรวมระบบ โปรดอย่าลังเลที่จะติดต่อเราทางอีเมลที่ [email protected] หรือเข้าร่วมเซิร์ฟเวอร์ Discord ของเรา!