Blazor Workshop项目实战：实现Blazor应用的身份认证与授权-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01012/article/details/148575770

Blazor Workshop项目实战：实现Blazor应用的身份认证与授权

blazor-workshop Blazor workshop 项目地址: https://gitcode.com/gh_mirrors/bl/blazor-workshop

前言

在现代Web应用开发中，身份认证和授权是保障系统安全的核心功能。本文将基于Blazor Workshop项目，详细介绍如何在Blazor WebAssembly应用中实现完整的认证授权流程，帮助开发者构建安全可靠的Web应用。

为什么需要认证授权

在初始版本的披萨订购应用中，存在一个严重的安全问题：所有用户订单数据对所有访问者完全可见。这意味着：

用户可以查看其他用户的订单详情
缺乏基本的隐私保护
无法实现个性化的用户体验

这些问题不仅影响用户体验，还可能违反数据隐私法规。因此，我们需要引入认证授权机制来解决这些问题。

认证与授权的基本概念

认证(Authentication)：验证用户身份的过程（"你是谁"）
授权(Authorization)：确定用户权限的过程（"你能做什么"）

在Blazor应用中，这两者需要协同工作，共同保障应用安全。

服务器端安全实施

安全实施的第一原则：所有真正的安全规则必须在后端服务器执行。前端UI的权限控制只是对友好用户的便利，恶意用户可以轻易绕过客户端限制。

1. 添加控制器授权

在OrdersController中添加[Authorize]特性：

[Route("orders")]
[ApiController]
[Authorize]  // 添加此特性
public class OrdersController : Controller
{
    // 控制器方法...
}

添加后，未认证用户访问订单相关API将收到HTTP 401未授权响应。

客户端认证状态管理

Blazor提供了AuthenticationStateProvider服务来跟踪用户认证状态。我们需要配置相关服务：

1. 配置认证服务

在客户端项目的Program.cs中添加：

// 添加认证核心服务
builder.Services.AddAuthorizationCore();
builder.Services.AddCascadingAuthenticationState();
builder.Services.AddSingleton<AuthenticationStateProvider, PersistentAuthenticationStateProvider>();

这些服务基于OpenID Connect协议实现，处理用户身份确认的所有细节。

2. 认证流程概述

Blazor的认证流程包含以下关键步骤：

用户尝试登录或访问受保护资源时，重定向到登录页
登录页准备重定向到身份提供者的授权端点
身份提供者确认用户身份并颁发令牌
应用处理认证响应，完成登录流程或显示错误

实现用户界面认证状态展示

1. 创建LoginDisplay组件

@implements IDisposable
@inject NavigationManager Navigation

<div class="user-info">
    <AuthorizeView>
        <Authorizing>
            <text>...</text>
        </Authorizing>
        <Authorized>
            <img src="img/user.svg" />
            <div>
                <a href="Account/Manage" class="username">@context.User.Identity.Name</a>
                <form action="Account/Logout" method="post">
                    <AntiforgeryToken />
                    <input type="hidden" name="ReturnUrl" value="@currentUrl" />
                    <button class="btn btn-link sign-out" type="submit">Sign out</button>
                </form>
            </div>
        </Authorized>
        <NotAuthorized>
            <a class="sign-in" href="Account/Register">Register</a>
            <a class="sign-in" href="Account/Login">Log in</a>
        </NotAuthorized>
    </AuthorizeView>
</div>

2. 集成到主布局

将LoginDisplay组件添加到MainLayout.razor的顶部导航栏中。

特定页面的登录要求

1. 为结账页面添加授权

在Checkout.razor顶部添加：

@attribute [Authorize]

2. 配置授权路由视图

修改Routes.razor使用AuthorizeRouteView：

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)">
            <NotAuthorized>
                <RedirectToLogin />
            </NotAuthorized>
            <Authorizing>
                <text>Authorizing... Please wait</text>
            </Authorizing>
        </AuthorizeRouteView>
    </Found>
</Router>

根据认证状态控制UI元素

使用AuthorizeView组件可以轻松控制UI元素的显示：

<AuthorizeView>
    <NavLink href="myorders" class="nav-tab">
        <img src="img/bike.svg" />
        <div>My Orders</div>
    </NavLink>
</AuthorizeView>

这样，"我的订单"标签只对已登录用户可见。