How to send Authorization header with a request in Swagger UI?

问题

I have a ASP.NET Web Api 2 application. I added Swashbuckle to it (Swagger for .NET). It displays my endpoints no problem, but in order to send a request I need to attach an Authorization header to that request. If I understand correctly in order to do that I need to modify the index.html file (https://github.com/swagger-api/swagger-ui#how-to-use-it) so I git cloned Swashbuckle project in order to modify index.html and add some headers.

Is that the only way to send Authorization header with the request in Swashbuckle?

回答1:

In order to send Authorization header with a request using Swagger UI I needed to:

1. Given the name of my assembly is: My.Assembly and it contains a folder: Swagger, where I placed my custom index.html, I added this line in SwaggerConfig.cs:

    c.CustomAsset("index", thisAssembly, "My.Assembly.Swagger.index.html");
   

Note that index.html loads javascript and css files. I had to change all dots to dashed in the file paths in order for those files to load. I don't know why it had to be done, but it solved the problem of loading the file...

2. In the index.html file I modified the

   addApiKeyAuthorization()

function to look like that:

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);
        }
    }

Note I changed "query" to "header".

3. I also uncommented this code:

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

which will display text in the second textfield, but it seems it doesn't matter what it contains as long as it is not empty.

That worked for me and enabled me to load custom index.html file. Now I am looking at enabling Swagger UI user to manipulate the value of header parameters...

回答2:

I added below code in a js file and added it as a embedded resource to my web api project. When you build and run Swagger, api_key textbox will get replaced with Authorization Key Text Box, where you can paste your AuthKey and with every request, swagger will add it to Request header.

(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);
        }
    }

})();

回答3:

for bearer token I've done it that way: I used swashbuckle only for generating the swagger.json file and used Swagger.Net for displaying latest SwaggerUI version (3.xx) and customizing it :

So in my project references, I 'v added (via nuget) :

in index.html:

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

then in SwaggerUIBundle constructor:

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;
},
... })

result display:

I've also customized a lot of other functions (Json model binder, query string parsing, custom SwaggerGenerator to override the default behavior for ConflictingActionsResolver to be able to handle multiple route paths, but it's not in the scope of this thread)

来源：https://stackoverflow.com/questions/30350680/how-to-send-authorization-header-with-a-request-in-swagger-ui