swagger-ui：添加授权标头不起作用答案

【问题标题】：swagger-ui : Add authorization header don't workswagger-ui：添加授权标头不起作用
【发布时间】：2015-12-19 04:33:57
【问题描述】：

我想在 swagger-ui 中添加基本授权，以使用“试用”按钮测试我的 WS。我从swagger documentation 和这个主题Adding Basic Authorization for Swagger-UI 尝试过，但没有一个工作。请求中没有添加标头，但在 curl 命令中，存在基本授权标头。如果我复制粘贴此 curl 命令，一切正常。

我的 swagger-ui 版本是 2.1.2。我是从github下载的，ant直接把dist文件夹放到我服务器的static文件夹中。

这里是我的 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>

请告诉我有什么问题。谢谢

【问题讨论】：

标签： swagger-ui

【解决方案1】：

我发现：问题来自我的 json 文件。我定义了许多“securityDefinitions”，每个用户角色一个

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

对于每个 WS，我指出哪些角色被授权。举例：

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

            ]
        },
        {
            "supervisor":[

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

通过删除 WS 中的安全部分，一切正常。

在 swagger 编辑器中，我们需要 security 部分来测试 WS，但是在 swagger ui 中，这部分会产生错误:-(

【讨论】：

和你一样的问题。我在这里报告了这个问题：github.com/swagger-api/swagger-ui/issues/1835