(21/30)大家一起學Blazor:ASP.NET Core Identity(1)

(21/30)大家一起學Blazor:ASP.NET Core Identity(1)

今天來實現身分驗證的部分

最後更新 2021/12/22 下午11:01
StrayaWorker
預計閱讀 4 分鐘
分類
Blazor
專題
一起學Blazor系列
標籤
.NET C# ASP.NET Core Blazor

今天來實現身分驗證的部分,筆者此前是用ASP.NET Core Web API 搭配Blazor,用戶第一次成功登入時,在後端將RoleClaim 等權限儲存在JWT,將JWT 存在瀏覽器的LocalStorage 裡面,前端再自己重寫AuthenticationStateProvider,去檢查LocalStorageJWT,接著將AuthenticationState 當作CascadingParameter 層層傳遞到各Component,這樣就不需要不停跟後端交換資料,這是個很寶貴的經驗,讓筆者對身分驗證有深入了解,這次筆者試試看ASP.NET Core 自己的Identity

首先去 NuGet 下載 3 個元件,分別為Microsoft.AspNetCore.Identity.EntityFrameworkCoreMicrosoft.AspNetCore.Identity.UIMicrosoft.VisualStudio.Web.CodeGeneration.Design,第 1 個是Identity 必備元件,如果想自己實現JWT 的話,只需要下載第一個元件,再下載JWT 相關元件(Microsoft.AspNetCore.Authentication.JwtBearer)即可,後面 2 個都是讓ASP.NET Core Identity幫我們生成預置Identity 頁面的元件。

接著去BlazorServer.ModelsAppDbContext,將繼承的DbContext改為IdentityDbContext,代表接下來用的DBIdentity有關連。

BlazorServer 專案按右鍵,選擇「新增」,選擇「新搭建 Scaffold 的專案」,切換到「身分識別」頁籤,選擇身分識別

勾選「取代所有檔案」,資料內容類別選擇AppDbContext,要注意的是,如果剛才沒將繼承的類別改成IdentityDbContext,就不會有AppDbContext可以選,必須點右邊的「+」符號自己新增一個IdentityDbContext

這時候有可能遇到這種「FileUpload.OnInitializedAsync(): 沒有找到適合的方法來覆寫」的錯誤訊息,這通常是Visual Studio 的問題,先將這裡註解,重複一次上一段的做法就可以。

接著去Program.cs加上身分驗證的服務,Identity 預設將驗證資訊存在 Cookie。

接著在「套件管理員主控台」執行兩段命令,Add-Migration IdentitySupport新增MigrationUpdate-Database更新DB,去看資料庫,可以看到「多了 6 張表」,其中最常用到的就是AspNetUsersAspNetRolesAspNetUserRoles,如果以Claim 處理權限的話,就會用到AspNetUserClaims

專案則多了一個Areas 資料夾,裡面就是ASP.NET Core Identity 的實現,包括了「登入系統」、「帳號系統」、「管理系統」。

我們去NavMenu.razor加上通往LoginNavLink,在相對路徑中AreasPages 可以省略。

<div class="nav-item px-3">
    <NavLink class="nav-link" href="Identity/Account/Login" Match="NavLinkMatch.All">
        <span class="bi bi-file-earmark-lock2 h4 p-2 mb-0" aria-hidden="true"></span> Login
    </NavLink>
</div>

啟動網站後,從左邊 Nav 前往 Login 頁面,可以看到已經有個完善的登入系統,包括註冊、登入、忘記密碼等等功能,就連註冊密碼的規則也有,我們照規則註冊一個帳號,資料庫也生成了剛剛註冊的帳號。

註冊介面填寫正確的 Email 和密碼,AspNetUsers表即可查看註冊的使用者資訊:

引用

  1. Claims-based authorization in ASP.NET Core
  2. Claim type and claim value in claims policy based authorization in asp net core
  3. ASP NET Core Identity tutorial from scratch
  4. Unable to resolve service for type IEmailSender while attempting to activate RegisterModel

註:本文程式碼透過 .NET 6 + Visual Studio 2022 重構,可點擊原文連結與重構後程式碼比較學習,謝謝閱讀,支持原作者

繼續探索

延伸閱讀

更多文章
同分類 / 同標籤 2021/12/25

(29/30)大家一起學Blazor:Blazor單元測試

開發一個系統最無聊的過程大概就是解決 Bug 了,尤其是那種嘗試對 null 物件取值的錯誤(`Object reference not set to an instance of an object.`),這應該是大部分人剛踏入程式設計領域最常碰到的問題,為了從枯燥的解決 Bug 過程解脫,這篇就來介紹`單元測試`。

繼續閱讀
同分類 / 同標籤 2021/12/25

(28/30)大家一起學Blazor:Policy-based authorization

之前有說到`ASP.NET Core Identity` 使用的是基於`Claim` 的驗證,其實`ASP.NET Core Identity` 有不同類型的授權方式,最簡單的`登入授權`、`角色授權`、`Claim 授權`,但上述幾種都是以一種方式實現:原則授權(`Policy-based authorization`)。

繼續閱讀