【翻譯】配置基於角色的Blazor WebAssembly(Blazor客戶端)應用程式的授權

来源:https://www.cnblogs.com/chen8854/archive/2019/11/07/securing-your-blazor-apps-configuring-role-based-authorization-with-client-side-blazor.html
-Advertisement-
Play Games

什麼是基於角色的授權? 當涉及ASP.NET Core授權時，我們有兩種選擇，基於角色和基於策略(也有基於聲明的，但那隻是基於策略的一種特殊類型)。 基於角色的授權最初是在ASP.NET(ASP.NET Core之前)中引入，這是一種限制對資源訪問的聲明性方法。 開發人員可以指定用戶... ...


原文地址:https://chrissainty.com/securing-your-blazor-apps-configuring-role-based-authorization-with-client-side-blazor/

什麼是基於角色的授權?

 當涉及ASP.NET Core授權時，我們有兩種選擇，基於角色和基於策略(也有基於聲明的，但那隻是基於策略的一種特殊類型)。

基於角色的授權最初是在ASP.NET(ASP.NET Core之前)中引入，這是一種限制對資源訪問的聲明性方法。

開發人員可以指定用戶必須是其成員的特定角色的名稱，以便訪問特定的資源。一般是使用[Authorize]屬性指定一個角色或角色列表[Authorize(Roles="Admin")]。用戶可以是單個角色的成員，也可以是多個角色的成員。

如何創建和管理角色取決於所使用的備份存儲。到目前為止我們一直使用ASP.NET Core Identity，我們將繼續使用它來管理和存儲我們的角色。

本文章代碼將基於前一篇文章基礎上搭建。

設置ASP.NET Core Identity角色

我們需要添加角色服務到我們的應用中。我們需要更新Startup類中的ConfigureService方法。

            services.AddDefaultIdentity<IdentityUser>()
                .AddRoles<IdentityRole>()
                .AddEntityFrameworkStores<ApplicationDbContext>();

IdentityRole是ASP.NET Core Identity提供的預設角色類型。如果它無法滿足你的需求，你可以提供其他的角色類型。

接下來我們將為資料庫添加一些角色數據-添加一個用戶和管理員角色。為此，我們將重載ApplicationDbContext中的方法OnModelCreating。

    public class ApplicationDbContext : IdentityDbContext
    {
        public ApplicationDbContext(DbContextOptions options) : base(options) {
        }

        protected override void OnModelCreating(ModelBuilder builder) {
            base.OnModelCreating(builder);

            builder.Entity<IdentityRole>().HasData(new IdentityRole { Name = "User", NormalizedName = "USER", Id = Guid.NewGuid().ToString(), ConcurrencyStamp = Guid.NewGuid().ToString() });
            builder.Entity<IdentityRole>().HasData(new IdentityRole { Name = "Admin", NormalizedName = "ADMIN", Id = Guid.NewGuid().ToString(), ConcurrencyStamp = Guid.NewGuid().ToString() });
        }
    }

完成之後，我們需要生成遷移，然後將其應用到資料庫。

    Add-Migration SeedRoles
    Update-Database

為角色分配用戶

現在我們已經有一些可用的角色了，我們現在來更新賬戶控制器(Accounts controller)創建用戶的動作。

在新增用戶時候為其分配User角色。如果新用戶的電子郵件以admin開頭，則為其分配User和Admin角色組。

 

        [HttpPost]
        public async Task<IActionResult> Post([FromBody]RegisterModel model) {
            var newUser = new IdentityUser { UserName = model.Email, Email = model.Email };

            var result = await _userManager.CreateAsync(newUser, model.Password);

            if (!result.Succeeded) {
                var errors = result.Errors.Select(x => x.Description);

                return BadRequest(new RegisterResult { Successful = false, Errors = errors });

            }

            //為所有的新用戶分配User角色
            await _userManager.AddToRoleAsync(newUser, "User");

            //如果電子郵件以'admin'開頭則分配Admin角色
            if (newUser.Email.StartsWith("admin")) {
                await _userManager.AddToRoleAsync(newUser, "Admin");
            }

            return Ok(new RegisterResult { Successful = true });
        }

現在我們在用戶註冊時為其分配了角色，但我們需要將這些信息傳遞給Blazor。我們需要更新JSON Web Token中的聲明來處理這個需求。

將角色聲明添加到JWT

現在我們來更新登錄控制器(Login controller)中的Login方法。先以下用於生成聲明的代碼。

     var claims = new[]
     {
     　　new Claim(ClaimTypes.Name, login.Email)
     };

並使用以下代碼替換。

            var user = await _signInManager.UserManager.FindByEmailAsync(login.Email);
            var roles = await _signInManager.UserManager.GetRolesAsync(user);

            var claims= new List<Claim>();

            claims.Add(new Claim(ClaimTypes.Name, login.Email));

            foreach (var role in roles) {
                claims.Add(new Claim(ClaimTypes.Role, role));
            }

我們通過UserManager獲取當前用戶並獲取用戶擁有的角色。之前是將用戶電子郵件添加到Name聲明，現在如果用戶擁有角色，我們則迴圈將角色添加到Role聲明中。

關於角色聲明有一點比較很重要問題。如果一個用戶擁有兩個角色，那麼這兩個角色聲明會被添加到JWT中。

http://schemas.microsoft.com/ws/2008/06/identity/claims/role - "User"
http://schemas.microsoft.com/ws/2008/06/identity/claims/role - "Admin"

然後事實上並非如此，而是兩個角色合併為一個數組。

http://schemas.microsoft.com/ws/2008/06/identity/claims/role - ["User", "Admin"]

關於這一點很重要，在Blazor客戶端處理角色時需要註意。

在Blazor客戶端使用角色

我們將角色分配給新用戶，當他們登錄時，我們通過JWT返回這些角色。那麼在Blazor內部要如何使用角色呢?

在這個問題上目前微軟官方並未提供任何可以幫助我們處理角色的東西，所以我們必須手動處理它。

 

private IEnumerable<Claim> ParseClaimsFromJwt(string jwt)
        {
            var claims = new List<Claim>();
            var payload = jwt.Split('.')[1];
            var jsonBytes = ParseBase64WithoutPadding(payload);
            var keyValuePairs = JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes);

            keyValuePairs.TryGetValue(ClaimTypes.Role, out object roles);

            if (roles != null)
            {
                if (roles.ToString().Trim().StartsWith("["))
                {
                    var parsedRoles = JsonSerializer.Deserialize<string[]>(roles.ToString());

                    foreach (var parsedRole in parsedRoles)
                    {
                        claims.Add(new Claim(ClaimTypes.Role, parsedRole));
                    }
                }
                else
                {
                    claims.Add(new Claim(ClaimTypes.Role, roles.ToString()));
                }

                keyValuePairs.Remove(ClaimTypes.Role);
            }

            claims.AddRange(keyValuePairs.Select(kvp => new Claim(kvp.Key, kvp.Value.ToString())));

            return claims;
        }

        private byte[] ParseBase64WithoutPadding(string base64)
        {
            switch (base64.Length % 4)
            {
                case 2: base64 += "=="; break;
                case 3: base64 += "="; break;
            }
            return Convert.FromBase64String(base64);
        }

上面代碼對JWT進行解碼、提取聲明並返回聲明。但我們沒有涉及的是我對其進行了修改，以處理特殊情況下的角色。

如果存在角色聲明，那麼我們將檢查第一個字元是否為[,表名它是一個JSON數組。如果找到roles聲明，則解析提取角色名稱，迴圈遍歷角色名稱，並將每個角色名稱作為聲明添加。如果roles不是一個數組，則作為單個角色聲明添加。

這個方法不一定是最好的，但它確實實現了我們的目的。

我們需要更新MarkUserAsAuthenticated方法來調用ParseClaimsFromJwt。

        public void MarkUserAsAuthenticated(string token) {
            var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(token), "jwt"));
            var authState = Task.FromResult(new AuthenticationState(authenticatedUser));

            NotifyAuthenticationStateChanged(authState);
        }

最後，我們需要更新AuthService中的Login方法，以便在調用MarkUserAsAuthenticated時傳遞令牌而不是電子郵件。

        public async Task<LoginResult> Login(LoginModel loginModel) {
            var result = await _httpClient.PostJsonAsync<LoginResult>("api/Login", loginModel);

            if (result.Successful) {
                await _localStorage.SetItemAsync("authToken", result.Token);
                ((ApiAuthenticationStateProvider)_authenticationStateProvider).MarkUserAsAuthenticated(result.Token);
                _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", result.Token);

                return result;
            }

            return result;
        }

現在，我們應該能夠將基於角色的授權應用到我們的應用程式中。我們來關註下API的處理。

將基於角色的授權應用於API

將WeatherForecastController上的Get方法設置為僅對Admin角色中經過身份驗證的用戶可訪問。我們使用Authorize屬性並指定用於訪問它的角色。(這裡在預設生成模版與原文有出入)

        [HttpGet]
        [Authorize(Roles = "Admin")]
        public IEnumerable<WeatherForecast> Get()
        {
            var rng = new Random();
            return Enumerable.Range(1, 5).Select(index => new WeatherForecast
            {
                Date = DateTime.Now.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
                Summary = Summaries[rng.Next(Summaries.Length)]
            })
            .ToArray();
        }

如果您創建一個屬於Admin角色的新用戶，併在Blazor應用程式中訪問Fetch Data頁面，您應該可以看到一切都按預期的載入。

但你如果創建一個普通的用戶並執行相同的操作，您應該會看到頁面被卡在Loading...。

 

在Blazor中使用基於角色的授權

Blazor還可以使用Authorize屬性來保護頁面。這是通過使用@attribute指令來應該[Authorize]屬性來實現的。您還可以使用AuthorizeView組件來限制對頁面部分的訪問。

在 Blazor WebAssembly 應用中，可以繞過授權檢查，因為用戶可以修改所有客戶端代碼。 所有客戶端應用程式技術都是如此，其中包括 JavaScript SPA 框架或任何操作系統的本機應用程式。

始終對客戶端應用程式訪問的任何 API 終結點內的伺服器執行授權檢查。

由於預測數據只對管理員用戶可用，所以我們使用Authorize屬性限制對該頁面的訪問。

@page "/fetchdata"
@attribute [Authorize(Roles = "Admin")]

現在嘗試使用管理用戶登錄到該頁面。一切應該都正常載入。然後嘗試使用普通用戶登錄，您應該會看到一條未經授權的消息。

我們來測試一下AuthorizeView，在主頁(index.razor)添加如下代碼。

<AuthorizeView Roles="User">
    <p>You can only see this if you're in the User role.</p>
</AuthorizeView>

<AuthorizeView Roles="Admin">
    <p>You can only see this if you're in the Admin role.</p>
</AuthorizeView>

同樣，使用管理員用戶賬戶登錄。您應該看到這兩條消息，因為您同時擁有這兩個角色許可權。

如果您使用普通用戶登錄則只能看到第一條消息。

總結

在這篇文章中，我們瞭解了什麼是基於角色的授權以及如何使用ASP.NET Core Identity來設置和管理角色。然後我們討論瞭如何使用JSON Web Tokens將角色從API傳遞給客戶端並處理在Blazor中的角色聲明，最後在API和Blazor上實現一些基於角色的授權檢查。

我只是想重申一下，您不能僅僅依賴於客戶端身份驗證或授權，客戶端永遠不能被信任。必須始終在伺服器上執行身份驗證和授權檢查。

 

附上代碼(Github)


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用ASP.NET Core 3.x 構建 RESTful API - 1.準備工作
    以前寫過ASP.NET Core 2.x的REST API文章，今年再更新一下到3.0版本。 先決條件 我在B站有一個非常入門的ASP.NET Core 3.0的視頻教程，如果您對ASP.NET Core不瞭解，就可以先看一下裡面的基礎知識和API相關的內容，地址是：https://www.bili ...
  • IIS中如何設置功能變數名稱
    如何在IIS中設置功能變數名稱： 1，想好我們想要配置的本地功能變數名稱，我們以www.baidu.com為例。 2，打開系統盤，一般預設的系統盤為C盤，打開：C:\Windows\System32\drivers\etc這路徑，找到文件“hosts”文件。 3，打開文件hosts文件，在最下方回車加入：電腦ip地 ...
  • .NET Core 又一殺器! Web Blazor框架橫空出世!
    多年來，Javascript（及其子框架）已在瀏覽器中運行DOM（文檔對象模型），並且掌握了腳本知識才能真正操作客戶端UI。大約2年前，所有這些都隨著Web Assembly的引入而發生了變化-Web Assembly允許在客戶端解釋已編譯的語言(相對Web Assembly更多瞭解請閱讀瞭解was ...
  • .NET項目中實現多工程文件共用的方法
    一處開發，多處同步編輯使用，並且發佈時各個項目均可獨立 一、直接編輯項目工程文件 具體實現為：編輯 文件，在 或 節點： ： 屬性值為項目文件的相對引用路徑 ： 節點中放置要引用到當前項目中的位置 1.無需編譯的靜態資源文件等，使用 標簽引入 引用當前工程內的文件 引用外部項目工程中的文件 2.需要 ...
  • C#中對文件進行選擇對話框打開和保存對話框進行複製
    場景 通過文件選擇對話框選擇文件 複製文件到指定路徑 註： 博客主頁： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號霸道的程式猿獲取編程相關電子書、教程推送與免費下載。 實現 打開選擇文件對話框 OpenFileDialog importOpenFi ...
  • winfrom 獲取焦點控制項
    [DllImport("user32.dll", CharSet = CharSet.Auto, CallingConvention = CallingConvention.Winapi)] internal static extern IntPtr GetFocus(); ///獲取 當前擁有焦點 ...
  • C#中對文件File常用操作方法的工具類
    場景 C#中File類的常用讀取與寫入文件方法的使用： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/99693983 註： 博客主頁：https://blog.csdn.net/badao_liumang_qizhi關註公眾號霸 ...
  • 一個基於Net Core3.0的WPF框架Hello World實例
    一個基於Net Core3.0的WPF框架Hello World實例 [toc] 1.創建WPF解決方案 1.1 創建Net Core版本的WPF工程 1.2 指定項目名稱，路徑，解決方案名稱 2. 依賴庫和4個程式文件介紹 2.1 框架依賴庫 依賴Microsoft.NETCore.App跟Mic ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類