.NET 7 Web API：如何在Swagger UI中用自定义头传输JWT Token

要实现获取Token后将其放入自定义jwt-token请求头而非默认的Authorization，需要同时调整Swagger的C#配置和注入自定义JS脚本修改UI行为，具体步骤如下：

1. 调整Swagger安全配置 #

修改你的Swagger配置代码，添加自定义ApiKey安全方案（对应jwt-token头），同时保留原OAuth2配置用于Token获取：

// 配置自定义ApiKey安全方案（对应jwt-token请求头）
options.AddSecurityDefinition("jwt-token", new OpenApiSecurityScheme
{
    Description = "自定义JWT Token请求头，直接填入Token值即可",
    In = ParameterLocation.Header,
    Type = SecuritySchemeType.ApiKey,
    Name = "jwt-token"
});

// 保留OAuth2安全定义，用于通过KeyCloak获取Token
options.AddSecurityDefinition(JwtBearerDefaults.AuthenticationScheme, new OpenApiSecurityScheme
{
    OpenIdConnectUrl = new Uri(authConfig.Authority ?? throw new NullReferenceException("Failed to get signing authority from config")),
    Description = "KeyCloak OAuth2授权获取Token",
    In = ParameterLocation.Header,
    Type = SecuritySchemeType.OAuth2,
    Name = "Authorization",
    Scheme = JwtBearerDefaults.AuthenticationScheme,
    Flows = new OpenApiOAuthFlows
    {
        Password = new OpenApiOAuthFlow
        {
            TokenUrl = new Uri(authConfig.AuthTokenProxy
                ?? authConfig.AuthTokenEndpoint
                ?? throw new NullReferenceException("Failed to get auth token endpoint or proxy from config")),
            Scopes = new Dictionary<string, string>
            {
                { "openid", "默认OpenId范围" }
            }
        }
    }
});

// 更新安全要求，使用自定义的jwt-token方案
options.AddSecurityRequirement(new OpenApiSecurityRequirement
{
    {
        new OpenApiSecurityScheme
        {
            Reference = new OpenApiReference
            {
                Type = ReferenceType.SecurityScheme,
                Id = "jwt-token"
            }
        },
        new List<string>()
    }
});

// 注入自定义JS脚本
options.InjectJavascript("/swagger-custom.js");

2. 创建自定义JS脚本 #

在项目的wwwroot目录下创建swagger-custom.js文件，写入以下代码拦截Swagger的Token处理逻辑：

window.addEventListener('load', function() {
    const ui = window.ui;

    // 重写OAuth2 Token获取完成后的处理逻辑
    ui.initOAuth({
        onComplete: function(authResult) {
            const token = authResult.access_token;
            // 清除默认Authorization头的授权信息
            delete ui.preauthorizeApiKeys['Authorization'];
            // 将Token存入自定义jwt-token头
            ui.preauthorizeApiKeys['jwt-token'] = token;
            // 更新Swagger UI授权状态
            ui.updateAuthorizations();
        }
    });

    // 拦截请求发送前的事件，确保请求头正确设置
    ui.getConfigs().requestInterceptor = function(request) {
        const token = ui.preauthorizeApiKeys['jwt-token'];
        if (token) {
            request.headers['jwt-token'] = token;
            // 移除可能存在的默认Authorization头
            delete request.headers['Authorization'];
        }
        return request;
    };
});

3. 启用静态文件中间件 #

在Program.cs中添加静态文件中间件，确保Swagger能加载自定义JS文件：

// 在UseSwagger之前添加
app.UseStaticFiles();

app.UseSwagger();
app.UseSwaggerUI(options =>
{
    // 你的Swagger UI配置
});

验证效果 #

启动项目后，在Swagger UI中点击「Authorize」，选择OAuth2授权方式输入账号密码获取Token。发送API请求时，查看请求头会发现jwt-token已携带Token，而默认的Authorization头不会出现。

内容的提问来源于stack exchange，提问作者Ali Shawky