Blazor HyBrid 授权讲解
本文介绍 ASP.NET Core 对 Blazor Hybrid 应用中的安全配置和管理及 ASP.NET Core Identity 的支持。
Blazor Hybrid 应用中的身份验证由本机平台库处理,因为后者提供了浏览器沙盒无法给予的经过增强的安全保证。 本机应用的身份验证使用特定于操作系统的机制或通过联合协议,如 OpenID Connect (OIDC)。 按照针对应用选择的标识提供者指南进行操作,然后使用本文中的指南进一步集成标识与 Blazor。
集成身份验证必须为 Razor 组件和服务实现以下目标:
- 使用
Microsoft.AspNetCore.Components.Authorization
包中的抽象,例如 AuthorizeView。 - 对身份验证上下文中的更改做出回应。
- 访问凭据由标识提供者的应用预配,例如用于执行授权 API 调用的访问令牌。
准备工作
- 安装
Masa Blazor
的模板,如果已经安装则忽略
dotnet new install Masa.Template::1.0.0-rc.2
- 创建项目
Photino
项目模板 添加
Microsoft.AspNetCore.Components.Authorization
NuGet包到项目文件中<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="7.0.5" />
自定义AuthenticationStateProvider处理程序
创建CustomAuthenticationStateProvider
然后继承AuthenticationStateProvider
CustomAuthenticationStateProvider.cs
代码文件
using Microsoft.AspNetCore.Components.Authorization;
using System.Security.Claims;
namespace MasaBlazorApp1;
public class CustomAuthenticationStateProvider : AuthenticationStateProvider
{
private ClaimsPrincipal User {
get; set; }
public override Task<AuthenticationState> GetAuthenticationStateAsync()
{
if (User != null)
{
return Task.FromResult(new AuthenticationState(User));
}
var identity = new ClaimsIdentity();
User = new ClaimsPrincipal(identity);
return Task.FromResult(new AuthenticationState(User));
}
public void AuthenticateUser(string emailAddress)
{
var identity = new ClaimsIdentity(new[]
{
new Claim(ClaimTypes.Name, emailAddress),
}, "Custom Authentication");
User = new ClaimsPrincipal(identity);
NotifyAuthenticationStateChanged(
Task.FromResult(new AuthenticationState(User)));
}
}
在继承AuthenticationStateProvider
方法会要重写GetAuthenticationStateAsync
方法,用于给授权组件获取授权信息,
在这个代码当中的User
是用于存储持久化我们的用户信息的如果需要对于授权修改,我们只需要修改这个自定义的处理程序即可。然后我们在CustomAuthenticationStateProvider
中还自定义了AuthenticateUser
这个是根据实际需求去实现,在目前这个代码中我们实现了个简单的Name
在最后有一个NotifyAuthenticationStateChanged
的调用,NotifyAuthenticationStateChanged
是干啥的?NotifyAuthenticationStateChanged也是AuthenticationStateProvider
提供的方法,核心功能是用于通知我们的授权状态被修改。
打开Program.cs
然后注入我们的CustomAuthenticationStateProvider
服务,在添加注入CustomAuthenticationStateProvider
之前我们实现添加注入了AddAuthorizationCore
,这个需要注意。
using MasaBlazorApp1;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.DependencyInjection.Extensions;
using Photino.Blazor;
internal class Program
{
[STAThread]
private static void Main(string[] args)
{
var builder = PhotinoBlazorAppBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddMasaBlazor();
builder.Services.AddAuthorizationCore();
builder.Services.TryAddSingleton<AuthenticationStateProvider, CustomAuthenticationStateProvider>();
var app = builder.Build();
app.MainWindow
.SetTitle("Photino Blazor Sample");
AppDomain.CurrentDomain.UnhandledException += (sender, error) =>
{
};
app.Run();
}
}
然后继续打开我们的App.razor
添加授权相关组件,修改之前在_Imports.razor
添加以下引用
@using Microsoft.AspNetCore.Components.Authorization
添加未授权时显示的组件Shared/Login.razor
,组件提供了一个输入框和一个按钮,输入框输入用户名,按钮则使用我们自定义的CustomAuthenticationStateProvider
中提供的AuthenticateUser
方法,用于更新授权信息从而刷新到授权的组件当中。
@inject AuthenticationStateProvider AuthenticationStateProvider
<MTextField @bind-Value="_userName" />
<MButton @onclick="SignIn">登录</MButton>
@code {
private string _userName = "账号";
private void SignIn()
{
((CustomAuthenticationStateProvider)AuthenticationStateProvider)
.AuthenticateUser(_userName);
}
}
App.razor
文件
@namespace MasaBlazorApp1
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<AuthorizeView>
<Authorized>
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
</RouteView>
</Authorized>
<NotAuthorized>
<Login/>
</NotAuthorized>
</AuthorizeView>
<FocusOnNavigate RouteData="@routeData" Selector="h1"/>
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>
App.razor
文件在Router
中添加了AuthorizeView
组件,用于显示授权显示的组件和未授权显示的组件。当有授权的情况下我们将使用默认的MainLayout
布局,如果是未授权我们将实现Login
,需要注意的是我们在组件最外层添加了CascadingAuthenticationState
这个是核心组件,
CascadingAuthenticationState.cs
的反编译以后的代码,在组件当中注入了AuthenticationStateProvider
然后在进入OnInitialized
事件的时候对于AuthenticationStateProvider
提供的AuthenticationStateChanged
事件进行了监听,这个也就对应到了上面提到的NotifyAuthenticationStateChanged
,当调用到NotifyAuthenticationStateChanged
的时候会触发到AuthenticationStateChanged
的事件,然后会触发组件的OnAuthenticationStateChanged
方法,进行授权状态更新,这个也就是核心的组件。
#line hidden
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;
public partial class CascadingAuthenticationState : global::Microsoft.AspNetCore.Components.ComponentBase, IDisposable
{
#pragma warning disable 1998
protected override void BuildRenderTree(global::Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
{
__builder.OpenComponent<global::Microsoft.AspNetCore.Components.CascadingValue<System.Threading.Tasks.Task<AuthenticationState>>>(0);
__builder.AddAttribute(1, "Value", global::Microsoft.AspNetCore.Components.CompilerServices.RuntimeHelpers.TypeCheck<System.Threading.Tasks.Task<AuthenticationState>>(
#nullable restore
#line 4 "D:\a\_work\1\s\src\Components\Authorization\src\CascadingAuthenticationState.razor"
_currentAuthenticationStateTask
#line default
#line hidden
#nullable disable
));
__builder.AddAttribute(2, "ChildContent", (global::Microsoft.AspNetCore.Components.RenderFragment)(
#nullable restore
#line 4 "D:\a\_work\1\s\src\Components\Authorization\src\CascadingAuthenticationState.razor"
ChildContent
#line default
#line hidden
#nullable disable
));
__builder.CloseComponent();
}
#pragma warning restore 1998
#nullable restore
#line 6 "D:\a\_work\1\s\src\Components\Authorization\src\CascadingAuthenticationState.razor"
private Task<AuthenticationState>? _currentAuthenticationStateTask;
/// <summary>
/// The content to which the authentication state should be provided.
/// </summary>
[Parameter]
public RenderFragment? ChildContent {
get; set; }
protected override void OnInitialized()
{
AuthenticationStateProvider.AuthenticationStateChanged += OnAuthenticationStateChanged;
_currentAuthenticationStateTask = AuthenticationStateProvider
.GetAuthenticationStateAsync();
}
private void OnAuthenticationStateChanged(Task<AuthenticationState> newAuthStateTask)
{
_ = InvokeAsync(() =>
{
_currentAuthenticationStateTask = newAuthStateTask;
StateHasChanged();
});
}
void IDisposable.Dispose()
{
AuthenticationStateProvider.AuthenticationStateChanged -= OnAuthenticationStateChanged;
}
#line default
#line hidden
#nullable disable
[global::Microsoft.AspNetCore.Components.InjectAttribute] private AuthenticationStateProvider AuthenticationStateProvider {
get; set; }
}
}
效果
启动项目查看具体效果
默认进入登录界面,由于我们并没有授权信息,所以进入这个界面,然后我们随便输入一些内容点击登录。
当我们点击了登录按钮以后我们就进入到了MainLayout
当中并且进入了首页。
对于授权Blazor由于模式都有所差异。
授权文档:ASP.NET Core Blazor Hybrid 身份验证和授权
结尾
来着token的分享
Blazor交流群:452761192