เรียนรู้วิธีสร้างการไหลของการยืนยันตัวตนของผู้ใช้ด้วย Angular โดยการรวมไลบรารีลูกค้า Angular OIDC
ในบทเรียนนี้ เราจะแสดงวิธีสร้างการไหลของการตรวจสอบตัวผู้ใช้ด้วย Angular โดยการรวม Logto SDK บทเรียนนี้ใช้ TypeScript เป็นภาษาการเขียนโปรแกรม
ก่อนที่คุณจะเริ่ม ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:
ในการเริ่มต้น ให้สร้างแอปพลิเคชัน Logto ด้วยประเภท "Single page app" ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:
จากนั้นคุณควรเห็นคู่มือแบบโต้ตอบที่จะแนะนำคุณตลอดกระบวนการรวม Logto SDK กับแอปพลิเคชัน Angular ของคุณ เนื้อหาต่อไปนี้สามารถใช้เป็นข้อมูลอ้างอิงในอนาคตได้
ติดตั้ง Logto JS core SDK และไลบรารีลูกค้า Angular OIDC:
ในโปรเจกต์ Angular ของคุณ ให้นำเสนอผู้ให้บริการการยืนยันตัวตนใน app.config.ts:
เปลี่ยนไปที่หน้ารายละเอียดแอปพลิเคชันของ Logto Console เพิ่ม URI เปลี่ยนเส้นทาง http://localhost:3000/callback
URI เปลี่ยนเส้นทาง เป็นแนวคิดของ OAuth 2.0 ที่บ่งบอกถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังการตรวจสอบตัวตน
ในทำนองเดียวกัน เพิ่ม http://localhost:3000/ ในเซคชัน "URI เปลี่ยนเส้นทางหลังออกจากระบบ"
URI เปลี่ยนเส้นทางหลังออกจากระบบ เป็นแนวคิดของ OAuth 2.0 ที่บ่งบอกถึงตำแหน่งที่ควรเปลี่ยนเส้นทางหลังออกจากระบบ
จากนั้นคลิก "บันทึก" เพื่อบันทึกการเปลี่ยนแปลง
ในคอมโพเนนต์ที่คุณต้องการใช้งานการเซ็นชื่อเข้าและออก (ตัวอย่างเช่น app.component.ts), แทรก OidcSecurityService และใช้มันเพื่อเซ็นชื่อเข้าและออก.
จากนั้นในเทมเพลต ให้เพิ่มปุ่มสำหรับเซ็นชื่อเข้าและออก:
OidcSecurityService ให้วิธีที่สะดวกในการสมัครรับสถานะการยืนยันตัวตน:
แล้วใช้มันในเทมเพลต:
ตอนนี้คุณสามารถรันแอปพลิเคชันและลองลงชื่อเข้าใช้/ออกจากระบบด้วย Logto:
หากคุณพบปัญหาใด ๆ ระหว่างการรวม โปรดอย่าลังเลที่จะ เข้าร่วมเซิร์ฟเวอร์ Discord ของเรา เพื่อพูดคุยกับชุมชนและทีม Logto!