Blazor Server应用和 Blazor WebAssembly 应用的安全方案有所不同。
Blazor WebAssembly 应用在客户端上运行。 由于用户可绕过客户端检查，因为用户可修改所有客户端代码， 因此授权仅用于确定要显示的 UI 选项，所有客户端应用程序技术都是如此。
Blazor Server应用通过使用 SignalR 创建的实时连接运行。 建立连接后，将处理基于 SignalR 的应用的身份验证。 可基于 cookie 或一些其他持有者令牌进行身份验证。
AuthorizeView 组件根据用户是否获得授权来选择性地显示 UI 内容。 如果只需要为用户显示数据，而不需要在过程逻辑中使用用户的标识，那么此方法很有用。
<AuthorizeView>
<Authorized>
<!--验证通过显示-->
</Authorized>
<NotAuthorized>
<!--验证不通过显示-->
</NotAuthorized>
</AuthorizeView>在Blazor WebAssembly模式下， 因为应用都在客户端运行，所以使用Token作为身份认证的方式是一个比较好的选择。 基本的使用时序图如下
对于安全要求不高的应用采用这个方法简单、易维护，完全没有问题。
但是Token本身在安全性上存在以下两个风险：
因此遇到安全要求非常高的应用时，我们需要认证服务进行Token的有效性验证
接着我们对之前的ToDo项目进行改造，让他支持登录功能。
先把前后端交互所需的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; }
}
先改造服务端，添加必要引用，编写身份认证代码等
添加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的密钥，规则等，实际项目时可以将这些信息放到配置中。
行政验证控制器，用于验证用户身份，创建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);
}
}
改造客户端，让客户端支持身份认证
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
运行查看效果
