Blazor HyBrid 授权讲解

简介: Blazor HyBrid 授权讲解

Blazor HyBrid 授权讲解

本文介绍 ASP.NET Core 对 Blazor Hybrid 应用中的安全配置和管理及 ASP.NET Core Identity 的支持。

Blazor Hybrid 应用中的身份验证由本机平台库处理,因为后者提供了浏览器沙盒无法给予的经过增强的安全保证。 本机应用的身份验证使用特定于操作系统的机制或通过联合协议,如 OpenID Connect (OIDC)。 按照针对应用选择的标识提供者指南进行操作,然后使用本文中的指南进一步集成标识与 Blazor。

集成身份验证必须为 Razor 组件和服务实现以下目标:

准备工作

  • 安装Masa Blazor的模板,如果已经安装则忽略
dotnet new install Masa.Template::1.0.0-rc.2
  • 创建项目Photino项目模板
    image.png
  • 添加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; }
    }
}

效果

启动项目查看具体效果

image.png

默认进入登录界面,由于我们并没有授权信息,所以进入这个界面,然后我们随便输入一些内容点击登录。
screenshots.gif
当我们点击了登录按钮以后我们就进入到了MainLayout当中并且进入了首页。

对于授权Blazor由于模式都有所差异。

授权文档:ASP.NET Core Blazor Hybrid 身份验证和授权

结尾

来着token的分享

Blazor交流群:452761192

目录
相关文章
|
3月前
|
JavaScript 前端开发 C#
在winform blazor hybrid中绘图
在winform blazor hybrid中绘图
47 1
|
3月前
|
前端开发 C# 开发工具
在winform中使用blazor hybrid构建页面
在winform中使用blazor hybrid构建页面
61 0
|
JavaScript 前端开发 C#
Blazor Hybrid (Blazor混合开发)更好的读取本地图片
Blazor Hybrid (Blazor混合开发)更好的读取本地图片
129 0
Blazor Hybrid (Blazor混合开发)更好的读取本地图片
|
C# 计算机视觉 开发者
在Winform中一分钟入门使用好看性能还好的Blazor Hybrid
在Winform中一分钟入门使用好看性能还好的Blazor Hybrid
272 0
在Winform中一分钟入门使用好看性能还好的Blazor Hybrid
|
监控 Ubuntu C#
Blazor HyBrid在香橙派(Ubuntu Arm)运行的效果
Blazor HyBrid在香橙派(Ubuntu Arm)运行的效果
165 0
|
JavaScript C# Android开发
Blazor Hybrid (Blazor混合开发)更好的读取本地图片
Blazor Hybrid (Blazor混合开发)更好的读取本地图片
286 0
Blazor Hybrid (Blazor混合开发)更好的读取本地图片
|
3月前
|
SQL 网络协议 数据库连接
【Azure 应用服务】遇见“无法创建hybrid connection for App Service”的解决办法
【Azure 应用服务】遇见“无法创建hybrid connection for App Service”的解决办法
|
编解码 移动开发 JavaScript
开发Hybrid App的技术选型
开发Hybrid App的技术选型
196 0