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

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

})();

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...