ไทย
  • asp-net-core
  • c-sharp
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

สร้างการยืนยันตัวตน ASP.NET Core ด้วย Logto

เรียนรู้วิธีสร้างการไหลของการยืนยันตัวตนของผู้ใช้ด้วย ASP.NET Core โดยการผนวก Logto SDK

Gao
Gao
Founder

แนะนำ

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

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

ความต้องการก่อนเริ่มต้น

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

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

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

  1. ลงชื่อเข้าใช้ Logto Console
  2. ในแถบนำทางด้านซ้าย คลิกที่ Applications
  3. คลิกที่ Create application
  4. ในหน้าที่เปิดขึ้น หา "Traditional web app" และระบุตำแหน่งการ์ด "ASP.NET Core"
  5. คลิกที่ Start building และป้อนชื่อแอปพลิเคชันของคุณ
  6. คลิกที่ Create

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

ลองบทเรียนเชิงโต้ตอบของ Logto Cloud

ผนวกกับ Logto SDK

การติดตั้ง

หมายเหตุ: เวอร์ชันขั้นต่ำที่รองรับของ ASP.NET Core คือ 6.0

เพิ่มกลางการยืนยันตัวตน Logto

เปิด Startup.cs (หรือ Program.cs) และเพิ่มโค้ดต่อไปนี้เพื่อจดทะเบียนกลางการยืนยันตัวตน Logto:

เมธอด AddLogtoAuthentication จะทำสิ่งต่อไปนี้:

  • ตั้งค่าการยืนยันตัวตนพื้นฐานให้เป็น LogtoDefaults.CookieScheme
  • ตั้งค่ามาตรฐานการท้าทายเป็น LogtoDefaults.AuthenticationScheme
  • ตั้งค่ามาตรฐานการลงชื่อออกเป็น LogtoDefaults.AuthenticationScheme
  • เพิ่มตัวจัดการคุกกี้และ OpenID Connect ลงในแผนการยืนยันตัวตน

ลงชื่อเข้าใช้

เพิ่ม URI ต่อไปนี้ลงในรายการ Redirect URIs ในหน้ารายละเอียดแอปพลิเคชัน Logto:

เพื่อเข้าสู่ระบบด้วย Logto คุณสามารถใช้เมธอด ChallengeAsync:

เมธอด ChallengeAsync จะเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ Logto

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

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

ลำดับของการกระทำคือ 1 -> 2 เพื่อความชัดเจน เราจะเรียก URI ของการเปลี่ยนเส้นทางในหน้ารายละเอียดแอปพลิเคชัน Logto ว่า Logto redirect URI และคุณสมบัติ RedirectUri ว่า application redirect URI

Logto redirect URI มีค่าพื้นฐานเป็น /Callback ซึ่งคุณสามารถปล่อยให้เป็นอยู่อย่างที่เป็นถ้าไม่มีความต้องการพิเศษ หากคุณต้องการเปลี่ยนมัน คุณสามารถตั้งค่าคุณสมบัติ CallbackPath สำหรับ LogtoOptions:

จำที่จะอัปเดตค่านี้ในหน้ารายละเอียดแอปพลิเคชัน Logto ด้วย

ลงชื่อออก

เพิ่ม URI ต่อไปนี้ลงในรายการ Post sign-out redirect URIs ในหน้ารายละเอียดแอปพลิเคชัน Logto:

เพื่อออกจากระบบด้วย Logto คุณสามารถใช้เมธอด SignOutAsync:

เมธอด SignOutAsync จะลบคุกกี้การยืนยันตัวตนและนำทางผู้ใช้ไปยังหน้าลงชื่อออกของ Logto

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

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

ลำดับของการกระทำคือ 1 -> 2 เพื่อความชัดเจน เราจะเรียก URI ของการเปลี่ยนเส้นทางหลังออกจากระบบในหน้ารายละเอียดแอปพลิเคชัน Logto ว่า Logto post sign-out redirect URI และคุณสมบัติ RedirectUri ว่า application post sign-out redirect URI

Logto post sign-out redirect URI มีค่าพื้นฐานเป็น /SignedOutCallback ซึ่งคุณสามารถปล่อยให้เป็นอยู่อย่างที่เป็นถ้าไม่มีความต้องการพิเศษ หากคุณต้องการเปลี่ยนมัน คุณสามารถตั้งค่าคุณสมบัติ SignedOutCallbackPath สำหรับ LogtoOptions:

จำที่จะอัปเดตค่านี้ในหน้ารายละเอียดแอปพลิเคชัน Logto ด้วย

การใช้งานปุ่มลงชื่อเข้า/ออก (Razor Pages)

ก่อนอื่น เพิ่มเมธอดตัวจัดการไปยัง PageModel ของคุณ ตัวอย่างเช่น:

จากนั้น เพิ่มปุ่มไปยังหน้าราเซอร์ของคุณ (html):

<p>ตรวจสอบแล้ว: @User.Identity?.IsAuthenticated</p>
<form method="post">
  @if (User.Identity?.IsAuthenticated == true)
  {
    <button type="submit" asp-page-handler="SignOut">ลงชื่อออก</button>
  } else {
    <button type="submit" asp-page-handler="SignIn">ลงชื่อเข้า</button>
  }
</form>

มันจะแสดงปุ่ม "ลงชื่อเข้า" หากผู้ใช้ยังไม่ได้ยืนยันตัวตนและแสดงปุ่ม "ลงชื่อออก" หากผู้ใช้ได้ยืนยันตัวตนแล้ว

จุดตรวจสอบ: รันแอปพลิเคชันเว็บ

ตอนนี้คุณสามารถรันแอปพลิเคชันเว็บและลองลงชื่อเข้า/ออกด้วย Logto:

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

หากคุณพบปัญหาใด ๆ ระหว่างการผนวก โปรดอย่าลังเลที่จะติดต่อเราทางอีเมลที่ [email protected] หรือ เข้าร่วมเซิร์ฟเวอร์ Discord ของเรา!

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

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