。NET Core 3.1 Web API和Blazor服务器端JWT认证

Question

我想了解，如何为Blazor服务器端应用程序设置JWT身份验证？

让我举一个例子：假设我们有一个。NET Core 3.1 Web API项目。该项目有自己的TokenContler实现，它为有效的用户/密码组合提供了JWT。所有其他控制器都需要每个请求都有这样的令牌。

用于验证身份验证的中间件配置如下：

// enabling JWT bearer scheme
services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options => 
    {
        options.TokenValidationParameters = new TokenValidationParameters 
        {
            // TOKEN VALIDATION PARAMETERS
        };
    });

// applying default authentication policy
services.AddMvc(o => 
{
    o.EnableEndpointRouting = false;
    var policy = new AuthorizationPolicyBuilder()
        .RequireAuthenticatedUser()
        .Build();
    o.Filters.Add(new AuthorizeFilter(policy));
}).SetCompatibilityVersion(CompatibilityVersion.Version_3_0);

到目前为止，这工作得很好。

现在我想在这个项目中添加一个漂亮的Blazor服务器端用户界面，我只是不知道如何进行身份验证？

根据Microsoft文档，服务器端应用程序的身份验证应该在建立SignalR连接时进行：

Blazor服务器身份验证

Blazor服务器应用程序通过使用SignalR创建的实时连接运行。基于SignalR的应用程序中的身份验证在连接建立时处理。身份验证可以基于cookie或其他某种不记名令牌。

（来源：https://learn.microsoft.com/en-us/aspnet/core/security/blazor/?view=aspnetcore-3.1

不幸的是，我无法弄清楚这是如何工作的 - 我找到的教程和提示要么适用于客户端 Blazor 或使用 Cookie /标识......

有什么想法吗？

Answer 1

看看微软的这个教程:https://learn . Microsoft . com/en-us/azure/active-directory/develop/tutorial-blazor-server

注意：此调用为您提供 jwt...检查它的内容复制粘贴到 https://jwt.ms/

var token = await TokenAcquisitionService.GetAccessTokenForUserAsync(new string[] { "User.Read", "Mail.Read" });

Answer 2

对于 Blazor 服务器，最佳选择是使用 ProtectedLocalStorage 和某种 AuthenticationStateProvider。看看我的回购。我希望它能帮助 https://github.com/DudnykOleksandr/template-blazor-jwt-authentication

public class BlazorAppLoginService
{
    private readonly string TokenKey = nameof(TokenKey);

    private readonly ProtectedLocalStorage localStorage;
    private readonly NavigationManager navigation;
    private readonly IUsersService usersService;
    private readonly IConfiguration configuration;

    public BlazorAppLoginService(ProtectedLocalStorage localStorage, NavigationManager navigation, IUsersService usersService, IConfiguration configuration)
    {
        this.localStorage = localStorage;
        this.navigation = navigation;
        this.usersService = usersService;
        this.configuration = configuration;
    }

    public async Task<bool> LoginAsync(string userName, string password)
    {
        var isSuccess = false;

        var token = await usersService.LoginAsync(userName, password);
        if (!string.IsNullOrEmpty(token))
        {
            isSuccess = true;
            await localStorage.SetAsync(TokenKey, token);
        }

        return isSuccess;
    }


    public async Task<List<Claim>> GetLoginInfoAsync()
    {
        var emptyResut = new List<Claim>();
        ProtectedBrowserStorageResult<string> token = default;
        try
        {
            token = await localStorage.GetAsync<string>(TokenKey);
        }
        catch (CryptographicException)
        {
            await LogoutAsync();
            return emptyResut;
        }

        if (token.Success && token.Value != default)
        {
            var claims = JwtTokenHelper.ValidateDecodeToken(token.Value, configuration);
            if (!claims.Any())
            {
                await LogoutAsync();
            }
            return claims;
        }
        return emptyResut;
    }

    public async Task LogoutAsync()
    {
        await RemoveAuthDataFromStorageAsync();
        navigation.NavigateTo("/", true);
    }


    private async Task RemoveAuthDataFromStorageAsync()
    {
        await localStorage.DeleteAsync(TokenKey);
    }

public class CustomBlazorAuthStateProvider : AuthenticationStateProvider
{
    private readonly BlazorAppLoginService blazorAppLoginService;

    public CustomBlazorAuthStateProvider(BlazorAppLoginService blazorAppLoginService)
    {
        this.blazorAppLoginService = blazorAppLoginService;
    }

    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var claims = await blazorAppLoginService.GetLoginInfoAsync();
        ClaimsIdentity claimsIdentity;
        if (claims.Any())
        {
            claimsIdentity = new ClaimsIdentity(claims, "Bearer");
        }
        else
        {
            claimsIdentity = new ClaimsIdentity();
        }
        var claimsPrincipal = new ClaimsPrincipal(claimsIdentity);
        return new AuthenticationState(claimsPrincipal);
    }
}

Answer 3

我使用身份验证设置了Blazor Server，然后为API添加了JWT身份验证。所以我认为反过来是一样的。

以下是我所做的：

配置服务方法（我认为顺序可能很重要，不确定）：

services.AddDefaultIdentity<IdentityUser>()
    .AddRoles<IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>();

// not sure if this line is required for Blazor auth
services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();

services.AddAuthentication()
    .AddCookie(cfg => cfg.SlidingExpiration = true)
    .AddJwtBearer(x =>
    {
        // options
    });

// SamplePage.razor.cs
[Route("page-path")]
[Authorize]
public partial class SamplePage
{ }

// or like this in SamplePage.razor
@page "page-path"
@attribute [Authorize]

[Route("api/[controller]")]
[Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
public class SampleController : ControllerBase
{ }

我发现此页面中的内容对于在开始使用 Blazor 服务器端项目后使 JWT 正常工作非常有帮助。https://jasonwatmore.com/post/2019/10/11/aspnet-core-3-jwt-authentication-tutorial-with-example-api