การสร้างเว็บ SDK สำหรับ Logto ในไม่กี่นาที

Logto เป็นแพลตฟอร์มการยืนยันตัวตนแบบเปิดที่มี SDK อย่างเป็นทางการมากมายที่ออกแบบมาเพื่อให้ง่ายต่อการรวมเข้ากับเฟรมเวิร์กและแพลตฟอร์มต่าง ๆ อย่างไรก็ตาม ยังมีอีกหลายแพลตฟอร์มที่ยังไม่มี SDK อย่างเป็นทางการ

เพื่อลดช่องว่างนี้ Logto จึงได้จัดทำแพ็กเกจพื้นฐาน @logto/browser ซึ่งออกแบบมาช่วยนักพัฒนาในการสร้าง SDK ที่กำหนดเองซึ่งตรงตามความต้องการเฉพาะ แพ็กเกจนี้ใช้ฟังก์ชั่นหลักของ Logto ที่แยกออกจากเฟรมเวิร์กหรือแพลตฟอร์มใด ๆ ตราบใดที่มันรองรับ JavaScript และรันในสิ่งแวดล้อมของเบราว์เซอร์

ในคู่มือนี้ เราจะพาคุณผ่านขั้นตอนการสร้าง React SDK โดยใช้ @logto/browser SDK นี้จะทำให้กระบวนการลงชื่อเข้าใช้ คุณสามารถทำตามขั้นตอนเดียวกันเพื่อสร้าง SDK สำหรับแพลตฟอร์มที่ใช้ JavaScript อื่น ๆ ที่ใช้ในเบราว์เซอร์

กระบวนการลงชื่อเข้าใช้#

ก่อนที่เราจะเริ่ม มาทำความเข้าใจกระบวนการลงชื่อเข้าใช้ใน Logto กัน กระบวนการลงชื่อเข้าใช้ประกอบด้วยขั้นตอนดังนี้:

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

บทนำสั้น ๆ ของ @logto/browser#

แพ็กเกจ @logto/browser มีการส่งออกคลาส LogtoClient ซึ่งให้ฟังก์ชั่นหลักของ Logto รวมถึงวิธีการสำหรับกระบวนการลงชื่อเข้าใช้:

1. signIn(): สร้าง URL การยืนยันตัวตน OIDC และเปลี่ยนเส้นทางไปยัง URL นั้น
2. handleSignInCallback(): ตรวจสอบและวิเคราะห์ URL การเรียกกลับ และดึงรหัสยืนยันแล้วแลกเปลี่ยนรหัสกับโทเคนโดยการเรียกใช้ endpoint โทเคน
3. isAuthenticated(): ตรวจสอบว่าผู้ใช้ได้รับการยืนยันตัวตนหรือไม่

การสร้าง React SDK#

ใน SDK เราจะให้ 2 hooks: useLogto และ useHandleSignInCallback พร้อมกับคอมโพเนนต์ LogtoProvider:

1. useLogto: Hook ที่ให้วิธี signIn เพื่อกระตุ้นกระบวนการลงชื่อเข้าใช้ และสถานะแสดงผลการยืนยันตัวตน isAuthenticated เพื่อตรวจสอบว่าผู้ใช้ได้รับการยืนยันหรือไม่
2. useHandleSignInCallback: Hook ที่จัดการ URL การเรียกกลับและแลกเปลี่ยนรหัสยืนยันกับโทเคน ทำกระบวนการลงชื่อเข้าใช้ให้เสร็จสมบูรณ์

หากต้องการใช้ SDK คุณสามารถห่อแอพของคุณด้วยคอมโพเนนต์ LogtoProvider และใช้ hooks เพื่อตรวจสอบสถานะการยืนยัน ลงชื่อเข้าใช้ และจัดการการเรียกกลับ

ขั้นตอน 1: ติดตั้งแพ็กเกจ#

อันดับแรก ติดตั้งแพ็กเกจ @logto/browser โดยใช้ npm หรือเครื่องมือติดตั้งแพ็กเกจอื่น ๆ:

ขั้นตอน 2: กำหนด context ของ React#

กำหนด context ของ provider ซึ่งประกอบด้วย 3 ส่วน:

1. อินสแตนซ์ LogtoClient พื้นฐานซึ่งจะถูกกำหนดค่าใน provider และใช้ใน hooks
2. สถานะการยืนยันตัวตน
3. วิธีการตั้งค่าสถานะการยืนยัน

สร้างไฟล์ใหม่ context.tsx และเขียนโค้ดต่อไปนี้:

ขั้นตอน 3: ใช้ implement provider#

ด้วย context ที่พร้อมแล้ว มาทำการ implement provider โดย provider จะกำหนดค่าอินสแตนซ์ LogtoClient ตรวจสอบว่าผู้ใช้ได้รับการยืนยันและนำบริบทไปยังลูกของมัน

สร้างไฟล์ใหม่ provider.tsx:

ขั้นตอน 4: ใช้ implement hooks#

ตอนนี้ มาทำการ implement hooks

• useLogto: ใน hook นี้ เราใช้ context เพื่อลองรับอินสแตนซ์ LogtoClient และให้วิธี signIn และสถานะ isAuthenticated คุณสามารถเพิ่มวิธีการเพิ่มเติมใน hook นี้
• useHandleSignInCallback: Hook นี้จะอ่าน URL การเรียกกลับจากเบราว์เซอร์ ดึงรหัสยืนยัน และแลกเปลี่ยนกับโทเคน นอกจากนี้ยังจะตั้งค่าสถานะการยืนยันเป็น true หลังจากผู้ใช้ได้รับการยืนยัน.

สร้างไฟล์ใหม่ hooks.ts และเขียนโค้ดต่อไปนี้:

จุดตรวจสอบ: การใช้ SDK#

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

สรุป#

ในคู่มือนี้ เราได้พาคุณผ่านขั้นตอนการสร้าง React SDK สำหรับ Logto ที่ปรับใช้กระบวนการยืนยันตัวตนพื้นฐาน SDK ที่ให้ไว้ในที่นี้คือตัวอย่างพื้นฐาน คุณสามารถขยายมันโดยเพิ่มวิธีการและฟังก์ชันการทำงานเพิ่มเติมเพื่อตอบสนองความต้องการของแอพของคุณ

คุณสามารถทำตามขั้นตอนเดียวกันเพื่อสร้าง SDK สำหรับแพลตฟอร์มที่ใช้ JavaScript อื่น ๆ ที่ใช้ในเบราว์เซอร์.

แหล่งข้อมูล:

1. Logto Browser SDK
2. Logto React SDK