Blazor WebAssembly使用 AuthenticationStateProvider 自定义身份认证

本文章以客户端基础，实现类似后台系统，进入后台控制台页面需要经过登录身份验证才可访问情况

简单来时就是实现前后端分离，前端通过 token和用户信息进行身份认证，或者在 AuthenticationStateProvider  实现方法 GetAuthenticationStateAsync 中调用后台接口进行身份验证

安装依赖Microsoft.AspNetCore.Components.Authorization、Blazored.LocalStorage

自定义AuthenticationStateProvider

using Blazored.LocalStorage;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Authorization;
using Model.Entity;
using System.Net.Http.Headers;
using System.Security.Claims;

namespace font.Authorization
{
    public class HAuthenticationStateProvider : AuthenticationStateProvider 
    {   
        public HttpClient? _httpClient { set; get; }

        private AuthenticationService service;

        public HAuthenticationStateProvider(AuthenticationService service,  HttpClient _httpClient)
        {     
            this._httpClient = _httpClient;          

            this.service = service;
            service.UserChanged += (newUser) =>
            {
                NotifyAuthenticationStateChanged(
                    Task.FromResult(new AuthenticationState(newUser)));
            };
            service.LoginInState += MarkUserAsAuthenticated;
            service.LogoutState += MarkUserAsLoggedOut;
        }


        /// <summary>
        /// 身份认证提供
        /// </summary>
        /// <returns></returns>
        /// <exception cref="NotImplementedException"></exception>
        public override Task<AuthenticationState> GetAuthenticationStateAsync()
        {
            var savedToken = service.GetAccessToken();

            if (string.IsNullOrWhiteSpace(savedToken))
            {
                return Task.FromResult(new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity())));
            }
            // 已认证过请求时带上token
            _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue(service._bearer, savedToken);

            var user = service.GetUserDetail();
            if (user == null)
            {
                var anonymousUser = new ClaimsPrincipal(new ClaimsIdentity());
                return Task.FromResult(new AuthenticationState(anonymousUser));

            }
            return Task.FromResult(new AuthenticationState(new ClaimsPrincipal(
                new ClaimsIdentity( new[]{ new Claim(ClaimTypes.Name, user.UserName),  new Claim("userId", user.UserId.ToString())  }, service._authentication))));

        }

        /// <summary>
        /// 辅助登录后刷新认证状态
        /// </summary>
        /// <param name="token"></param>
        public void MarkUserAsAuthenticated(string token, UserDetail user)
        {
            var authenticatedUser = new AuthenticationState(
                new ClaimsPrincipal(new ClaimsIdentity(
                    new[] { new Claim(ClaimTypes.Name, user.UserName), new Claim("userId", user.Id.ToString()) }, service._authentication)));           
            var authState = Task.FromResult(authenticatedUser);
            NotifyAuthenticationStateChanged(authState);
        }

        /// <summary>
        /// 退出登录后刷新状态
        /// </summary>
        public void MarkUserAsLoggedOut()
        {
            var anonymousUser = new ClaimsPrincipal(new ClaimsIdentity());
            var authState = Task.FromResult(new AuthenticationState(anonymousUser));
            NotifyAuthenticationStateChanged(authState);
        }
    }
}

自定义 AuthenticationService 管理登录和注销操作

using Blazored.LocalStorage;
using Microsoft.AspNetCore.Components;
using Model.Entity;
using System.Security.Claims;

namespace font.Authorization
{
    public class AuthenticationService
    {
        public readonly string _token = "accessToken";
        public readonly string _bearer = "bearer";
        public readonly string _userDetail = "userDetail";
        public readonly string _authentication = "User Authentication";
        public event Action<ClaimsPrincipal>? UserChanged;
        public event Action<string, UserDetail>? LoginInState;
        public event Action? LogoutState;
        public readonly ISyncLocalStorageService localStorageService;  
        private ClaimsPrincipal? currentUser;
        public ClaimsPrincipal CurrentUser
        {
            get { return currentUser ?? new(); }
            set
            {
                currentUser = value;

                if (UserChanged is not null)
                {
                    UserChanged(currentUser);
                }
            }
        }

        public AuthenticationService(ISyncLocalStorageService _syncLocalStorageService)
        {
            this.localStorageService = _syncLocalStorageService;
        }

        public void LoginIn(string accessToken, UserDetail userDetail)
        {
            SetAccessToken(accessToken);
            SetUserDetail(userDetail);
            LoginInState(accessToken, userDetail);
        }
        public void Logout()
        {
            RemoveAccessToken();
            RemoveUserDetail();
            LogoutState();
        }

        public ClaimsPrincipal GetUserClaimsPrincipal(UserDetail user)
        {
            var identity = new ClaimsIdentity(
           new[]
           {
                new Claim(ClaimTypes.Name, user.UserName),
                new Claim("Id", user.Id.ToString()),
                new Claim("userId", user.UserId.ToString()),
           },
           _authentication);
            return new ClaimsPrincipal(identity);
        }
        
        public void RemoveAccessToken()
        {
            localStorageService.RemoveItem(_token);
        }
    
        public string? GetAccessToken()
        {
           return localStorageService.GetItemAsString(_token);
        }
     
        public void SetAccessToken(string accessToken)
        {
            localStorageService.SetItemAsString(_token, accessToken);
        }
        public UserDetail? GetUserDetail()
        {
            return localStorageService.GetItem<UserDetail>(_userDetail);
        }
        public void RemoveUserDetail()
        {
            localStorageService.RemoveItem(_userDetail);
        }
        public void SetUserDetail(UserDetail userDetail)
        {
            localStorageService.SetItem<UserDetail>(_userDetail, userDetail);
        }

    }
}

Program.cs

builder.Services.AddOptions();
builder.Services.AddAuthorizationCore();
builder.Services.AddScoped<AuthenticationService>();
builder.Services.AddScoped<AuthenticationStateProvider, HAuthenticationStateProvider>();

在布局组件或者具体组件内使用

<CascadingAuthenticationState>
    <AuthorizeView>
        <Authorized>
            <Layout>
                <Sider class="main-container" @bind-Collapsed=@collapsed NoTrigger OnCollapse="OnCollapse">
                     <div class="logo1" />
                     <NavMenu collapsed="@collapsed" />
                 </Sider>
                 <Layout class="site-layout">
                     <Header class="site-layout-background" Style="padding: 0;">
                         @if (collapsed)
                        {
                            <Icon Type="menu-unfold" Theme="outline" class="trigger" OnClick="toggle" Style=" font-size: 30px;margin-left: 10px;" />
                        }
                        else
                        {
                            <Icon Type="menu-fold" Theme="outline" class="trigger" OnClick="toggle" Style=" font-size: 30px;margin-left: 10px;" />
                        }
                    </Header>
                    <Content class="site-layout-background content-container" Style="margin: 24px 16px;padding: 24px;min-height: 280px;">
                        @Body
                    </Content>
                </Layout>
            </Layout>
        </Authorized>
        <NotAuthorized>
            <Login />
        </NotAuthorized>
    </AuthorizeView>
</CascadingAuthenticationState>

自定义登录组件和授权后的页面，注入  进行登录和注销测试

 再刷新页面测试 和注销测试

已授权首页代码

@page "/"
@inject IMessageService _message
@inject AuthenticationService serivce

<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.

<Button Type="primary">Primary</Button>
<Button Type="primary">Primary</Button>
<br />
<Button Type="primary" OnClick="@OnClick">
    Display normal message
</Button>

@code{
    private void OnClick()
    {
        Console.WriteLine("onclick");
        _message.Info("退出登录成功！");
        serivce.Logout();
    }
}

登录组件代码

@layout EmptyLayout
@page "/login"
@inject AuthenticationService au
@inject IMessageService message

<h3>Login</h3>
<Button Type="@ButtonType.Primary" OnClick="@login"  Size="30" Shape="@ButtonShape.Round" >登录</Button>

@code {
    void login()
    {
        UserDetail userDetail = new UserDetail() { Id = 1, UserId = 12, UserName = "hygge" };
        au.CurrentUser = au.GetUserClaimsPrincipal(userDetail);
        au.LoginIn("jwerqwert", userDetail);
        message.Success("登录成功！");
    }
}

简单的登录认证就完成了

用户详情代码

  public class UserDetail
  {
      public int Id { get; set; }
      public int UserId { get; set; }
      public string UserName { get; set; }
  
  }