【翻譯】配置基於角色的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

什麼是基於角色的授權? 當涉及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開頭,則為其分配UserAdmin角色組。

 

        [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)


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

更多相關文章
  • 前言 在之前鼓搗過一次基礎工程 April.WebApi 後,就考慮把常用的類庫打包做成一個公共類庫,這樣既方便維護也方便後續做快速開發使用,倉庫地址: "April.Util_github" , "April.Util_gitee" ,後續會繼續推出基於Util的基礎工程(包含許可權相關)以及如果代 ...
  • 出處:http://www.hzhcontrols.com/原文:http://www.hzhcontrols.com/blog-149.html本文版權歸www.hzhcontrols.com所有歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利 ...
  • string類型在我們實際項目開發中是一個最使用的類型,sting是一個引用類型,但是在實際使用中又有其特殊性所在,他是一個是:密封類、只讀類。在使用過程需要註意:避免不必要的記憶體開銷、避免不必要的裝箱操作。 ...
  • Aspose.Words for .NET是用於執行各種文檔管理和操作任務,支持生成,修改,轉換,呈現和列印文檔,而無需在跨平臺應用程式中直接使用Microsoft Word。同時支持所有流行的Word處理文件格式,並允許將Word文檔導出或轉換為固定佈局文件格式和最常用的圖像、多媒體格式。 我們很 ...
  • 前言 隨著 .NET Core 3.1 的第二個預覽版本發佈,微軟正式將 C++/CLI 移植到 .NET Core 上,從此可以使用 C++ 編寫 .NET Core 的程式了。 由於目前僅有 MSVC 支持編譯此類混合代碼,並且由於涉及到非托管代碼,因此 C++/CLI 目前不能跨平臺,只支持 ...
一周排行
  • static void Main(string[] args) { string url = "https://go.microsoft.com/fwlink/?linkid=2108895&amp;clcid=0x409"; DownloadBigFile(new Uri(url), "ssms.... ...
  • 1. 使用ASP.NET Core 3.x 構建 RESTful API - 1.準備工作 什麼是REST 什麼是REST REST一詞最早是在2000年,由Roy Fielding在他的博士論文《Architectural Styles and the Design of Network-base ...
  • wpf 兩個自定義控制項 一個是IP控制項,一個滑動條。先看下效果圖 IPControl 1、實際工作中有時需要設置IP信息,就想著做一個ip控制項。效果沒有window自帶的好,需要通過tab切換。但也能滿足使用。廢話不多說直接上代碼 IPControl.xaml IPControl.xaml.cs 2 ...
  • 近期和幾位做嵌入式開發的朋友閑聊過程中,一位朋友抱怨到:這C#太難用了,我想在N個窗體(或者是N個用戶組件之間)傳遞值都搞不定,非得要定義一個全局變數來存儲,然後用定時器來刷新值,太Low了。我急切的回答道:這很簡單,不就是委托的事嘛。那你來一個示例啊:朋友道。此為這篇博客的起因,所以此篇博客對於有 ...
  • 在面對對象編程中,類的三大特性分別為封裝,繼承,多態。其中多態的具體實現,依賴於三個方法,也就是虛方法,抽象類和介面。 多態的具體作用是什麼呢?或者說多態的存在有什麼意義呢?多態的存在有效的降低了程式的耦合度,在使用的時候,不僅可以表現大家都有的共性,還能在必要的時候突出一些特殊的的個性。 那麼如何 ...
  • [toc] 前言 在之前已經提到過,公用類庫Util已經開源,目的一是為了簡化開發的工作量,畢竟有些常規的功能類庫重覆率還是挺高的,二是為了一起探討學習軟體開發,用的人越多問題也就會越多,解決的問題越多功能也就越完善, 倉庫地址: "April.Util_github" , "April.Util_ ...
  • 【ASP.NET Core學習】在ASP.NET Core 種使用Entity Framework Core介紹,包括如何添加Entity Framwork Core,創建模型和遷移到資料庫,查詢數據,保存數據,使用事務,處理併發衝突 ...
  • 環境:MacOS 10.13 MAMAP Prophp 7.0.33 + xdebugVisual Studio Code前言我所理解的 POP Chain:利用魔術方法並巧妙構造特殊屬性調用一系列函數或類方法以執行某種敏感操作的調用堆棧反序列化常用魔法函數前言我所理解的 POP Chain:利用魔 ...
  • 當創建隊列jobs、監聽器或訂閱伺服器以推送到隊列中時,您可能會開始認為,一旦分派,隊列工作器決定如何處理您的邏輯就完全由您自己決定了。 嗯……並不是說你不能從作業內部與隊列工作器交互,但是通常情況下,哪怕你做了,也是沒必要的。 這個神奇的騷操作的出現是因為“InteractsWithQueue”這 ...
  • 在說正題之前先解釋一下交換機模式是個籠統的稱呼,它不是一個單獨的模式(包括了訂閱模式,路由模式和主題模式),交換機模式是一個比較常用的模式,主要是為了實現數據的同步。 首先,說一下訂閱模式,就和字面上的意思差不多主要就是一個生產者,多個消費者,同一個消息被多個消費者獲取,先看一下官網的圖示 整體執行 ...
x