How to add basic authentication in swagger UI

19,484 views
Skip to first unread message

monirul islam

unread,
Feb 6, 2015, 1:33:38 AM2/6/15
to swagger-sw...@googlegroups.com
Hi,
I have created swagger spec using swagger spec tool. Everything is fine but when i click "Try It Out" then i get 401 (Unauthorize)  error. which is right. because i am using Basic authentication. My question is how can  i add support for basic authentication which will be active only if user click "Try it out"?

Regards,
Monirul

Ron Ratovsky

unread,
Feb 6, 2015, 4:46:25 AM2/6/15
to swagger-sw...@googlegroups.com
Information on how to add headers in general and basic authentication headers specifically can be found here - https://github.com/swagger-api/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.



--
-----------------------------------------
http://swagger.io
https://twitter.com/SwaggerApi
-----------------------------------------

monirul islam

unread,
Feb 6, 2015, 11:54:15 AM2/6/15
to swagger-sw...@googlegroups.com
Hi Ron,
Thank you. It working. But authorization header is not being sent each "Try it out" button press. What i have missed? any idea?

Ron Ratovsky

unread,
Feb 6, 2015, 11:57:20 AM2/6/15
to swagger-sw...@googlegroups.com
Are you sure you're using the latest? Try pulling now and see if you still have an issue. Remember to clear your browser's cache.

--
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.

monirul islam

unread,
Feb 7, 2015, 9:20:47 AM2/7/15
to swagger-sw...@googlegroups.com
Hi, Yes i am using lastest version. Here is my sample frontend code. Header is attaching for first time when whole document is loading. but when i click "Try it out" button then header is not being sent and i get unauthorized error. I am using token from cookie(you may see hardcoded value here). I need to pass this each time. Could you please take a look?


<script type="text/javascript">
    $
(function () {
        console
.log(getCookie("token"));
       
var url = window.location.search.match(/url=([^&]+)/);
       
if (url && url.length > 1) {
            url
= url[1];
       
} else {
            url
= scriptParams.apilink; //contains json spec url
       
}
        window
.swaggerUi = new SwaggerUi({
            url
: url,
            dom_id
: "swagger-ui-container",
            supportedSubmitMethods
: ['get', 'post', 'put', 'delete'],
            onComplete
: function(swaggerApi, swaggerUi){
                log
("Loaded SwaggerUI");
                $
('pre code').each(function(i, e) {
                    hljs
.highlightBlock(e)
               
});
           
},
            onFailure
: function(data) {
                log
("Unable to Load SwaggerUI");
           
},
            docExpansion
: "none",
            sorter
: "alpha"
       
});
        window
.authorizations.add("key", new ApiKeyAuthorization("Authorization", "Basic ZGVtbzpwd2Q=", "header"));
        window
.swaggerUi.load();
   
});
</script>


Thanks in advance.




On Friday, February 6, 2015 at 12:33:38 PM UTC+6, monirul islam wrote:

monirul islam

unread,
Feb 7, 2015, 9:22:59 AM2/7/15
to swagger-sw...@googlegroups.com
Yes. I have downloaded the latest version and cleared browser cache.


On Friday, February 6, 2015 at 10:57:20 PM UTC+6, Ron wrote:
Are you sure you're using the latest? Try pulling now and see if you still have an issue. Remember to clear your browser's cache.
On Fri, Feb 6, 2015 at 6:54 PM, monirul islam <monir...@gmail.com> wrote:
Hi Ron,
Thank you. It working. But authorization header is not being sent each "Try it out" button press. What i have missed? any idea?


On Friday, February 6, 2015 at 12:33:38 PM UTC+6, monirul islam wrote:
Hi,
I have created swagger spec using swagger spec tool. Everything is fine but when i click "Try It Out" then i get 401 (Unauthorize)  error. which is right. because i am using Basic authentication. My question is how can  i add support for basic authentication which will be active only if user click "Try it out"?

Regards,
Monirul

--
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-swaggersocket+unsub...@googlegroups.com.

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

Ron Ratovsky

unread,
Feb 7, 2015, 9:44:48 AM2/7/15
to swagger-sw...@googlegroups.com
If you look at your web console, do you see it not being sent as part of the OPTIONS call or the actual API call?

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.

Klim Shumaiev

unread,
Mar 25, 2015, 12:58:13 PM3/25/15
to swagger-sw...@googlegroups.com
Hi guys!

I basically have the same problem. 

function addApiKeyAuthorization() {
 
var username = $('#input_username')[0].value;
 
var password = $('#input_password')[0].value;
 
if(username && username.trim() != "") {
    window
.authorizations.add("entity", new PasswordAuthorization("Authorization", username, password));
 
}
}

$
('#explore').click(function() {
 addApiKeyAuthorization
();
});

window
.swaggerUi.load();


When I press "Try it out" it doesn't attach header to the request. Maybe you've already found a solution, could you share please?

Ron Ratovsky

unread,
Mar 25, 2015, 1:03:10 PM3/25/15
to swagger-sw...@googlegroups.com
Which version of swagger-ui do you use?

--
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.

Klym Shumaiev

unread,
Mar 25, 2015, 1:42:02 PM3/25/15
to swagger-sw...@googlegroups.com
I'm using - 2.1.5-M1


--
  Klym Shumaiev (MSc)
  Lehrstuhl für Informatik 19 (sebis)
  Software Engineering betrieblicher Informationssysteme
  TU München, Institut für Informatik
  Boltzmannstrasse 3, 85748 Garching bei München
  T + 49 89 289-17130
  F + 49 89 289-17136
  
klym.s...@tum.de
  
http://wwwmatthes.in.tum.de


--
You received this message because you are subscribed to a topic in the Google Groups "Swagger" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/swagger-swaggersocket/IziMnUwneKs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to swagger-swaggers...@googlegroups.com.
Message has been deleted

Ron Ratovsky

unread,
Mar 25, 2015, 1:53:24 PM3/25/15
to swagger-sw...@googlegroups.com
First make sure you use the latest version.

On Wed, Mar 25, 2015 at 7:43 PM, Klim Shumaiev <kli...@gmail.com> wrote:
2.1.5-M1
To unsubscribe from this group and stop receiving emails from it, send an email to swagger-swaggersocket+unsub...@googlegroups.com.

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



--
-----------------------------------------
http://swagger.io
https://twitter.com/SwaggerApi
-----------------------------------------

--
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.

Klim Shumaiev

unread,
Mar 25, 2015, 2:08:22 PM3/25/15
to swagger-sw...@googlegroups.com
Switched to v2.1.8-M1, but no success 
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.



--
-----------------------------------------
http://swagger.io
https://twitter.com/SwaggerApi
-----------------------------------------

--
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-swaggersocket+unsub...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Sébastien

unread,
Mar 27, 2015, 6:19:57 AM3/27/15
to swagger-sw...@googlegroups.com
Hi Klim,

the "new PasswordAuthorization()" didn't worked for me too.
Here's what I did to implement Basic Auth :

$('#input_user, #input_pass').change(function() {
   
var username = $('#input_user')[0].value;
    var password = $('#input_pass')[0].value;

    if(username && username.trim() != "" && password && password.trim() != "") {
        var auth = "Basic " + btoa($('#input_user')[0].value + ":" + $('#input_pass')[0].value);
        window
.authorizations.add("key", new ApiKeyAuthorization("Authorization", auth, "header"));
    } else {
        window
.authorizations.remove("key");
    }
});

And in the HTML

<form id='api_selector'>
   
<div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
   
<div class='input'><input placeholder="user" id="input_user" name="user" type="text" size="10"/></div>
   
<div class='input'><input placeholder="pass" id="input_pass" name="pass" type="password" size="10"/></div>
</form>

Hope this helps!

Raul Fortes

unread,
Apr 2, 2015, 5:31:47 PM4/2/15
to swagger-sw...@googlegroups.com
+1

Stav Yagev

unread,
Apr 22, 2015, 10:35:58 AM4/22/15
to swagger-sw...@googlegroups.com, o...@fringefy.com
I got to the part where it makes the OPTIONS call - but for me also, it doesn't have the authorization header.

Also - why is it making the OPTIONS call anyway?
Also - even if I modify the REST server to allow this anonymous OPTIONS call, the swagger-ui does not go on to attempt the actual documented call.

I think it would be nice to see 1 clear example of basic authentication with the swagger-ui. The only one on the net is outdated and copying the code from there generates a deprecated warning.

Thanks,
Stav

On Saturday, February 7, 2015 at 4:44:48 PM UTC+2, Ron wrote:
If you look at your web console, do you see it not being sent as part of the OPTIONS call or the actual API call?
On Sat, Feb 7, 2015 at 4:22 PM, monirul islam <monir...@gmail.com> wrote:
Yes. I have downloaded the latest version and cleared browser cache.

On Friday, February 6, 2015 at 10:57:20 PM UTC+6, Ron wrote:
Are you sure you're using the latest? Try pulling now and see if you still have an issue. Remember to clear your browser's cache.
On Fri, Feb 6, 2015 at 6:54 PM, monirul islam <monir...@gmail.com> wrote:
Hi Ron,
Thank you. It working. But authorization header is not being sent each "Try it out" button press. What i have missed? any idea?


On Friday, February 6, 2015 at 12:33:38 PM UTC+6, monirul islam wrote:
Hi,
I have created swagger spec using swagger spec tool. Everything is fine but when i click "Try It Out" then i get 401 (Unauthorize)  error. which is right. because i am using Basic authentication. My question is how can  i add support for basic authentication which will be active only if user click "Try it out"?

Regards,
Monirul

--
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-swaggersocket+unsubscri...@googlegroups.com.

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



--
-----------------------------------------
http://swagger.io
https://twitter.com/SwaggerApi
-----------------------------------------

--
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-swaggersocket+unsub...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Ron Ratovsky

unread,
Apr 22, 2015, 11:00:14 AM4/22/15
to swagger-sw...@googlegroups.com, o...@fringefy.com
It calls OPTIONS due to CORS. This is beyond our control.

As for the basic authentication, there may be an error in the README of the master branch, but that's fixed in the develop_2.0 branch.

On Wed, Apr 22, 2015 at 5:35 PM, Stav Yagev <sya...@gmail.com> wrote:
I got to the part where it makes the OPTIONS call - but for me also, it doesn't have the authorization header.

Also - why is it making the OPTIONS call anyway?
Also - even if I modify the REST server to allow this anonymous OPTIONS call, the swagger-ui does not go on to attempt the actual documented call.

I think it would be nice to see 1 clear example of basic authentication with the swagger-ui. The only one on the net is outdated and copying the code from there generates a deprecated warning.

Thanks,
Stav

On Saturday, February 7, 2015 at 4:44:48 PM UTC+2, Ron wrote:
If you look at your web console, do you see it not being sent as part of the OPTIONS call or the actual API call?
On Sat, Feb 7, 2015 at 4:22 PM, monirul islam <monir...@gmail.com> wrote:
Yes. I have downloaded the latest version and cleared browser cache.

On Friday, February 6, 2015 at 10:57:20 PM UTC+6, Ron wrote:
Are you sure you're using the latest? Try pulling now and see if you still have an issue. Remember to clear your browser's cache.
On Fri, Feb 6, 2015 at 6:54 PM, monirul islam <monir...@gmail.com> wrote:
Hi Ron,
Thank you. It working. But authorization header is not being sent each "Try it out" button press. What i have missed? any idea?


On Friday, February 6, 2015 at 12:33:38 PM UTC+6, monirul islam wrote:
Hi,
I have created swagger spec using swagger spec tool. Everything is fine but when i click "Try It Out" then i get 401 (Unauthorize)  error. which is right. because i am using Basic authentication. My question is how can  i add support for basic authentication which will be active only if user click "Try it out"?

Regards,
Monirul

--
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-swaggersocket+unsub...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
-----------------------------------------
http://swagger.io
https://twitter.com/SwaggerApi
-----------------------------------------

--
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.



--
-----------------------------------------
http://swagger.io
https://twitter.com/SwaggerApi
-----------------------------------------

--
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.

Stav Yagev

unread,
Apr 22, 2015, 11:05:48 AM4/22/15
to swagger-sw...@googlegroups.com, o...@fringefy.com

OK, thanks for the quick response!

 

Still – 4 questions:

 

1. After the OPTIONS call it should call the actual GET method I’m documenting no? Because currently it does not.

 

2. The OPTIONS call is not send with the authorization header. Why?

 

3. In the README – what *exactly* do I need to pass instead of “XXXX” in the example? How do the username and password fit in there?

 

4. Do the security definitions in the swagger spec itself matter anything?

 

Thanks,

 

S.

Stav

--
You received this message because you are subscribed to a topic in the Google Groups "Swagger" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/swagger-swaggersocket/IziMnUwneKs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to swagger-swaggers...@googlegroups.com.

Ron Ratovsky

unread,
Apr 22, 2015, 11:12:29 AM4/22/15
to swagger-sw...@googlegroups.com, o...@fringefy.com
1. If it does not, it means you haven't configured your server to support CORS properly. Please read https://github.com/swagger-api/swagger-ui#cors-support.
2. It's not supposed to, as far as I know.
3. You have to be more specific about which part of the README.
4. They do, but currently not for basic authentication. We're looking to improve the integration of it with the ui in the future.

Stav Yagev

unread,
Apr 22, 2015, 11:19:13 AM4/22/15
to swagger-sw...@googlegroups.com, o...@fringefy.com

1. I’m configured for it... here’s an excerpt from my Node.js express initialization:

 

var allowCrossDomain = function(req, res, next) {

    res.header('Allow', 'OPTIONS,GET,PUT');

    res.header('Access-Control-Allow-Origin', '*');

    res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,PUT');

    res.header('Access-Control-Allow-Headers', 'Content-Type');

    next();

};

app.use(allowCrossDomain);

 

2. If it does not include the authorization header, the server replies with 401 UNAUTHORIZED (as it should…). What am I missing?

 

3. I meant here: https://github.com/swagger-api/swagger-ui/tree/develop_2.0#custom-header-parameters---for-basic-auth-etc

 

4. Cool.

Ron Ratovsky

unread,
Apr 22, 2015, 11:27:23 AM4/22/15
to swagger-sw...@googlegroups.com, o...@fringefy.com
1. Try running 'curl -I <url of api endpoint>' and paste the results here. Something is not configured properly.

2. That sounds like a misconfiguration of your server. It should not ask for authentication for OPTIONS.

3. XXX is the value of the header.
Reply all
Reply to author
Forward
0 new messages