ไทย
  • angular
  • frontend
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

สร้างการยืนยันตัวตน Angular ด้วย Logto

เรียนรู้วิธีสร้างการไหลของการยืนยันตัวตนของผู้ใช้ด้วย Angular โดยการรวมไลบรารีลูกค้า Angular OIDC

Gao
Gao
Founder

เริ่มต้น

แนะนำ

  • Logto เป็นทางเลือกแบบโอเพนซอร์สสำหรับ Auth0 ในการสร้างโครงสร้างพื้นฐานด้านตัวตน มันรองรับวิธีการลงชื่อเข้าใช้หลากหลาย รวมถึงชื่อผู้ใช้ อีเมล หมายเลขโทรศัพท์ และการลงชื่อเข้าใช้ผ่านโซเชียลยอดนิยมเช่น Google และ GitHub
  • Angular เป็นเฟรมเวิร์กการพัฒนาเว็บที่สร้างและดูแลโดย Google.

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

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

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

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

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

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

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

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

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

รวม Logto กับโปรเจกต์ของคุณ

การติดตั้ง

ติดตั้ง Logto JS core SDK และไลบรารีลูกค้า Angular OIDC:

การกำหนดค่าแอปพลิเคชัน

ในโปรเจกต์ Angular ของคุณ ให้นำเสนอผู้ให้บริการการยืนยันตัวตนใน app.config.ts:

การใช้งานการเซ็นชื่อเข้าและออก

กำหนดค่า URI เปลี่ยนเส้นทาง

เปลี่ยนไปที่หน้ารายละเอียดแอปพลิเคชันของ 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:

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

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

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

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