Question

我目前部署了一个招摇项目，但我无法为其添加一些基本授权。当你点击“试试看！”时是当前的。按钮您需要登录帐户才能访问结果。我有一个帐户，我想每次有人试图访问api时自动使用。贝娄是我项目的index.html：

    <!DOCTYPE html>
<html>
<head>
  <title>Swagger UI</title>
  <link href='css/screen.css' media='screen' rel='stylesheet' type='text/css'/>
  <link href='css/screen.css' media='print' rel='stylesheet' type='text/css'/>
  <script src='lib/jquery-1.8.3.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.rc.1.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='lib/swagger-ui.js' type='text/javascript'></script>
  <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>

  <script type="text/javascript">
    $(function () {
        window.swaggerUi = new SwaggerUi({
                discoveryUrl:"https://localhost:8080/AssistAPI/api-docs.json",
                apiKey:"",
                dom_id:"swagger-ui-container",
                supportHeaderParams: true,
                supportedSubmitMethods: ['get', 'post', 'put'],
                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.authorizations.add("key", new ApiKeyAuthorization("Authorization", "XXXX"header"));
            //window.authorizations.add("key", new ApiKeyAuthorization("username", "rmanda", "header"));
            window.swaggerUi.load();
        });
  </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'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
      <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" 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>

我正在尝试确定信息应该去哪里以允许基本授权。我知道它涉及以下几行代码，但是有人可以更准确地向我解释事情的确切方向。我已经认识到GitHub上的swagger文档不是很清楚或有用

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

Answer 1

基本身份验证标头的正确设置为：

Authorization: Basic username:password

字符串用户名：密码需要使用RFC2045-MIME（Base64的变体）进行编码。在此处查看更多详细信息：https://en.wikipedia.org/wiki/Basic_access_authentication#Client_side

然后，要配置此标头，您应该：

考虑到用户名：密码的Base64编码为dXNlcm5hbWU6cGFzc3dvcmQ=

swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("Authorization", "Basic dXNlcm5hbWU6cGFzc3dvcmQ=", "header"));

在这里阅读更多相关信息： https://github.com/swagger-api/swagger-ui

Answer 2

Swagger UI 3.x

在Swagger UI 3.13.0+中，您可以使用preauthorizeBasic方法为“试用”电话预先填写基本身份验证用户名和密码。

假设您的API定义包含Basic auth的安全方案：

swagger: '2.0'
...
securityDefinitions:
  basicAuth:
    type: basic

security:
  - basicAuth: []

您可以指定Basic auth的默认用户名和密码，如下所示：

// index.html

const ui = SwaggerUIBundle({
  url: "https://my.api.com/swagger.yaml",
  ...
  onComplete: function() {
    // "basicAuth" is the key name of the security scheme in securityDefinitions
    ui.preauthorizeBasic("basicAuth", "username", "password");
  }
})

“试一试”将使用指定的用户名和密码，如果您单击Swagger UI中的“授权”按钮，您将看到UI中预先填写了用户名和屏蔽密码。

This answer还包含Swagger UI 3.1.6-3.12.1的解决方案，该解决方案没有preauthorizeBasic功能。

Answer 3

您可以在dist / index.html文件中添加/更改此功能

function addApiKeyAuthorization(){
    var key = encodeURIComponent($('#input_apiKey')[0].value);
    if(key && key.trim() != "") {
        key = 'Basic '+key;
        var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("Authorization", key, "header");
        window.swaggerUi.api.clientAuthorizations.add("Authorization", apiKeyAuth);
        log("added key " + key);
    }
  }

或者你可以继续使用Swagger 2.0的新版本，这个已知的问题已得到解决。

Answer 4

我有类似的问题，建议的答案在我的情况下是正确的我最终在index.html中添加了一些内容，如：

var myAuth = "Basic " + btoa("user:password");
window.authorizations.add("key", neSwaggerClient.ApiKeyAuthorization("Authorization", myAuth, "header"));

我在标记的方法addApiKeyAuthorization上添加了此内容，或者您可以创建另一种方法，但在window.swaggerUi.load();

之后调用它

但是，如果你有自己的摇摇晃晃的声音，那就独自行动吧＃34;您可能需要将服务配置为接受所有 OPTIONS 请求。

我有点挣扎，我希望它对某人有所帮助。

此致

Answer 5

您可以使用Spring Security并添加以下模式

<"sec:intercept-url pattern="/**"  access="hasAnyRole('ROLE_ADMIN','ROLE_USER')" /" >

它将在Swagger显示之前询问身份验证。

为Swagger-UI添加基本授权

5 个答案:

Swagger UI 3.x