ABP框架中Blazor WebApp分层应用的身份验证优化实践

背景介绍

在现代Web应用开发中，Blazor技术因其能够使用C#代替JavaScript来构建交互式Web UI而广受欢迎。ABP框架作为一个全栈应用程序开发框架，提供了对Blazor技术的全面支持。在ABP框架的Blazor WebApp分层架构应用中，身份验证机制的设计尤为重要。

传统身份验证方式的问题

在之前的ABP框架实现中，Blazor WebApp分层应用采用了以下身份验证流程：

1. 用户通过WebApp项目进行身份验证
2. 获取access_token后通过PersistentComponentState传递给客户端项目
3. 客户端项目直接调用API项目接口时携带该token

这种方式虽然可行，但存在几个潜在问题：

• 需要额外处理token的传递和持久化
• 增加了客户端与API直接通信的安全风险
• 维护两套认证机制（cookie和token）增加了复杂度

优化后的身份验证方案

ABP框架团队提出了更优雅的解决方案，核心思想是：

让客户端项目通过WebApp项目作为代理来访问API，而不是直接调用API项目。这样可以利用WebApp已有的cookie认证机制，简化整个流程。

主要变更点

1. 服务端点配置调整：

   • 将客户端项目的RemoteServices配置指向WebApp项目而非API项目
   • 这样所有API调用都会经过WebApp项目转发

2. 认证机制简化：

   • 移除token传递逻辑
   • 完全依赖cookie认证
   • 添加防伪令牌保护

3. 代码结构调整：

   • 替换服务注册方法
   • 简化App.razor中的认证处理

具体实现步骤

1. 配置调整

修改客户端项目的appsettings.json，将RemoteServices的BaseUrl指向WebApp项目：

{
  "RemoteServices": {
    "Default": {
      "BaseUrl": "https://localhost:44334" // WebApp项目地址
    }
  }
}

2. 服务注册变更

在客户端项目的Program.cs中，将服务注册方法从：

builder.Services.AddBlazorWebAppTieredServices();

改为：

builder.Services.AddBlazorWebAppServices();

3. 防伪令牌处理

在WebApp项目的App.razor中添加防伪令牌支持：

@using Volo.Abp.AspNetCore.Mvc.AntiForgery;

[Inject]
private IAbpAntiForgeryManager AbpAntiForgeryManager { get; set; }

protected override Task OnInitializedAsync()
{
    AbpAntiForgeryManager.SetCookie();
    return Task.CompletedTask;
}

技术优势分析

这种优化方案带来了多方面的改进：

1. 安全性提升：

   • 减少了敏感信息(access_token)在客户端暴露的风险
   • 通过防伪令牌增强了CSRF防护
   • API不再直接对外暴露

2. 架构简化：

   • 统一了认证机制，只使用cookie
   • 移除了复杂的token传递逻辑
   • 减少了组件间的耦合

3. 维护性增强：

   • 配置更加集中和简单
   • 架构的开发者，建议：

4. 评估当前项目是否使用了token传递机制

5. 按照本文步骤逐步迁移到新的认证方案