如何在授权 swagger ui 中添加自定义标头？

Question

如下代码所示，在.NET中的Web API Project中实现，可以像图片一样通过登录在swagger中发行代币。

但是除了client_id和client_secret之外，我还需要OAuth2.0中的自定义输入框。自定义输入框的目的是在页眉中使用。

有没有办法在附加图像窗口中添加输入框以将输入值用作标题值？

自定义标头不会在我开发的所有 API 中使用，只会在 OAuth2.0 身份验证中使用，如图所示。

    public static void AddSwaggerDocumentation(this IServiceCollection services)
    {
        services.AddSwaggerGen(option =>
        {
            option.AddSecurityDefinition("OAuth2.0", new OpenApiSecurityScheme
            {
                Type = SecuritySchemeType.OAuth2,
                Flows = new OpenApiOAuthFlows
                {
                    ClientCredentials = new OpenApiOAuthFlow
                    {
                        TokenUrl = new Uri("https://localhost:7154/api/login")
                    }
                }
            });

            option.AddSecurityRequirement(new OpenApiSecurityRequirement()
            {
                {
                    new OpenApiSecurityScheme()
                    {
                        Reference = new OpenApiReference()
                        {
                            Type = ReferenceType.SecurityScheme,
                            Id = "Bearer"
                        },
                        Scheme = "Bearer",
                        Type = SecuritySchemeType.Http,
                        Name = "Bearer",
                        In = ParameterLocation.Header
                    }, new List<string>()
                }
            });
        });
    }

Answer 1

这只是我想到的一个想法希望对你有帮助 只是尝试一下，可能不确定它是否会出现在您自己的代码中；

要在 Swagger UI 中添加用于 OAuth2.0 身份验证的自定义输入框，可以按照以下步骤操作：

自定义 Swagger UI：您需要自定义 Swagger UI 界面，以包含用于自定义标头值的附加输入字段。

修改 OAuth2.0 配置：您还应该更新 OAuth2.0 配置以包含使用用户输入的值的自定义标头。

自定义 Swagger UI：

在 .NET 项目中找到 Swagger UI 源代码。这通常可以在“wwwroot/swagger”之类的文件夹或类似位置找到。 在 Swagger UI HTML 文件（通常为 index.html 或类似文件）中，您需要为自定义标头值添加 HTML 输入元素。例如：

<input type="text" id="customHeader" placeholder="Custom Header Value">

修改JavaScript代码以捕获用户在发出OAuth2.0请求时输入的值。您可以使用 JavaScript 从您添加的输入字段中获取该值。 修改OAuth2.0配置：

在您的 OAuth2.0 配置（您在问题中提供的代码）中，使用用户输入的值更新它以包含自定义标头。 以下是如何修改 OAuth2.0 配置以包含自定义标头的简化示例：

public static void AddSwaggerDocumentation(this IServiceCollection 
                                             services)
 {
       services.AddSwaggerGen(option =>
   {
      option.AddSecurityDefinition("OAuth2.0", new OpenApiSecurityScheme
      {
         Type = SecuritySchemeType.OAuth2,
        Flows = new OpenApiOAuthFlows
        {
            ClientCredentials = new OpenApiOAuthFlow
            {
                TokenUrl = new Uri("https://localhost:7154/api/login"),
                Scopes = new Dictionary<string, string>
                {
                    // Define your OAuth2.0 scopes here
                }
            }
        }
    });

    option.AddSecurityRequirement(new OpenApiSecurityRequirement()
    {
        {
            new OpenApiSecurityScheme()
            {
                Reference = new OpenApiReference()
                {
                    Type = ReferenceType.SecurityScheme,
                    Id = "Bearer"
                },
                Scheme = "Bearer",
                Type = SecuritySchemeType.Http,
                Name = "Bearer",
                In = ParameterLocation.Header
            }, new List<string>()
        },
        // Add your custom header here using the value entered by the 
        user
        {
            "CustomHeader", // This should match the name of your custom 
             header
            new List<string>()
        }
    });
});}

请注意，这是一个简化的示例，您需要根据您的具体要求进行调整。 您还应该验证和清理用户输入以确保安全。 此外，您需要调整 API 代码以正确处理自定义标头