swagger-ui : Add authorization header don't work

Question

I want to add basic authorization in swagger-ui, to test my WS with "Try it out" button. I tried from swagger documentation, and this topic Adding Basic Authorization for Swagger-UI, but no one work. No header is added in request, but in curl command, the basic authorization header is present. If I copy paste this curl command, all is ok.

My swagger-ui version is 2.1.2. I downloaded from github, ant put directly dist folder in static folder of my server.

Here my index.html :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sensor API documentation</title>
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href='css/typography.css' media='screen' 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/print.css' media='print' rel='stylesheet' type='text/css' />
<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-2.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='swagger-ui.js' type='text/javascript'></script>
<script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
<script src='lib/marked.js' type='text/javascript'></script>
<script src='lib/swagger-oauth.js' type='text/javascript'></script>

<!-- Some basic translations -->
<!-- <script src='lang/translator.js' type='text/javascript'></script> -->
<!-- <script src='lang/ru.js' type='text/javascript'></script> -->
<!-- <script src='lang/en.js' type='text/javascript'></script> -->

<script type="text/javascript">
    $(function() {

        // Pre load translate...
        if (window.SwaggerTranslator) {
            window.SwaggerTranslator.translate();
        }
        window.swaggerUi = new SwaggerUi({
            url : "/swagger/json/SensorAPI.json",
            validatorUrl : "",
            dom_id : "swagger-ui-container",
            supportedSubmitMethods : [ 'get', 'post', 'put', 'delete', 'patch' ],
            onComplete : function(swaggerApi, swaggerUi) {

                if (window.SwaggerTranslator) {
                    window.SwaggerTranslator.translate();
                }

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

            },
            onFailure : function(data) {
                log("Unable to Load SwaggerUI");
            },
            docExpansion : "none",
            apisSorter : "alpha",
            showRequestHeaders : false
        });

        function addAuthorization() {
            var username = $('#input_username').val();
            var password = $('#input_password').val();
            if (username && username.trim() != "" && password && password.trim() != "") {
                var basicAuth = new SwaggerClient.PasswordAuthorization(username, password);
                window.swaggerUi.api.clientAuthorizations.add('Basic', basicAuth);
                log("authorization added: username = " + username + ", password = " + password);
            } else {
                window.authorizations.remove();
            }
        }
        $('#input_username').change(addAuthorization);
        $('#input_password').change(addAuthorization);
        // pre-populate on the page using demo account
        $('#input_username').val("demo");
        $('#input_password').val("demo");

        window.swaggerUi.load();

        function log() {
            if ('console' in window) {
                console.log.apply(console, arguments);
            }
        }
    });
</script>
</head>

<body class="swagger-section">
    <div id='header'>
        <div class="swagger-ui-wrap">
            <a id="logo" href="http://swagger.io">swagger</a>
            <form id='api_selector'>
                <div class='input'>
                    Username: <input placeholder="username" id="input_username" name="username" type="text" size="10" />
                </div>
                <div class='input'>
                    Password: <input placeholder="password" id="input_password" name="password" type="password" size="10" />
                </div>
            </form>
        </div>
    </div>

    <div id="message-bar" class="swagger-ui-wrap" data-sw-translate>&nbsp;</div>
    <div id="swagger-ui-container" class="swagger-ui-wrap"></div>
</body>
</html>

Please tell me what is wrong. Thanks

score 3 · Answer 1 · answered Sep 22 '15 at 13:21

I found : the issue came from my json files. I defined many "securityDefinitions", one per user role

...,
"securityDefinitions":{
    "administrator":{
        "type":"basic",
        "description":"The administrator."
    },
    "supervisor":{
        "type":"basic",
        "description":"A supervisor."
    },
    "customer":{
        "type":"basic",
        "description":"A customer."
    }
},
...

and for each WS, I indicate which roles are authorized. By example :

...,
"get":{
    "security":[
        {
            "administrator":[

            ]
        },
        {
            "supervisor":[

            ]
        }
    ],
    ...
},
...

By removing security section in WS, all is working.

In swagger editor, we need security section to test WS, but in swagger ui, this section produce an error :-(

Same problem as you. I have reported the issue here: https://github.com/swagger-api/swagger-ui/issues/1835 — hiveship, Dec 24 '15 at 16:10

swagger-ui : Add authorization header don't work

1 Answers1