如何使用 javascript 在 Swagger UI 3.0 版本中添加“承载”身份验证 header 而不是单击“授权”按钮

Question

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.

Answer 1

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

Answer 2

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.