Swagger UI latest version: headers not being sent

[Vinicius Carvalho]

I'm sorry to ask this again, I did google around, found a lot of questions on this topic, but nothing seems to fix my problem.

My resources requires an APIkey but instead of parsing the querystring it must be sent as a header. Problem is that I setup swagger and seems that it will always send it as a query string, regardless of what I try to do.

This is my config:

    <script type="text/javascript">

        $(function () {

            window.swaggerUi = new SwaggerUi({

                discoveryUrl:"http://localhost:8080/registration-service/api-docs.json",

                apiKey:"special-key",

                dom_id:"swagger-ui-container",

                supportHeaderParams: true,

                apiKeyName: "api",

                headers: {"api","randomkey"},

                supportedSubmitMethods: ['get', 'post', 'put', 'delete'],

                onComplete: function(swaggerApi, swaggerUi){

                if(console) {

                        console.log("Loaded SwaggerUI")

                        console.log(swaggerApi);

                        console.log(swaggerUi);

                    }

                  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});

                },

                onFailure: function(data) {

                if(console) {

                        console.log("Unable to Load SwaggerUI");

                        console.log(data);

                    }

                },

                docExpansion: "none"

            });

            window.swaggerUi.load();

        });

    </script>

But when I check chrome's dev console, there's no header named api being sent. Also, if I place anything on the apy-key text, that is sent as a query string : ?api=text

Being banging my head against the wall on this for a while now. 

Anyone have an idea?

Regards

[tony tam]

Howdy, I understand this has been the source of some confusion so I'll try to document the behavior here.

First, the UI uses jquery which *requires* for CORS support that the server respond to OPTIONS requests with the header keys that are going to be sent.  What does that mean?

1) If you're sending a header called 'api', your server needs to respond with a 2xx code when queried to see if it supports that header param.

2) If you're sending headers as params inside operations, you need to support those header names as well.

Specifically, for any request to the server, you should see something like this:

1. Access-Control-Request-Headers:
   foo, accept, magic, bar, api_key, origin, content-type

In this API, I'm passing "api_key", "foo", "bar" as header params.  Without those headers being supported by the server, the UI will *not* work.  Note that "*" as a header name doesn't seem to work currently (at least on Chrome on mac, Version 27.0.1430.0 at least)

Next, the UI has a field for an api key.  That can be named *anything you like* as long as it's configured in the UI.  For example, while the default is "api_key", say you want it to be "specialToken", and pass it as a header param, not query string.  You would need to do the following:

1) configure the key name when initializing swagger ui:

apiKey:"specialToken"

2) enable header params:

supportHeaderParams: true

3) ensure your server responds to the OPTIONS request, per above.  Now the value "specialToken" will be passed--if non blank--on every request.

Finally, you can add *any* headers to be passed by default to swagger-ui.  Those can be configured dynamically as part of an oauth dance or whatever you like--this is simply done by the following.

1) When initializing swagger-ui, set the headers like such:

headers: {"secretToken","abc123", "sessionId", "def456"}

2) ensure headers are supported

3) ensure your server responds to the "secretToken" and "sessionId" params

Hopefully this clarifies the header support, please post back if not!

Tony

[Vlad Mangeym]

With the current version of UI  (1.1.7) the behavior seems to be:

1. Change apiKey:"Test" in index.html (line 49)

2. Enable headers by supportHeaderParams: true in index.html (line 51)

3. Enter 'bla' into api-key input field at the top of the page

3. Each request now includes a new header: 

api_key:

test

Expected result was to have a new header with name test and value bla: test: bla

[tony tam]

Hi Vlad, please try setting apiKeyName: "Test" and you should see that being sent on each request.

[Vlad Mangeym]

This is better, but still wrong...

The header "Test" (apiKeyName) is getting submitted with every request now but header value is always the same "test" (apiKey) regardless of what is entered into the input field.

It appears that swagger.js only reads it once from apiKey variable and it is not getting changed...

[tony tam]

Hi Vlad, indeed, the swagger.js is reading the key *once* during load.  It doesn't grab it on each call to the API.

We could pretty easily pass a function on to swagger.js to fetch the value for the request itself.

https://github.com/wordnik/swagger-ui/issues/176

[mithun mandal]

Hi all,


Is there any way i can use PUT method or DELETE method? currently it is only using OPTIONS method for put and delete calls. do i need to edit any part of code so that PUT / DELETE call works as expected?


regards
Mithun Mandal

[Rameshbabu Pandiyarajan]

Tony,

           How you are passing the api_key, i mean from Swagger Ui.

           How to create text box in Swagger to pass the api token from UI.

[Ron]

https://github.com/wordnik/swagger-ui#header-parameters

--
You received this message because you are subscribed to the Google Groups "Swagger" group.
To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggers...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Rameshbabu Pandiyarajan]

Tony,

          Herewith attached image regarding entering the credentials from Swagger UI.

          How to implements the same in my swagger UI.

PFA

[Rameshbabu Pandiyarajan]

Ron,

          how to add this apikey like Authorization: apikey in header?

https://github.com/wordnik/swagger-ui#header-parameters

To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggersocket+unsub...@googlegroups.com.

[Ron]

That looks like basic authentication - https://github.com/wordnik/swagger-ui#custom-header-parameters---for-basic-auth-etc

To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggers...@googlegroups.com.

[Rameshbabu Pandiyarajan]

Ron,

          window.authorizations.add("key", new ApiKeyAuthorization("Authorization",key, "header"));

         Above line is not working, I'm using Spring security so my request header should be in the name  

         Authorization : "Basic "+ key          

https://github.com/wordnik/swagger-ui#header-parameters

To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggersocket+unsubscri...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Ron]

Try

          window.authorizations.add("key", new ApiKeyAuthorization("Authorization","Basic " + key, "header"));

To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggers...@googlegroups.com.

[Rameshbabu Pandiyarajan]

Ron,

           Tried, but "Basic" is not append with key and api-key text is showing, i mean apiKey:key .

           Anything I has to do for supporting headers.

[Ron]

Can you share the full javascript you have? Is it available on a public server I can access?

To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggers...@googlegroups.com.

[Rameshbabu Pandiyarajan]

<!DOCTYPE html>

<html>

<head>

  <title>TV3HUB RESTful Application Programming Interfaces</title>

  <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>

  <link href='css/reset.css' media='screen' rel='stylesheet' type='text/css'/>

  <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>

  <link href='css/reset.css' media='print' rel='stylesheet' type='text/css'/>

  <link href='css/screen.css' media='print' rel='stylesheet' type='text/css'/>

  <script type="text/javascript" src="lib/shred.bundle.js"></script>

  <script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>

  <script src='lib/jquery.slideto.min.js' type='text/javascript'></script>

  <script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>

  <script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>

  <script src='lib/handlebars-1.0.0.js' type='text/javascript'></script>

  <script src='lib/underscore-min.js' type='text/javascript'></script>

  <script src='lib/backbone-min.js' type='text/javascript'></script>

  <script src='lib/swagger.js' type='text/javascript'></script>

  <script src='swagger-ui.js' type='text/javascript'></script>

  <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>

  <!-- enabling this will enable oauth2 implicit scope support -->

  <script src='lib/swagger-oauth.js' type='text/javascript'></script>

  <script type="text/javascript">

    $(function () {

      window.swaggerUi = new SwaggerUi({

      url: "http://localhost:8080/services/api/api-docs",

      dom_id: "swagger-ui-container",

      supportedSubmitMethods: ['get', 'post', 'put', 'delete'],

      onComplete: function(swaggerApi, swaggerUi){

        log("Loaded SwaggerUI");

        if(typeof initOAuth == "function") {

          

         /*  initOAuth({

            clientId: "your-client-id",

            realm: "your-realms",

            appName: "your-app-name"

          }); */

          

        }

        $('pre code').each(function(i, e) {

          hljs.highlightBlock(e)

        });

      },

      onFailure: function(data) {

        log("Unable to Load SwaggerUI");

      },

      docExpansion: "none",

      sorter : "alpha"

    });

      $('#input_apiKey').change(function() {

          var key = "Basic "+$('#input_apiKey')[0].value;

          alert("comes"+key);

          log("key: " + key);

          if(key && key.trim() != "") {

            log("added key " + key);

            window.authorizations.add("key", new ApiKeyAuthorization("Authorization",key, "header"));

          }

        })

    window.swaggerUi.load();

  });

  </script>

</head>

<body class="swagger-section">

<div id='header'>

  <div class="swagger-ui-wrap">

<a id="logo" href="#">TV3HUB RESTful Application Programming Interfaces</a>

    <form id='api_selector'>

      

      <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="hidden"/></div>

      <div class='input'><input placeholder="api_key" id="input_apiKey" name="Authorization" type="text"/></div>

      <!-- <div class='input'><a id="explore" href="#">Explore</a></div> -->

    </form>

  </div>

</div>

<div id="message-bar" class="swagger-ui-wrap">&nbsp;</div>

<div id="swagger-ui-container" class="swagger-ui-wrap"></div>

</body>

</html>

[Rameshbabu Pandiyarajan]

Accept	application/json
Accept-Encoding	gzip, deflate
Accept-Language	en-US,en;q=0.5
Cookie	JSESSIONID=9F9D4A7FCF986203118FEFBF53724BF7; actionName=; module=; params=; radaptiveURL="http://localhost:8080"
Host	localhost:8080
Referer	http://localhost:8080/apiDocs/index.html?baseUrl=http%3A%2F%2Flocalhost%3A8080%2Fservices%2Fapi%2Fapi-docs&Authorization=c3VwZXJ1c2VyOnN1cGVydXNlcg0K
User-Agent	Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:18.0) Gecko/20100101 Firefox/18.0 Above Response is generated for that script. I needed like Authorization : Basic keystring

[Rameshbabu Pandiyarajan]

Ron,

           Sorry for raising so many Ques... kindly ignore

           If I'm accessing http://localhost:8080/apiDocs/index.html, without login my appln, it diverts to my appln page i,e. http://localhost:8080/login.jsp.

           How can I access  http://localhost:8080/apiDocs/index.html without login my appln.