เรียนรู้วิธีการสร้างโฟลวการยืนยันตัวตนของผู้ใช้ด้วย Expo (React Native) โดยการผสมผสาน Logto SDK
ในบทเรียนนี้ เราจะแสดงวิธีสร้างการไหลของการตรวจสอบตัวผู้ใช้ด้วย Expo (React Native) โดยการรวม Logto SDK บทเรียนนี้ใช้ TypeScript เป็นภาษาการเขียนโปรแกรม
ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:
ในการเริ่มต้น ให้สร้างแอปพลิเคชัน Logto ด้วยประเภท "Native" ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:
จากนั้นคุณควรเห็นคู่มือแบบโต้ตอบที่จะแนะนำคุณตลอดกระบวนการรวม Logto SDK กับแอปพลิเคชัน Expo (React Native) ของคุณ เนื้อหาต่อไปนี้สามารถใช้เป็นข้อมูลอ้างอิงในอนาคตได้
ติดตั้ง Logto SDK และ peer dependencies ผ่านผู้จัดการแพ็กเกจที่คุณชื่นชอบ:
แพ็คเกจ @logto/rn นั้นคือ SDK สำหรับ Logto ส่วนแพ็คเกจที่เหลือเป็น peer dependencies ไม่สามารถระบุใน dependencies โดยตรงได้ เพราะ Expo CLI ต้องการให้ติดตั้ง dependencies ทั้งหมดสำหรับ native modules อยู่ในไฟล์ package.json ของโปรเจกต์รากโดยตรง
นำเข้าและใช้ LogtoProvider เพื่อให้บริบท Logto:
เปลี่ยนไปที่หน้าแอปพลิเคชันของ Logto Console เพิ่ม native redirect URI (เช่น io.logto://callback) จากนั้นคลิก "Save".
สำหรับ iOS, redirect URI scheme ไม่สำคัญจริงๆ เนื่องจากคลาส ASWebAuthenticationSession จะฟังการ redirect URI ไม่ว่ามันจะถูกลงทะเบียนหรือไม่
สำหรับ Android, redirect URI scheme ต้องระบุในไฟล์ app.json ของ Expo, เช่น:
ตอนนี้กลับไปที่แอปของคุณ คุณสามารถใช้ hook useLogto เพื่อเข้าสู่ระบบและออกจากระบบ:
เพื่อแสดงข้อมูลของผู้ใช้ คุณสามารถใช้เมธอด getIdTokenClaims():
ตอนนี้คุณสามารถรันแอปพลิเคชันและลองลงชื่อเข้าใช้/ออกจากระบบด้วย Logto:
หากคุณพบปัญหาใด ๆ ระหว่างการรวม โปรดอย่าลังเลที่จะ เข้าร่วมเซิร์ฟเวอร์ Discord ของเรา เพื่อพูดคุยกับชุมชนและทีม Logto!