เรียนรู้วิธีการสร้าง SDK ที่กำหนดเองสำหรับ Logto โดยใช้ `@logto/browser`
Logto เป็นแพลตฟอร์มการยืนยันตัวตนแบบเปิดที่มี SDK อย่างเป็นทางการมากมายที่ออกแบบมาเพื่อให้ง่ายต่อการรวมเข้ากับเฟรมเวิร์กและแพลตฟอร์มต่าง ๆ อย่างไรก็ตาม ยังมีอีกหลายแพลตฟอร์มที่ยังไม่มี SDK อย่างเป็นทางการ
เพื่อลดช่องว่างนี้ Logto จึงได้จัดทำแพ็กเกจพื้นฐาน @logto/browser ซึ่งออกแบบมาช่วยนักพัฒนาในการสร้าง SDK ที่กำหนดเองซึ่งตรงตามความต้องการเฉพาะ แพ็กเกจนี้ใช้ฟังก์ชั่นหลักของ Logto ที่แยกออกจากเฟรมเวิร์กหรือแพลตฟอร์มใด ๆ ตราบใดที่มันรองรับ JavaScript และรันในสิ่งแวดล้อมของเบราว์เซอร์
ในคู่มือนี้ เราจะพาคุณผ่านขั้นตอนการสร้าง React SDK โดยใช้ @logto/browser SDK นี้จะทำให้กระบวนการลงชื่อเข้าใช้ คุณสามารถทำตามขั้นตอนเดียวกันเพื่อสร้าง SDK สำหรับแพลตฟอร์มที่ใช้ JavaScript อื่น ๆ ที่ใช้ในเบราว์เซอร์
ก่อนที่เราจะเริ่ม มาทำความเข้าใจกระบวนการลงชื่อเข้าใช้ใน Logto กัน กระบวนการลงชื่อเข้าใช้ประกอบด้วยขั้นตอนดังนี้:
@logto/browserแพ็กเกจ @logto/browser มีการส่งออกคลาส LogtoClient ซึ่งให้ฟังก์ชั่นหลักของ Logto รวมถึงวิธีการสำหรับกระบวนการลงชื่อเข้าใช้:
signIn(): สร้าง URL การยืนยันตัวตน OIDC และเปลี่ยนเส้นทางไปยัง URL นั้นhandleSignInCallback(): ตรวจสอบและวิเคราะห์ URL การเรียกกลับ และดึงรหัสยืนยันแล้วแลกเปลี่ยนรหัสกับโทเคนโดยการเรียกใช้ endpoint โทเคนisAuthenticated(): ตรวจสอบว่าผู้ใช้ได้รับการยืนยันตัวตนหรือไม่ใน SDK เราจะให้ 2 hooks: useLogto และ useHandleSignInCallback พร้อมกับคอมโพเนนต์ LogtoProvider:
useLogto: Hook ที่ให้วิธี signIn เพื่อกระตุ้นกระบวนการลงชื่อเข้าใช้ และสถานะแสดงผลการยืนยันตัวตน isAuthenticated เพื่อตรวจสอบว่าผู้ใช้ได้รับการยืนยันหรือไม่useHandleSignInCallback: Hook ที่จัดการ URL การเรียกกลับและแลกเปลี่ยนรหัสยืนยันกับโทเคน ทำกระบวนการลงชื่อเข้าใช้ให้เสร็จสมบูรณ์หากต้องการใช้ SDK คุณสามารถห่อแอพของคุณด้วยคอมโพเนนต์ LogtoProvider และใช้ hooks เพื่อตรวจสอบสถานะการยืนยัน ลงชื่อเข้าใช้ และจัดการการเรียกกลับ
อันดับแรก ติดตั้งแพ็กเกจ @logto/browser โดยใช้ npm หรือเครื่องมือติดตั้งแพ็กเกจอื่น ๆ:
กำหนด context ของ provider ซึ่งประกอบด้วย 3 ส่วน:
LogtoClient พื้นฐานซึ่งจะถูกกำหนดค่าใน provider และใช้ใน hooksสร้างไฟล์ใหม่ context.tsx และเขียนโค้ดต่อไปนี้:
ด้วย context ที่พร้อมแล้ว มาทำการ implement provider โดย provider จะกำหนดค่าอินสแตนซ์ LogtoClient ตรวจสอบว่าผู้ใช้ได้รับการยืนยันและนำบริบทไปยังลูกของมัน
สร้างไฟล์ใหม่ provider.tsx:
ตอนนี้ มาทำการ implement hooks
useLogto: ใน hook นี้ เราใช้ context เพื่อลองรับอินสแตนซ์ LogtoClient และให้วิธี signIn และสถานะ isAuthenticated คุณสามารถเพิ่มวิธีการเพิ่มเติมใน hook นี้useHandleSignInCallback: Hook นี้จะอ่าน URL การเรียกกลับจากเบราว์เซอร์ ดึงรหัสยืนยัน และแลกเปลี่ยนกับโทเคน นอกจากนี้ยังจะตั้งค่าสถานะการยืนยันเป็น true หลังจากผู้ใช้ได้รับการยืนยัน.สร้างไฟล์ใหม่ hooks.ts และเขียนโค้ดต่อไปนี้:
ตอนนี้ คุณได้สร้าง React SDK สำหรับ Logto แล้ว คุณสามารถใช้มันในแอพของคุณโดยห่อแอพด้วยคอมโพเนนต์ LogtoProvider และใช้ hooks เพื่อตรวจสอบสถานะการยืนยัน ลงชื่อเข้าใช้ และจัดการการเรียกกลับ คุณสามารถตรวจสอบโปรเจกต์ตัวอย่าง React อย่างเป็นทางการ ที่นี่
ในคู่มือนี้ เราได้พาคุณผ่านขั้นตอนการสร้าง React SDK สำหรับ Logto ที่ปรับใช้กระบวนการยืนยันตัวตนพื้นฐาน SDK ที่ให้ไว้ในที่นี้คือตัวอย่างพื้นฐาน คุณสามารถขยายมันโดยเพิ่มวิธีการและฟังก์ชันการทำงานเพิ่มเติมเพื่อตอบสนองความต้องการของแอพของคุณ
คุณสามารถทำตามขั้นตอนเดียวกันเพื่อสร้าง SDK สำหรับแพลตฟอร์มที่ใช้ JavaScript อื่น ๆ ที่ใช้ในเบราว์เซอร์.
แหล่งข้อมูล: