ไทย
  • react
  • react-native
  • expo
  • บทแนะนำ
  • auth
  • authentication
  • oauth
  • oidc
  • identity

สร้างการยืนยันตัวตน Expo (React Native) ด้วย Logto

เรียนรู้วิธีการสร้างโฟลวการยืนยันตัวตนของผู้ใช้ด้วย Expo (React Native) โดยการผสมผสาน Logto SDK

Gao
Gao
Founder

เริ่มต้น

แนะนำ

  • Logto เป็นทางเลือกแบบโอเพนซอร์สสำหรับ Auth0 ในการสร้างโครงสร้างพื้นฐานด้านตัวตน มันรองรับวิธีการลงชื่อเข้าใช้หลากหลาย รวมถึงชื่อผู้ใช้ อีเมล หมายเลขโทรศัพท์ และการลงชื่อเข้าใช้ผ่านโซเชียลยอดนิยมเช่น Google และ GitHub
  • Expo (React Native) เป็นระบบนิเวศของเครื่องมือที่ช่วยให้คุณสร้างแอปเนทีฟทุกแพลตฟอร์มด้วย React ที่ทำงานบน Android, iOS, และเว็บ

ในบทเรียนนี้ เราจะแสดงวิธีสร้างการไหลของการตรวจสอบตัวผู้ใช้ด้วย Expo (React Native) โดยการรวม Logto SDK บทเรียนนี้ใช้ TypeScript เป็นภาษาการเขียนโปรแกรม

ข้อกำหนดเบื้องต้น

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

  • บัญชี Logto หากคุณยังไม่มี คุณสามารถ ลงทะเบียนฟรี
  • สภาพแวดล้อมการพัฒนา An Expo (React Native) และโครงการ

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

ในการเริ่มต้น ให้สร้างแอปพลิเคชัน Logto ด้วยประเภท "Native" ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:

  1. ลงชื่อเข้าใช้ Logto Console
  2. ในแถบนำทางด้านซ้าย คลิกที่ แอปพลิเคชัน
  3. คลิกที่ สร้างแอปพลิเคชัน
  4. ในหน้าที่เปิดขึ้น ให้หาเซคชัน "Native" และหาการ์ด "Expo (React Native)"
  5. คลิกที่ เริ่มสร้าง และกรอกชื่อแอปพลิเคชันของคุณ
  6. คลิกที่ สร้าง

จากนั้นคุณควรเห็นคู่มือแบบโต้ตอบที่จะแนะนำคุณตลอดกระบวนการรวม Logto SDK กับแอปพลิเคชัน Expo (React Native) ของคุณ เนื้อหาต่อไปนี้สามารถใช้เป็นข้อมูลอ้างอิงในอนาคตได้

ลองใช้คู่มือแบบโต้ตอบของ Logto Cloud

ผสานกับ Logto SDK

การติดตั้ง

ติดตั้ง Logto SDK และ peer dependencies ผ่านผู้จัดการแพ็กเกจที่คุณชื่นชอบ:

แพ็คเกจ @logto/rn นั้นคือ SDK สำหรับ Logto ส่วนแพ็คเกจที่เหลือเป็น peer dependencies ไม่สามารถระบุใน dependencies โดยตรงได้ เพราะ Expo CLI ต้องการให้ติดตั้ง dependencies ทั้งหมดสำหรับ native modules อยู่ในไฟล์ package.json ของโปรเจกต์รากโดยตรง

เริ่มตั้งค่า Logto provider

นำเข้าและใช้ 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:

  1. เปิดแอปพลิเคชันในเบราว์เซอร์ของคุณ คุณควรเห็นปุ่ม "ลงชื่อเข้าใช้"
  2. คลิกที่ปุ่ม "ลงชื่อเข้าใช้" และคุณจะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto
  3. หลังจากที่คุณลงชื่อเข้าใช้ คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชัน และคุณควรเห็นข้อมูลผู้ใช้และปุ่ม "ลงชื่อออก"
  4. คลิกที่ปุ่ม "ลงชื่อออก" และคุณจะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อออกของ Logto และจากนั้นเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันในสถานะที่ไม่ได้ลงชื่อเข้าใช้

หากคุณพบปัญหาใด ๆ ระหว่างการรวม โปรดอย่าลังเลที่จะ เข้าร่วมเซิร์ฟเวอร์ Discord ของเรา เพื่อพูดคุยกับชุมชนและทีม Logto!

อ่านเพิ่มเติม

ลองใช้ Logto วันนี้