Blazor HyBrid 授权讲解
2023/5/31 18:22:04
本文主要是介绍Blazor HyBrid 授权讲解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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
这篇关于Blazor HyBrid 授权讲解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行
- 2024-05-08阿里云域名注册流程,分享给第一次购买域名的新手站长!