Adding Basic Authorization for Swagger-UI

Question

I have currently deployed a swagger project but I am having trouble adding some basic authorization to it. Currenty when you click on the \"Try it out!\" button you are requ

Answer 1

you can add/change this function in your dist/index.html file

function addApiKeyAuthorization(){
    var key = encodeURIComponent($('#input_apiKey')[0].value);
    if(key && key.trim() != "") {
        key = 'Basic '+key;
        var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", key, "header");
        window.swaggerUi.api.clientAuthorizations.add("Authorization", apiKeyAuth);
        log("added key " + key);
    }
  }

OR you can move on new version of Swagger 2.0 , this is known issue is was fixed.

Answer 2

I had a similar problem, the suggested answers are correct in my case I end up adding something in the index.html like:

var myAuth = "Basic " + btoa("user:password");
window.authorizations.add("key", neSwaggerClient.ApiKeyAuthorization("Authorization", myAuth, "header"));

I added this on either the marked method addApiKeyAuthorization or you can create another method but call it after the window.swaggerUi.load();

But if you have your swagger-ui running as "stand alone" with something like gulp or grunt you may require to configure the services to accept all OPTIONS request.

I struggle a little with that, I hope it helps someone.

Regards

Answer 3

The correct setting for Basic authentication Header is:

Authorization: Basic username:password

The String username:password needs to be encoded using RFC2045-MIME a variant of Base64. See more details here: https://en.wikipedia.org/wiki/Basic_access_authentication#Client_side

Then, to configure this header, you should do:

Considering that the Base64 encoding for username:password is dXNlcm5hbWU6cGFzc3dvcmQ=

swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "Basic dXNlcm5hbWU6cGFzc3dvcmQ=", "header"));

Read more about this here: https://github.com/swagger-api/swagger-ui

Answer 4

Swagger UI 3.x

In Swagger UI 3.13.0+, you can use the preauthorizeBasic method to pre-fill the Basic auth username and password for "try it out" calls.

Assuming your API definition includes a security scheme for Basic auth:

swagger: '2.0'
...
securityDefinitions:
  basicAuth:
    type: basic

security:
  - basicAuth: []

you can specify the default username and password for Basic auth like so:

// index.html

const ui = SwaggerUIBundle({
  url: "https://my.api.com/swagger.yaml",
  ...
  onComplete: function() {
    // "basicAuth" is the key name of the security scheme in securityDefinitions
    ui.preauthorizeBasic("basicAuth", "username", "password");
  }
})

"Try it out" will use the specified username and password, and if you click the "Authorize" button in Swagger UI, you will see that the username and masked password are pre-filled in the UI.

This answer also contains a solution for Swagger UI 3.1.6—3.12.1, which do not have the preauthorizeBasic feature.