blazor

การสร้างแอปพลิเคชัน PhotoSharing ด้วย Blazor Web Assembly ที่โฮสต์, Web API, gRPC และ Duende Identity Server

เรากำลังจะสร้างเว็บไซต์ง่ายๆ ที่ผู้คนสามารถโพสต์รูปภาพและแสดงความคิดเห็นได้

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

เราจะสร้าง 3 ส่วน

• FrontEnd ซึ่งเป็นแอปพลิเคชัน เว็บไคลเอ็นต์ของ Blazor จับคู่กับ ASP.NET Core Web Host ของตัวเอง
• Backend ที่สร้างด้วย .NET 7.0 จะประกอบด้วย
  • บริการ REST สำหรับการจัดการรูปภาพ
  • บริการ gRPC สำหรับความคิดเห็น
• ผู้ให้บริการข้อมูลประจำตัว จะเป็นโครงการ Duende ของเราเอง

1.1 - ไคลเอนต์ส่วนหน้า

• ลูกค้าเบลเซอร์
• HTML5
• ซีเอสเอส 3
• เปิดไคลเอนต์เชื่อมต่อ Id

โปรเจ็กต์นี้จะโต้ตอบกับผู้ใช้ผ่านเบราว์เซอร์โดยการสร้างอินเทอร์เฟซผู้ใช้ HTML แบบไดนามิก และจะสื่อสารกับเซิร์ฟเวอร์ของตัวเองโดยใช้ gRPC Web และ HttpClient

1.2 - แบ็กเอนด์สำหรับส่วนหน้า (BFF)

• ASP.Net Core เว็บโฮสต์
• แยร์ป
• Duende.Bff.Yarp

โปรเจ็กต์นี้โฮสต์และให้บริการแอปพลิเคชัน Blazor Client นอกจากนี้ยังทำหน้าที่เป็นพร็อกซีย้อนกลับเพื่อส่งต่อการโทรไปยังแบ็กเอนด์ REST และ gRpc

2.1 - บริการ REST รูปภาพ

• .NET 7 เว็บ API คอนโทรลเลอร์
• เอนทิตีเฟรมเวิร์กคอร์ 7.0
• ฐานข้อมูล SqLite
• การตรวจสอบสิทธิ์ไคลเอ็นต์ Duende

2.2 - ความคิดเห็นบริการ gRPC

• บริการ .NET 7 gRPC
• เอนทิตีเฟรมเวิร์กคอร์ 7.0
• ฐานข้อมูล SqLite
• การตรวจสอบสิทธิ์ไคลเอ็นต์ Duende

โครงการเหล่านี้จะรับผิดชอบในการจัดเก็บข้อมูลบนเซิร์ฟเวอร์และตอบสนองต่อคำขอของลูกค้าผ่าน http, json และ protobuf

3. เซิร์ฟเวอร์การรับรองความถูกต้อง
   • เซิร์ฟเวอร์ข้อมูลประจำตัว 4 (Duende)
   • แกนกรอบเอนทิตี

โปรเจ็กต์นี้จะดูแลส่วนการตรวจสอบสิทธิ์ มันจะออกโทเค็น JWT ที่จะใช้โดยแอปพลิเคชันไคลเอนต์เพื่อเข้าถึงบริการ

สิ่งที่คุณต้องรู้อยู่แล้ว:

• ค#
• HTML5
• ซีเอสเอส 3

สิ่งที่คุณจะได้เรียนรู้:

• พักผ่อน
• จีอาร์พีซี
• เบลเซอร์
• ตัวควบคุม API เว็บ ASP.NET Core 7.0
• บริการ ASP.NET Core 7.0 gRPC
• เอนทิตีเฟรมเวิร์กคอร์ 7.0
• สแวกเกอร์ / OpenAPI
• คอร์ส
• แยร์ป
• การรับรองความถูกต้องและการอนุญาต
• OAuth 2 และ Open Id Connect
• เซิร์ฟเวอร์ข้อมูลประจำตัว 4 (Duende)
• การอนุญาตง่ายๆ
• การอนุญาตเจ้าของทรัพยากร
• สถาปัตยกรรมที่สะอาดตา
• การทดสอบหน่วยด้วย bUnit
• การทำงานร่วมกันของจาวาสคริปต์

ก่อนที่คุณจะเริ่ม

ในขณะที่เขียนบทช่วยสอนนี้ .NET Core 7.0 สามารถใช้ได้กับ Visual Studio 2022 เท่านั้น ขอแนะนำให้คุณติดตั้ง Visual Studio 2022 เวอร์ชันล่าสุดเพื่อทำงานกับ .NET Core 7.0

• ติดตั้ง Visual Studio 2022 เวอร์ชันล่าสุดด้วย ASP.NET และปริมาณงานการพัฒนาเว็บ
• ติดตั้ง .NET Core 7.0 โดยการดาวน์โหลด .NET Core 7.0 SDK

คุณอาจต้องการไปที่เอกสารการเริ่มต้นใช้งานเพื่อดูชุดคำแนะนำที่อัปเดต

---

ขั้นตอนการทำงานของเรา

เราจะทำตามขั้นตอนง่ายๆ แต่ละขั้นตอนจะมุ่งเน้นไปที่งานเดียวและจะสร้างต่อยอดจากขั้นตอนก่อนหน้า เราจะเริ่มต้นด้วยโปรเจ็กต์ง่ายๆ ที่จะมีความซับซ้อนมากขึ้นเรื่อยๆ ตัวอย่างเช่น เราจะไม่เน้นไปที่การตรวจสอบสิทธิ์และการอนุญาตในตอนแรก เราจะเพิ่มในขั้นตอนต่อไป

วิธีปฏิบัติตามบทช่วยสอนนี้

หากคุณเริ่มจาก Lab01 และติดตาม readme.md แต่ละรายการ คุณสามารถดำเนินการแต่ละแล็บให้เสร็จสิ้นและดำเนินการต่อไปยังแล็บต่อไปนี้โดยใช้โค้ดของคุณเอง ไม่จำเป็นต้องเปิดโฟลเดอร์ Start หรือ Solution ที่ให้ไว้ใน repo นี้

• โฟลเดอร์ Start คือจุดเริ่มต้นของแต่ละขั้นตอน
• โฟลเดอร์ Solution คือเวอร์ชันสุดท้ายของแต่ละขั้นตอน ซึ่งมอบให้แก่คุณในกรณีที่คุณต้องการตรวจสอบว่าโปรเจ็กต์ของคุณควรจะเป็นอย่างไรเมื่อสิ้นสุดแต่ละแล็บ

สิ่งที่คุณต้องทำคือเปิดโฟลเดอร์ Start ที่ตรงกับแล็บที่คุณต้องการลอง ( Lab01/Start เพื่อเริ่มต้นใหม่ทั้งหมด) และทำตามคำแนะนำที่คุณพบในไฟล์ readme.md เมื่อเสร็จแล้ว คุณสามารถเปรียบเทียบงานของคุณกับโซลูชันที่ให้ไว้ในโฟลเดอร์ Solution ได้ตามสบาย

เพื่อเริ่มต้น

1. เปิดโฟลเดอร์ Labs
2. นำทางไปยังโฟลเดอร์ย่อย Lab01
3. นำทางไปยังโฟลเดอร์ย่อย Start
4. ทำตามคำแนะนำที่อยู่ในไฟล์ readme.md เพื่อดำเนินการต่อ

หากต้องการดูใบสมัครขั้นสุดท้าย

สร้างฐานข้อมูลบริการ REST ของรูปภาพ

• เปิด Lab15SolutionblazorPhotoSharingApplicationPhotoSharingApplication.sln ใน Visual Studio
• สร้างโซลูชัน
• ตรวจสอบให้แน่ใจว่าคุณมีโครงการเริ่มต้นหลายโครงการ:
  • IdentityServer
  • พักผ่อน
  • จีอาร์พีซี
  • ส่วนหน้า.เซิร์ฟเวอร์

เริ่มแอปพลิเคชัน

เพื่อเข้าสู่ระบบ

• ชื่อผู้ใช้: อลิซ
• รหัสผ่าน: Pass123$

หรือ

• ชื่อผู้ใช้: บ๊อบ
• รหัสผ่าน: Pass123$

บันทึกสุดท้ายก่อนที่เราจะเริ่มต้น

ฉันถือว่าคุณเป็นโปรแกรมเมอร์ C# ที่สนใจสร้างเว็บแอปพลิเคชัน คุณอาจใช้หน้า asp, aspx, mvc และ / หรือมีดโกนแล้วทั้งนี้ขึ้นอยู่กับอายุของคุณ และตอนนี้คุณต้องการลองใช้ blazor คุณอาจคุ้นเคยกับ HTML และ CSS อยู่แล้ว และบางทีคุณอาจเคยเล่นกับเฟรมเวิร์คจาวาสคริปต์บางตัว เช่น Angular, React หรือ Vue

ฉันจะลิงก์เอกสารมากมายเกี่ยวกับแนวคิดเว็บและเทคโนโลยี ดังนั้นอย่ากังวลหากคุณไม่ใช่ผู้เชี่ยวชาญด้านนักพัฒนาเว็บ คุณสามารถเรียนรู้ทุกอย่างได้ตลอดทาง อย่างน้อยคุณ ควร จะคล่องแคล่วในภาษา C# ไม่เช่นนั้นบทช่วยสอนนี้จะยากต่อการปฏิบัติตาม โค้ดส่วนใหญ่ที่เราจะเขียนจะเป็น C# เรายังจะเขียน HTML อีกด้วย แต่นั่นง่ายต่อการเรียนรู้ ดังนั้นจึงไม่มีปัญหา

ห้องทดลอง

• แล็บ 01 - ส่วนหน้าของ Blazor
  • สำรวจโครงสร้างของโครงการ Blazor Web Assembly และสร้างหน้าแรกของเรา
• แล็บ 02 - ส่วนหน้า: มุมมองเพิ่มเติม
  • สถาปัตยกรรมที่สะอาดตา
  • การฉีดพึ่งพา
  • การใช้ไลบรารี Blazor เพิ่มเติมผ่านแพ็คเกจ NuGet
  • เส้นทาง
  • การผูกข้อมูล
  • การจัดการเหตุการณ์
• Lab 03 - ส่วนหน้า: จัดแต่งทรงผม UI ด้วย MatBlazor
  • การออกแบบวัสดุ
  • แมทเบลเซอร์
  • เค้าโครงหน้า
• แล็บ 04 - ส่วนหน้า - ไลบรารีและส่วนประกอบของคลาสมีดโกน
  • การสร้างไลบรารีคลาสมีดโกน
  • การใช้ Razor Class Library จากภายในโปรเจ็กต์
  • ส่วนประกอบมีดโกน
  • ส่วนประกอบผู้ปกครองและเด็ก
  • คุณสมบัติ
  • การเรียกกลับเหตุการณ์
• Lab 05 - แบ็กเอนด์: Web API พร้อม ASP.NET Core 7.0 และ Visual Studio 2022
  • โปรโตคอลส่วนที่เหลือ
  • Asp.NET Core เว็บ Api
  • ผู้ควบคุม
  • การดำเนินการ
  • เส้นทาง
  • ผูกพัน
  • แกนกรอบเอนทิตี
  • เจสัน
  • สแวกเกอร์ / OpenAPI
• แล็บ 06 - ส่วนหน้า: การเชื่อมต่อกับแบ็กเอนด์
  • HttpClient
  • การกำหนดค่า HttpClient
  • รับจาก JsonAsync
  • โพสต์AsJsonAsync
  • ใส่AsJsonAsync
  • ลบAsync
  • อ่านจาก JsonAsync
  • คอร์ส
  • แยร์ป
• แล็บ 07 - ส่วนหน้า: ความคิดเห็น
  • สถาปัตยกรรมที่สะอาดยิ่งขึ้น
  • ส่วนประกอบเพิ่มเติม
• Lab 08 - แบ็กเอนด์: gRPC พร้อม ASP.NET Core 7.0 และ Visual Studio 2022
  • สถาปัตยกรรมที่สะอาดยิ่งขึ้น
  • จีอาร์พีซี
  • โปรโตบุฟ
  • gRPC ใน Asp.Net Core
• แล็บ 09 - ส่วนหน้า: การเชื่อมต่อกับแบ็กเอนด์
  • เว็บจีอาร์พีซี
  • เว็บไคลเอ็นต์ gRPC ใน .NET Core
  • การกำหนดค่า
  • คอร์ส
  • แยร์ป
• แล็บ 10 - ความปลอดภัย: การรับรองความถูกต้องและการอนุญาต
  • เซิร์ฟเวอร์ข้อมูลประจำตัว Duende
  • การกำหนดค่าบริการ REST สำหรับการตรวจสอบสิทธิ์ผู้ถือ JWT
  • การกำหนดค่าบริการ gRPC สำหรับการตรวจสอบสิทธิ์ผู้ถือ JWT
  • การกำหนดค่าไคลเอ็นต์ Blazor สำหรับการตรวจสอบสิทธิ์ผู้ถือ JWT
  • การอนุญาตอย่างง่ายด้วย Authorize Attribute
  • การดึงและส่ง JWT Bearer Tokens โดยใช้เฟรมเวิร์ก Duende.Bff.Yarp
• แล็บ 11 - ความปลอดภัย: การอนุญาตตามทรัพยากร
  • บริการการอนุญาต
  • นโยบาย
  • ความต้องการ
  • ตัวจัดการ
• แล็บ 12 - การเพิ่มประสิทธิภาพ
  • การแยกตาราง Entity Framework
  • ดาวน์โหลดไฟล์จากบริการ REST Web Api
  • การแคชเบราว์เซอร์
• แล็บ 13 - การตรวจสอบความถูกต้อง
  • คำอธิบายประกอบข้อมูล
  • การตรวจสอบความถูกต้องอย่างคล่องแคล่วในบริการหลัก
  • การตรวจสอบความถูกต้องอย่างคล่องแคล่วในบริการ ASP.NET Core REST
  • การตรวจสอบอย่างคล่องแคล่วใน Blazor ด้วย Blazored.FluentValidation
• แล็บ 14 - การทดสอบหน่วยส่วนประกอบของ Blazor ด้วย bUnit
  • การทดสอบหน่วย
  • การเยาะเย้ย
  • xหน่วย
  • จำนวนขั้นต่ำ
  • bหน่วย
• แล็บ 15 - การทำงานร่วมกันของ Blazor / Javascript
  • IJSRuntime
  • เรียกใช้ฟังก์ชัน JavaScript ใน ASP.NET Core Blazor
  • เรียกเมธอด .NET จากฟังก์ชัน JavaScript ใน ASP.NET Core Blazor
  • การแยก Blazor JavaScript และการอ้างอิงวัตถุ
  • แผ่นพับ
  • exif.js