Question

我有一个ASP.NET Web Api 2应用程序。我添加了Swashbuckle（Swagger for .NET）。它显示我的端点没问题，但是为了发送请求，我需要将Authorization标头附加到该请求。如果我理解为了这样做，我需要修改index.html文件（https://github.com/swagger-api/swagger-ui#how-to-use-it），所以我git cloned Swashbuckle项目以修改index.html并添加一些标题。

这是在Swashbuckle中使用请求发送Authorization标头的唯一方法吗？

Answer 1

为了使用Swagger UI发送带有请求的Authorization标头，我需要：

鉴于我的程序集的名称是：My.Assembly，它包含一个文件夹：Swagger，在我放置自定义index.html的地方，我在SwaggerConfig.cs中添加了这一行：
```
 c.CustomAsset("index", thisAssembly, "My.Assembly.Swagger.index.html");
```

请注意，index.html会加载javascript和css文件。我必须将所有点都更改为文件路径中的虚线，以便加载这些文件。我不知道为什么要这么做，但它解决了加载文件的问题......

在index.html文件中我修改了

addApiKeyAuthorization（）

功能看起来像这样：

function addApiKeyAuthorization() {
        var key = encodeURIComponent($('#input_apiKey')[0].value);
        if (key && key.trim() != "") {
            var value = "auth-scheme api_key=123456,order_id=56789";
            var authKeyHeader = new SwaggerClient.ApiKeyAuthorization("Authorization", value, "header");
            window.swaggerUi.api.clientAuthorizations.add("Authorization", authKeyHeader);
        }
    }

注意我将“查询”更改为“标题”。

我也取消注释了这段代码：

var apiKey = "this field represents header but can be anything as long as its not empty";
$('#input_apiKey').val(apiKey);

将在第二个文本字段中显示文本，但只要它不为空，它似乎无关紧要。

这对我有用，并允许我加载自定义index.html文件。现在我正在考虑启用Swagger UI用户来操作标头参数的值......

Answer 2

我在js文件中添加了以下代码，并将其作为嵌入式资源添加到我的web api项目中。当您构建并运行Swagger时，api_key文本框将替换为授权密钥文本框，您可以在其中粘贴AuthKey，并且每次请求时，swagger都会将其添加到Request标头。

(function () {

    $(function () {
        var basicAuthUI =
         '<div class="input"><input placeholder="Authorization Token" id="input_token" name="token" type="text"></div>';
            $(basicAuthUI).insertBefore('#api_selector div.input:last-child');
            $("#input_apiKey").hide();
            $('#input_token').change(addAuthorization);
    });

    function addAuthorization() {
        var token = $('#input_token').val();

        if (token && token.trim() !== "" ) {
            window.swaggerUi.api.clientAuthorizations.add("api_key", new window.SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + token, "header"));
            console.log("authorization added: Bearer = " + token);
        }
    }

})();

Answer 3

对于持票人令牌，我这样做了：我只使用swashbuckle生成swagger.json文件，并使用Swagger.Net显示最新的SwaggerUI版本（3.xx）并自定义它：

所以在我的项目参考中，我添加了（通过nuget）：

index.html中的

：

<input id="bearer-code-input" type="text" placeholder="Enter Bearer Token here" style="width: auto" value="yourtoken" />

然后在SwaggerUIBundle构造函数中：

const ui = SwaggerUIBundle({
...,
requestInterceptor: function (req) {
req.headers = {
'Authorization': 'Bearer ' + document.getElementById('bearer-code-
input').value
, 'Accept': 'application/json',
'Content-Type': 'application/json'
};
return req;
},
... })

结果显示：

我还定制了很多其他函数（Json模型绑定器，查询字符串解析，自定义SwaggerGenerator来覆盖ConflictingActionsResolver的默认行为，以便能够处理多个路径路径，但它不在此线程的范围内）

Answer 4

我认为通过修改index.html发送授权标头不是一个好方法。您只能添加一些设置来实现。
这是我的解决方案：
1.在 Starup.cs ConfigureServices 方法

中添加设置

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddSwaggerGen(config => {
            config.SwaggerDoc("v1", new OpenApiInfo() { Title = "WebAPI", Version = "v1" });
            config.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme
            {
                Name = "Authorization",
                In = ParameterLocation.Header,
                Type = SecuritySchemeType.ApiKey,
                Scheme = "Bearer"
            });
            config.AddSecurityRequirement(new OpenApiSecurityRequirement
            {
                {
                    new OpenApiSecurityScheme
                    {
                        Reference = new OpenApiReference
                        {
                            Type = ReferenceType.SecurityScheme,
                            Id = "Bearer"
                        }
                    },
                    Array.Empty<string>()
                }
            });
        });
    }

2。在 Startup.cs 配置方法

中添加设置

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        app.UseSwagger();
        app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "API Document"));
    }

添加设置后，然后运行该项目，您可以找到一个“授权”按钮 swagger page，您可以使用它来设置授权标头。

如何在Swagger UI中发送带有请求的Authorization标头？

4 个答案: