สร้างการตรวจสอบสิทธิ์ CapacitorJS ด้วย Logto

บทนำ#

• Logto เป็นทางเลือกสมัยใหม่ของ Auth0 สำหรับการสร้างโครงสร้างพื้นฐานด้านการจัดการตัวตนของลูกค้าอย่างง่ายดาย รองรับวิธีการลงชื่อเข้าใช้แบบต่าง ๆ รวมถึงชื่อผู้ใช้ อีเมล หมายเลขโทรศัพท์ และการลงชื่อเข้าใช้สังคมออนไลน์ที่เป็นที่นิยมอย่าง Google และ GitHub
• Capacitor เป็นโอเพนซอร์สรุ่นเนทีฟสำหรับการสร้างแอป Web Native

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

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

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

• บัญชี Logto หากคุณยังไม่มี คุณสามารถลงทะเบียนฟรี
• โครงการ Capacitor คุณสามารถติดตามคู่มือทางการ เพื่อสร้าง

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

เริ่มต้นด้วยการสร้างแอปพลิเคชัน Logto ที่มีประเภท "Native" แอปพลิเคชัน Logto ทำหน้าที่เป็นแอปพลิเคชันไคลเอนต์ในลำดับ OAuth 2.0 และ OpenID Connect (OIDC) ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:

1. ลงชื่อเข้าใช้ Logto Cloud Console
2. ในแถบนำทางด้านซ้าย คลิกที่ Applications
3. คลิกที่ Create application
4. เลือก Native เป็นประเภทแอปพลิเคชันและป้อนชื่อแอปพลิเคชัน
5. คลิกที่ Create

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

ตรวจสอบว่า URI เปลี่ยนเส้นทางไปยังแอป Capacitor เช่น com.example.app://callback ค่านี้อาจแตกต่างกันไปขึ้นอยู่กับการตั้งค่าแอปพลิเคชัน Capacitor ของคุณ สำหรับรายละเอียดเพิ่มเติม ดู Capacitor Deep Links

อย่าลืมคลิกที่ Save Changes หลังจากอัปเดต redirect URI

หากคุณไม่แน่ใจเกี่ยวกับ redirect URI คุณสามารถปล่อยว่างไว้ก่อนและอัปเดตในภายหลังได้

ตั้งค่า Capacitor#

สมมุติว่าคุณมีโครงการ Capacitor อยู่แล้ว บทช่วยสอนนี้ไม่ขึ้นกับกรอบงาน ดังนั้นคุณสามารถใช้กรอบงาน UI ที่คุณชอบและอัปเดตโค้ดให้สอดคล้องกันได้

ติดตั้ง Dependencies#

เริ่มต้น Logto client#

• endpoint คือจุดเชื่อม Logto API คุณสามารถค้นหาได้ในคู่มือในตัวหรือในส่วน Domains ในการตั้งค่าเช่า
• appId คือรหัสแอปพลิเคชัน Logto คุณสามารถค้นหาได้ในหน้าแสดงรายละเอียดแอปพลิเคชัน

นำไปใช้กับปุ่ม sign-in#

เพิ่มโค้ดต่อไปนี้ลงใน 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 ของเรา!

การอ่านเพิ่มเติม#

• กำหนดประสบการณ์ลงชื่อเข้าใช้
• ตั้งค่าตัวเชื่อมต่อ
• ป้องกัน API ของคุณ