How to add "bearer" auth header in Swagger UI 3.0 version using javascript instead of clicking "authorize" button

user_5165469 0
Viewed 1852

I am using Swagger UI 3.0 to call the Endpoint API's listed there. And to call the api's, I have to add authentication in header. We had javascript to add the authentication to the swagger UI which adds the authentication globally to all API in the swagger UI for Swagger UI version of 2.0. So this way, I don't have to click the "authorize" button in the swagger UI to add auth token in header.

But recently we moved to new swagger version of 3.0. As a result, this javascript doesn't work anymore.

Is there any way to add header of Bearer auth using any javascript in Swagger UI 3.0 instead of clicking the "authorize" Button.

I am asking this because It is really annoying to manually add the auth everytime I open the swagger UI to call API's.

I don't want to click this below authorize button to add Auth header. Instead I want to add this using some javascirpt. enter image description here enter image description here

bearer-token swagger-3.0 swagger-ui swagger javascript
2 Answers

In Swagger 3.0.0, globalOperationParameters is deprecated.Use globalRequestParameters in place of that. Below is the snippet.

@Bean
public Docket api() {
    return new Docket(DocumentationType.SWAGGER_2)
        .apiInfo(apiInfo())
        .select()
        .apis(RequestHandlerSelectors.withClassAnnotation(Api.class))
        .paths(PathSelectors.any())
        .build()
        .globalRequestParameters(newArrayList(authorizationHeader()))
        .protocols(Sets.newHashSet("http", "https"));
}

private RequestParameter authorizationHeader() {

    return new RequestParameterBuilder()
        .name("Authorization")
        .description("Authorization header")
        .in(ParameterType.HEADER)
        .required(false)
        .build();
}
user_93687970

Pure javascript way to manipulate swaggerUI reactjs authorize form and set bearer token: (from browser console, tested in chrome)

let jwtToken = "YOUR_JWT_TOKEN"; //just token without 'Bearer ' prefix

let openAuthFormButton = document.querySelector(".auth-wrapper .authorize.unlocked");
openAuthFormButton.click();

setTimeout(function() {
    let tokenInput = document.querySelector(".auth-container input");
    let authButton = document.querySelector(".auth-btn-wrapper .modal-btn.auth");
    let closeButton = document.querySelector("button.btn-done");
    
    let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
    nativeInputValueSetter.call(tokenInput, jwtToken);
    
    let inputEvent = new Event('input', { bubbles: true});
    tokenInput.dispatchEvent(inputEvent);
    authButton.click();
    closeButton.click();
}, 500);

This clicks 'Authorize' button which opens up authorize form, some wait is added (500ms) so form has time to open up and initialize form fields. JWT token is then inserted into input field, and tricky part for me was to tell react that value was updated, for this you have to call set function directly (because react overrides it) and dispatch "input" event as described here https://stackoverflow.com/a/46012210/4695799

After that it's walk in the park to perform click on 'Authorize' button and close the form.

user_46957990
Related