Elsa Studio WASM默认认证替换为JWT实现求助

1. 项目依赖配置 #

先确保项目引入必要NuGet包：

• Microsoft.AspNetCore.Components.WebAssembly.Authentication
• System.IdentityModel.Tokens.Jwt

可通过NuGet包管理器安装，或在项目文件中添加：

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="7.0.0" />
<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="6.32.0" />

2. 配置JWT认证服务 #

在Program.cs中移除原有默认认证代码，替换为JWT认证配置：

builder.Services.AddAuthorizationCore();
builder.Services.AddHttpClient("ElsaApi", client =>
{
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress);
})
.AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("ElsaApi"));

builder.Services.AddOidcAuthentication(options =>
{
    // JWT授权服务器配置
    options.ProviderOptions.Authority = "你的JWT授权服务器地址";
    options.ProviderOptions.ClientId = "你的客户端ID";
    options.ProviderOptions.ResponseType = "code";
    options.ProviderOptions.Scope.Add("elsa.api");
    options.ProviderOptions.Scope.Add("openid");
    options.ProviderOptions.Scope.Add("profile");
    
    // 自定义声明映射
    options.UserOptions.RoleClaim = "role";
    options.UserOptions.NameClaim = "name";
});

3. 替换登录逻辑（保留原有UI） #

打开Login.razor组件，替换硬编码验证逻辑为JWT认证流程：

@page "/login"
@inject NavigationManager NavigationManager
@inject IAuthenticationService AuthenticationService

<h3>Login</h3>

<div class="login-form">
    <div class="form-group">
        <label>用户名</label>
        <input @bind="Username" type="text" class="form-control" />
    </div>
    <div class="form-group">
        <label>密码</label>
        <input @bind="Password" type="password" class="form-control" />
    </div>
    <button @onclick="Login" class="btn btn-primary">登录</button>
</div>

@code {
    private string Username { get; set; } = string.Empty;
    private string Password { get; set; } = string.Empty;

    private async Task Login()
    {
        try
        {
            var tokenResponse = await GetJwtToken(Username, Password);
            
            await AuthenticationService.LoginAsync(new LoginContext
            {
                AccessToken = tokenResponse.AccessToken,
                RefreshToken = tokenResponse.RefreshToken,
                ExpiresAt = DateTime.Now.AddSeconds(tokenResponse.ExpiresIn)
            });
            
            NavigationManager.NavigateTo("/");
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }

    private async Task<JwtTokenResponse> GetJwtToken(string username, string password)
    {
        var client = new HttpClient();
        var request = new HttpRequestMessage(HttpMethod.Post, "你的JWT登录接口地址");
        request.Content = new FormUrlEncodedContent(new Dictionary<string, string>
        {
            ["grant_type"] = "password",
            ["username"] = username,
            ["password"] = password,
            ["client_id"] = "你的客户端ID",
            ["scope"] = "elsa.api openid profile"
        });
        
        var response = await client.SendAsync(request);
        response.EnsureSuccessStatusCode();
        return await response.Content.ReadFromJsonAsync<JwtTokenResponse>();
    }

    private class JwtTokenResponse
    {
        public string AccessToken { get; set; } = string.Empty;
        public string RefreshToken { get; set; } = string.Empty;
        public int ExpiresIn { get; set; }
    }
}

4. 配置API请求自动携带Token #

第2步的Program.cs配置中已通过BaseAddressAuthorizationMessageHandler实现，它会自动将JWT Token添加到请求头的Authorization字段，无需额外操作。

5. 后端（Elsa Server）JWT验证配置 #

若使用自定义Elsa Server，需在其Program.cs中添加JWT认证支持：

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidateAudience = true,
            ValidateLifetime = true,
            ValidateIssuerSigningKey = true,
            ValidIssuer = "你的JWT发行方",
            ValidAudience = "你的JWT受众",
            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("你的密钥"))
        };
    });

builder.Services.AddAuthorization(options =>
{
    options.AddPolicy("ElsaApiPolicy", policy =>
    {
        policy.RequireAuthenticatedUser();
        policy.RequireClaim("scope", "elsa.api");
    });
});

app.UseAuthentication();
app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers().RequireAuthorization("ElsaApiPolicy");
});

相关文档（原英文文档翻译） #

Elsa Studio Blazor Server 安装文档 #

概述

Elsa Studio是基于Blazor的Web应用，用于管理Elsa工作流。Blazor Server版本运行在服务器端，通过SignalR与客户端通信。

安装步骤

1. 创建Blazor Server项目
   使用.NET CLI或Visual Studio创建新项目：

   dotnet new blazorserver -n ElsaStudioBlazorServer
   cd ElsaStudioBlazorServer
   

2. 安装Elsa Studio NuGet包
   安装Blazor Server版本的Elsa Studio包：

   dotnet add package Elsa.Studio.BlazorServer
   

3. 配置Elsa Studio服务
   在Program.cs中添加服务配置：

   builder.Services.AddElsaStudioBlazorServer(options =>
   {
       options.ElsaServerUrl = "https://localhost:5001"; // 你的Elsa Server地址
   });
   

4. 配置认证
   默认使用简单用户名/密码认证（admin/password），如需替换为JWT等方式，需配置ASP.NET Core认证服务，参考前文示例。

5. 添加Elsa Studio组件到布局
   在MainLayout.razor中引入组件：

   @using Elsa.Studio.BlazorServer.Components
   <ElsaStudio />
   

6. 运行项目
   启动项目后访问https://localhost:5000，使用配置的认证方式登录。

内容的提问来源于stack exchange，提问作者Lucas Samuel