Swagger-ui: Add custom headers on "try it out" in Swagger v3.0

[tommyyz]

I am using Swagger UI 3.0 which comes with SwaggerUIBundle. My code is the same as example one in dist folder.

window.onload = function() {
  // Build a system
  const ui = SwaggerUIBundle({
    url: "my_spec_address",
    dom_id: '#swagger-ui',
    presets: [
      SwaggerUIBundle.presets.apis,
      SwaggerUIStandalonePreset
    ],
    plugins: [
      SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  })

  window.ui = ui
}

I searched all day to find solution to put an auth-token header when clicking try it out. But there is NONE.
There are no full documents for this project. I don't know how I can solve this problem.
Can someone help me please?

[webron]

Depending on the type of auth-token you want to add, the recommended approach would be to use the security property in your spec.

We are working on a way to customize the requests, which I hope to be released this upcoming weekend (but available in master before then).

[mccool]

I've also been searching for a way to dynamically add the header Authorization: Basic xxxxx=. I'm giving the user a dropdown of keys to use to authenticate, so it would be nice to add the header for them on change. I tried .authActions.authorizePassword({passwordType:'basic', username:'user',password:'password'}), but got an error on auth.scopes.join since scopes isn't defined.

Nothing else stuck out to me in the object returned from calling SwaggerUIBundle. @webron are you thinking this functionality will be added in 3.0.11?

[webron]

@mccool that's our goal, no guarantees ;)

[mccool]

@webron Sure, I understand. The goal is to add the header Authorization: Basic base64 string here to the request sent out using the Try it out button without using the Authorization modal and without using the default menu that opens in chrome

. I'm guessing this may already be there I just can't find it.

In v2.x I was using

api.clientAuthorizations.add('basicAuth', new SwaggerClient.ApiKeyAuthorization("Authorization", basic, "header"))

where basic was the value I used for the Authorization header. It's the usual Basic user:pass
encoded with btoa.

[webron]

I manage to typo, that's to what's(fixed now). Yes, I'm gifted. Sorry about for the confusion :)

[mccool]

I just noticed the edit! No worries!

[shockey]

Closing due to inactivity - feel free to comment if there are any further thoughts or concerns, and we'll be happy to reopen this issue.

[deepa456]

I am using Swagger UI 3.0 which comes with SwaggerUIBundle. My code is the same as example one in dist folder.

window.onload = function() {
// Build a system
const ui = SwaggerUIBundle({
url: "my_spec_address",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})

window.ui = ui
}

I want to pass some custom request headers . Tried adding an XMLHttpInterceptor Interceptor. Even that did not help. what is the easy way to pass custom headers as part of every request ?

[marcgibbons]

@shockey To tack onto this issue, I think it would be useful to expose configurable options for fetch calls for both downloading the OpenAPI spec and by the Try It / Execution package.

Use cases would be:

• Setting an HTTP header for all requests (i.e. CSRF / XSS tokens)
• Modify the credentials option (somewhat related to: https://github.com/swagger-api/swagger-ui/pull/2822)

This is a somewhat of a blocker to upgrade to v3:
https://github.com/marcgibbons/django-rest-swagger/pull/637

[shockey]

@marcgibbons, see below:

• There's a proposal for a swaggerProxy option for request interception here: https://github.com/swagger-api/swagger-ui/issues/2793#issuecomment-289688082
• We switched over to credentials: same-origin when fetching specs a little while ago: https://github.com/swagger-api/swagger-js/pull/1083

[shockey]

Locking this closed support ticket! Please direct your comments to a new support ticket, or feel free weigh in on #2793.