《進擊吧！Blazor！》是本人與張善友老師合作的Blazor零基礎入門系列視頻，此系列能讓一個從未接觸過Blazor的程式員掌握開發Blazor應用的能力，
視頻地址：https://space.bilibili.com/483888821/channel/detail?cid=151273
本系列文章是基于《進擊吧！Blazor！》直播內容撰寫，升級.Net5，改進問題，講解更全面，因為篇幅有限，文章中省略了部分代碼，完整示例代碼：https://github.com/TimChen44/Blazor-ToDo

作者：陳超超
Ant Design Blazor 專案貢獻者，擁有十多年從業經驗，長期基于.Net技術堆疊進行架構與開發產品的作業，現就職于正泰集團，
郵箱：timchen@live.com
歡迎各位讀者有任何問題聯系我，我們共同進步，

我的的ToDo應用基本功能已經完成，但是自己的待辦當然只有自己知道，所以我們這次給我們的應用增加一些安全方面的功能，

Blazor 身份驗證與授權

身份驗證

Blazor Server應用和 Blazor WebAssembly 應用的安全方案有所不同，

• Blazor WebAssembly

Blazor WebAssembly 應用在客戶端上運行， 由于用戶可繞過客戶端檢查，因為用戶可修改所有客戶端代碼， 因此授權僅用于確定要顯示的 UI 選項，所有客戶端應用程式技術都是如此，

• Blazor Server

Blazor Server應用通過使用 SignalR 創建的實時連接運行， 建立連接后，將處理基于 SignalR 的應用的身份驗證， 可基于 cookie 或一些其他持有者令牌進行身份驗證，

授權

AuthorizeView 組件根據用戶是否獲得授權來選擇性地顯示 UI 內容， 如果只需要為用戶顯示資料，而不需要在程序邏輯中使用用戶的標識，那么此方法很有用，

<AuthorizeView>
    <Authorized>
<!--驗證通過顯示-->
    </Authorized>
    <NotAuthorized>
<!--驗證不通過顯示-->
    </NotAuthorized>
</AuthorizeView>

Blazor 中使用Token

在Blazor WebAssembly模式下， 因為應用都在客戶端運行，所以使用Token作為身份認證的方式是一個比較好的選擇，
基本的使用時序圖如下

對于安全要求不高的應用采用這個方法簡單、易維護，完全沒有問題，

但是Token本身在安全性上存在以下兩個風險：

1. Token無法注銷，所以可以在Token有效期內發送的非法請求，服務端無能為力，
2. Token通過AES加密存盤在客戶端，理論上可以進行離線破解，破解后就能任意偽造Token，

因此遇到安全要求非常高的應用時，我們需要認證服務進行Token的有效性驗證

改造ToDo

接著我們對之前的ToDo專案進行改造，讓他支持登錄功能，

ToDo.Shared

先把前后端互動所需的Dto創建了

public class LoginDto
{
    public string UserName { get; set; }
    public string Password { get; set; }
}

public class UserDto
{
    public string Name { get; set; }
    public string Token { get; set; }
}

ToDo.Server

先改造服務端，添加必要參考，撰寫身份認證代碼等

添加參考

• Microsoft.AspNetCore.Authentication.JwtBearer

Startup.cs

添加JwtBearer配置

public void ConfigureServices(IServiceCollection services)
{
	//......
    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
        .AddJwtBearer(options =>
        {
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateIssuer = true,//是否驗證Issuer
                ValidateAudience = true,//是否驗證Audience
                ValidateLifetime = true,//是否驗證失效時間
                ValidateIssuerSigningKey = true,//是否驗證SecurityKey
                ValidAudience = "guetClient",//Audience
                ValidIssuer = "guetServer",//Issuer，這兩項和簽發jwt的設定一致
                IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("123456789012345678901234567890123456789"))//拿到SecurityKey
            };
        });
}

此處定義了Token的密鑰，規則等，實際專案時可以將這些資訊放到配置中，

AuthController.cs

行政驗證控制器，用于驗證用戶身份，創建Token等，

[ApiController]
[Route("api/[controller]/[action]")]
public class AuthController : ControllerBase
{
    //登錄
    [HttpPost]
    public UserDto Login(LoginDto dto)
    {
        //模擬獲得Token
        var jwtToken = GetToken(dto.UserName);

        return new() { Name = dto.UserName, Token = jwtToken };
    }

    //獲得用戶，當頁面客戶端頁面重繪時呼叫以獲得用戶資訊
    [HttpGet]
    public UserDto GetUser()
    {
        if (User.Identity.IsAuthenticated)//如果Token有效
        {
            var name = User.Claims.First(x => x.Type == ClaimTypes.Name).Value;//從Token中拿出用戶ID
            //模擬獲得Token
            var jwtToken = GetToken(name);
            return new UserDto() { Name = name, Token = jwtToken };
        }
        else
        {
            return new UserDto() { Name = null, Token = null };
        }
    }

    public string GetToken(string name)
    {
        //此處加入賬號密碼驗證代碼

        var claims = new Claim[]
        {
            new Claim(ClaimTypes.Name,name),
            new Claim(ClaimTypes.Role,"Admin"),
        };

        var key = new SymmetricSecurityKey(System.Text.Encoding.UTF8.GetBytes("123456789012345678901234567890123456789"));
        var expires = DateTime.Now.AddDays(30);
        var token = new JwtSecurityToken(
            issuer: "guetServer",
            audience: "guetClient",
            claims: claims,
            notBefore: DateTime.Now,
            expires: expires,
            signingCredentials: new SigningCredentials(key, SecurityAlgorithms.HmacSha256));

        return new JwtSecurityTokenHandler().WriteToken(token);
    }
}

ToDo.Client

改造客戶端，讓客戶端支持身份認證

添加參考

• Microsoft.AspNetCore.Components.Authorization

AuthenticationStateProvider

AuthenticationStateProvider 是 AuthorizeView 組件和 CascadingAuthenticationState 組件用于獲取身份驗證狀態的基礎服務，
通常不直接使用 AuthenticationStateProvider，直接使用主要缺點是，如果基礎身份驗證狀態資料發生更改，不會自動通知組件，其次是專案中總會有一些自定義的認證邏輯，
所以我們通常寫一個類繼承他，并重寫一些我們自己的邏輯，

//AuthProvider.cs
public class AuthProvider : AuthenticationStateProvider
{
    private readonly HttpClient HttpClient;
    public string UserName { get; set; }

    public AuthProvider(HttpClient httpClient)
    {
        HttpClient = httpClient;
    }

    public async override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        //這里獲得用戶登錄狀態
        var result = await HttpClient.GetFromJsonAsync<UserDto>($"api/Auth/GetUser");

        if (result?.Name == null)
        {
            MarkUserAsLoggedOut();
            return new AuthenticationState(new ClaimsPrincipal());
        }
        else
        {
            var claims = new List<Claim>();
            claims.Add(new Claim(ClaimTypes.Name, result.Name));
            var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity(claims, "apiauth"));
            return new AuthenticationState(authenticatedUser);
        }
    }

    /// <summary>
    /// 標記授權
    /// </summary>
    /// <param name="loginModel"></param>
    /// <returns></returns>
    public void MarkUserAsAuthenticated(UserDto userDto)
    {
        HttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", userDto.Token);
        UserName = userDto.Name;

        //此處應該根據服務器的回傳的內容進行配置本地策略，作為演示，默認添加了“Admin”
        var claims = new List<Claim>();
        claims.Add(new Claim(ClaimTypes.Name, userDto.Name));
        claims.Add(new Claim("Admin", "Admin"));

        var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity(claims, "apiauth"));
        var authState = Task.FromResult(new AuthenticationState(authenticatedUser));
        NotifyAuthenticationStateChanged(authState);

        //慈湖可以可以將Token存盤在本地存盤中，實作頁面重繪無需登錄
    }

    /// <summary>
    /// 標記注銷
    /// </summary>
    public void MarkUserAsLoggedOut()
    {
        HttpClient.DefaultRequestHeaders.Authorization = null;
        UserName = null;

        var anonymousUser = new ClaimsPrincipal(new ClaimsIdentity());
        var authState = Task.FromResult(new AuthenticationState(anonymousUser));
        NotifyAuthenticationStateChanged(authState);
    }
}

NotifyAuthenticationStateChanged方法會通知身份驗證狀態資料（例如 AuthorizeView）使用者使用新資料重新呈現，
HttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", userDto.Token);將HTTP請求頭中加入Token，這樣之后所有的請求都會帶上Token，

在Program中注入AuthProvider服務，以便于其他地方使用

//Program.cs
builder.Services.AddScoped<AuthenticationStateProvider, AuthProvider>();

在Program中配置支持的策略

builder.Services.AddAuthorizationCore(option =>
{
    option.AddPolicy("Admin", policy => policy.RequireClaim("Admin"));
});

登錄界面

添加Login.razor組件，代碼如下

<div style="margin:100px">
    <Spin Spinning="isLoading">
        @if (model != null)
        {
            <Form OnFinish="OnSave" Model="@model" LabelCol="new ColLayoutParam() {Span = 6 }">
                <FormItem Label="用戶名">
                    <Input @bind-Value="context.UserName" />
                </FormItem>
                <FormItem Label="密碼">
                    <Input @bind-Value="context.Password" Type="password" />
                </FormItem>
                <FormItem  WrapperColOffset="6">
                    <Button Type="@ButtonType.Primary" HtmlType="submit">登錄</Button>
                </FormItem>
            </Form>
        }
    </Spin>
</div>

public partial class Login
{
    [Inject] public HttpClient Http { get; set; }
    [Inject] public MessageService MsgSvr { get; set; }
    [Inject] public AuthenticationStateProvider AuthProvider { get; set; }

    LoginDto model = new LoginDto();
    bool isLoading;

    async void OnLogin()
    {
        isLoading = true;

        var httpResponse = await Http.PostAsJsonAsync<LoginDto>($"api/Auth/Login", model);
        UserDto result = await httpResponse.Content.ReadFromJsonAsync<UserDto>();

        if (string.IsNullOrWhiteSpace(result?.Token) == false )
        {
            MsgSvr.Success($"登錄成功");
            ((AuthProvider)AuthProvider).MarkUserAsAuthenticated(result);
        }
        else
        {
            MsgSvr.Error($"用戶名或密碼錯誤");
        }
        isLoading = false;
       InvokeAsync( StateHasChanged);
    }
}

登錄界面代碼很簡單，就是向api/Auth/Login請求，根據回傳的結果判斷是否登入成功，
((AuthProvider)AuthProvider).MarkUserAsAuthenticated(result);標記身份認證狀態已經修改，

修改布局

修改MainLayout.razor檔案

<CascadingAuthenticationState>
    <AuthorizeView>
        <Authorized>
            <Layout>
                <Sider Style="overflow: auto;height: 100vh;position: fixed;left: 0;">
                    <div class="logo">
                        進擊吧！Blazor！
                    </div>
                    <Menu Theme="MenuTheme.Dark" Mode=@MenuMode.Inline>
                        <MenuItem RouterLink="/">
                            主頁
                        </MenuItem>
                        <MenuItem RouterLink="/today" RouterMatch="NavLinkMatch.Prefix">
                            我的一天
                        </MenuItem>
                        <MenuItem RouterLink="/star" RouterMatch="NavLinkMatch.Prefix">
                            重要任務
                        </MenuItem>
                        <MenuItem RouterLink="/search" RouterMatch="NavLinkMatch.Prefix">
                            全部
                        </MenuItem>
                    </Menu>
                </Sider>
                <Layout Class="site-layout">
                    @Body
                </Layout>
            </Layout>
        </Authorized>
        <NotAuthorized>
            <ToDo.Client.Pages.Login></ToDo.Client.Pages.Login>
        </NotAuthorized>
    </AuthorizeView>
</CascadingAuthenticationState>

當授權通過后顯示<AuthorizeView>中<Authorized>的選單及主頁，反之顯示<NotAuthorized>的Login組件內容，
當需要根據權限顯示不同內容，可以使用<AuthorizeView>的Policy屬性實作，具體是在AuthenticationStateProvider中通過配置策略，比如示例中claims.Add(new Claim("Admin", "Admin"));就添加了Admin策略，在頁面上只需<AuthorizeView Policy="Admin">就可以控制只有Admin策略的賬戶顯示其內容了，
CascadingAuthenticationState級聯身份狀態，它采用了Balzor組件中級聯機制，這樣我們可以在任意層級的組件中使用AuthorizeView來控制UI了
AuthorizeView 組件根據用戶是否獲得授權來選擇性地顯示 UI 內容，
Authorized組件中的內容只有在獲得授權時顯示，
NotAuthorized組件中的內容只有在未經授權時顯示，

修改_Imports.razor檔案，添加必要的參考

@using Microsoft.AspNetCore.Components.Authorization

運行查看效果

關于更多安全

安全是一個很大的話題，這個章節只是介紹了其最簡單的實作方式，還有更多內容推薦閱讀官方檔案：https://docs.microsoft.com/zh-cn/aspnet/core/blazor/security/?view=aspnetcore-5.0

次回預告

我們通過幾張圖表，將我們ToDo應用中任務情況做個完美統計，

回傳目錄