如何在 swagger ui v.3.0 中使用基本身份验证答案

【问题标题】：How to use Basic auth in swagger ui v.3.0如何在 swagger ui v.3.0 中使用基本身份验证
【发布时间】：2017-08-17 03:52:17
【问题描述】：

在 swagger ui 2.0 中是代码

var basicAuth = new SwaggerClient.PasswordAuthorization("basicAuth", username, password);
window.swaggerUi.api.clientAuthorizations.add("basicAuth", basicAuth);

有人可以提供版本 swagger ui 3.0 的代码吗？

谢谢。

编辑。我正在尝试做这样的事情 - Adding Basic Authorization for Swagger-UI

我在具有基本身份验证的服务器上使用 Swagger。所以我无法初始化库。

  const ui = SwaggerUIBundle({
url: "http://petstore.swagger.io/v2/swagger.json",
dom_id: '#swagger-ui',
presets: [
  SwaggerUIBundle.presets.apis,
  // yay ES6 modules ↘
  Array.isArray(SwaggerUIStandalonePreset) ? SwaggerUIStandalonePreset : SwaggerUIStandalonePreset.default
],
plugins: [
  SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
  })

window.ui = ui

没有基本的身份验证一切正常。

已启用基本身份验证 - http://prntscr.com/enxee4

【问题讨论】：

您的意思是加载受基本身份验证保护的 Swagger 规范 (.json/.yaml)？或者您想自动将 Authorization 标头添加到所有“试用”请求中？
@Helen 先。受基本身份验证保护的 Swagger 规范 (.json/.yaml)
我认为 UI v3 目前不支持这个。您可以在GitHub repo 中打开一个问题。
问题已创建github.com/swagger-api/swagger-ui/issues/2793

标签： swagger-ui

【解决方案1】：

在 Swagger UI 3.x 中，版本支持获取受基本身份验证/API 密钥保护的规范（.yaml/.json 文件）。 3.3.2 及更高版本。在 Swagger UI 初始化代码中，定义一个 requestinterceptor 将 auth 标头附加到规范获取请求：

<!-- index.html -->

const ui = SwaggerUIBundle({
  url: "http://petstore.swagger.io/v2/swagger.json",

  requestInterceptor: (req) => {
    if (req.loadSpec) {
        // Fetch the spec using Basic auth, replace "user" and "password" with yours
        req.headers.Authorization = 'Basic ' + btoa('user:password');

        // or API key
        // req.headers.MyApiKey = 'abcde12345';

        // or bearer token
        // req.headers.Authorization = 'Bearer abcde12345';
    }
    return req;
  },
  ...
})

【讨论】：

【解决方案2】：

我用一个简单的表单构建了一个 index.html 来填写用户凭据以获取会话 ID。例如，然后重定向到 swagger.html，并进行一些更改。

window.onload 之前：

var orgFetch;

window.setExtraHeader = function(sessionId) {
    var system = window.ui.getSystem();

    if(!system) return;

    if(!orgFetch) {
        orgFetch = system.fn.fetch;
    }

    system.fn.fetch = function(obj) {
        if(!obj) return;

        if(!obj.headers) {
            obj.headers = {};
        }

        obj.headers['sessionId'] = sessionId;

        return orgFetch(obj)
            .then(function(fetchRes) {
                return fetchRes;
            });
    }

    system.specActions.download();
}

然后：

window.ui = ui;
window.setExtraHeader(localStorage.getItem("sessionId"));

来源：https://github.com/swagger-api/swagger-ui/issues/2793

希望这会有所帮助。

【讨论】：

【解决方案3】：

在 swagger-ui 3.2x 中，要根据在授权弹出窗口中输入的值手动设置授权标头以进行基本身份验证，我们可以使用以下代码。

const ui = SwaggerUIBundle({
        dom_id: '#swagger-ui',
        requestInterceptor: (req) => {
        if (!req.loadSpec) {
            var authorized = this.ui.authSelectors.authorized();
            //'Basic_Authentication' is security scheme key for basic authentication in the OpenApi file
            var basicAuth = getEntry(authorized, 'Basic_Authentication');
            if (basicAuth) {
                var basicAuthValue = getEntry(basicAuth, 'value');
                if (basicAuthValue) {
                    var username = getEntry(basicAuthValue, 'username');
                    var password = getEntry(basicAuthValue, 'password');
                    if (username && password) {
                        req.headers.Authorization = "Basic " + btoa(username + ":" + password); 
                    }
                }
            }
        }
        return req;
    }

//traverse through the object structure of swagger-ui authorized object to get value for an entryName
    function getEntry(complexObj, entryName) {
        if (complexObj && complexObj._root && complexObj._root.entries) {
            var objEntries = complexObj._root.entries;
            for (var t = 0; t < objEntries.length; t++) {
                var entryArray = objEntries[t];
                if (entryArray.length > 1) {
                    var name = entryArray[0];
                    if (name === entryName) {
                        return entryArray[1];
                    }
                }
            }
        }

        return null;
        }

【讨论】：