如何让Swagger将API密钥作为HTTP发送而不是在URL中发送

Question

我正在使用servicestack的Swagger，但我的/resources URL出现了401未授权错误，因为它需要一个API密钥。

除非我错了，根据文档，我应该在从html页面初始化Swagger时将supportHeaderParams设置为true，以及在JSON参数中设置apiKeyName和apiKey值。

然后我期望在http请求头中看到我的API密钥，但它仍然被附加到URL中而不是在头集合中。

这是在我的HTML页面中初始化Swagger的代码:

 window.swaggerUi = new SwaggerUi({
            discoveryUrl: "http://pathtomyservice.com/resources",
                headers: { "testheader" : "123" },
                apiKey: "123",
                apiKeyName: "Api-Key",
                dom_id:"swagger-ui-container",
                supportHeaderParams: true,
                supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
                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"
            });

不幸的是，我得不到任何标题，没有“Api-Key”或“testheader”。

- Rob Bird

---

我也遇到了同样的问题... - gsimoes

我猜这与swagger有关(http://goo.gl/kMHNz)，但我仍然不知道如何在servicestack中修复它。 - gsimoes

Answer 1

我认为这可能是swagger ui中的一个错误。

作为一种解决方法，在swagger index.html文件中添加了以下内容。

$(function () {
   $.ajaxSetup({
       beforeSend: function (jqXHR, settings) {
           jqXHR.setRequestHeader("YourApiKeyHeader", $("#input_apiKey").val());
       }
   });
});

希望这可以帮助到您，

- gsimoes

---

你可能想看一下新版本的swagger-ui - 1.3。supportHeaderParams 不再需要了。 - Eyal

如何为动态生成的密钥设置 #input_apiKey 值？我已经苦恼了两天，请帮帮我。我也在 S.O. 上发布了问题。https://dev59.com/elwX5IYBdhLWcg3wvRof - Java P

这会将值添加到标头，但不会从URL中删除它。我想使用输入的api_key添加自己的身份验证标头，但我不希望在get或post中发送api_key。我仍在解决此问题，但我很好奇是否有人在这里解决了这个问题。 - HarryTuttle

Answer 2

在swagger-ui 2.0或更高版本中，这很简单：

https://github.com/wordnik/swagger-ui#header-parameters

// add a new ApiKeyAuthorization when the api-key changes in the ui.
$('#input_apiKey').change(function() {
  var key = $('#input_apiKey')[0].value;
  if(key && key.trim() != "") {
    window.authorizations.add("key", new ApiKeyAuthorization("api_key", key, "header"));
  }
})

这也更具可扩展性，并支持自定义身份验证机制。

- fehguy

---

谢谢你的更新！我不知道已经发布了v2.0，我一定会去看看。 干杯 - Rob Bird

如何为动态生成的密钥设置#input_apiKey值？我已经苦恼了两天。请帮帮我。我也在S.O.上发布了问题。https://dev59.com/elwX5IYBdhLWcg3wvRof - Java P

这仍然不起作用。使用window.authorizations.add()或window.swaggerUi.api.clientAuthorizations.add()添加标题没有任何效果，授权标头也不会被添加。 - mixdev

@JavaP 一旦您获得了令牌，您可以在SwaggerUI主页上的api_key中设置它。因此，如果生成了新的令牌，则必须再次在主页上设置它。但是我可以给出一个建议，Swagger UI源代码是可用的，因此您可以根据自己的要求进行自定义。肯定可以尝试满足您的需求。 - Nasruddin

你需要在Swagger定义中声明需要进行身份验证的内容。如果是全部内容，那么顶层应该有一个“security”元素。此外，Swagger-UI最近进行了更新，可以动态显示身份验证机制。请参考http://petstore.swagger.io上的演示或从https://github.com/swagger-api/swagger-ui的主分支获取。 - fehguy

Answer 3

你可以尝试这个。

(function () {
    $(function () {
        var basicAuthUI =
                '<div class="input"><input placeholder="username" id="input_username" name="username" type="text" size="10"/></div>' +
                '<div class="input"><input placeholder="password" id="input_password" name="password" type="password" size="10"/></div>';
        $(basicAuthUI).insertBefore('#api_selector div.input:last-child');
        $("#input_apiKey").hide();

        $('#input_username').change(addAuthorization);
        $('#input_password').change(addAuthorization);
    });

    function addAuthorization() {
        SwaggerApi.supportHeaderParams = true;
        SwaggerApi.headers = {"authentication": "test"};
        var username = $('#input_username').val();
        var password = $('#input_password').val();
        if (username && username.trim() != "" && password && password.trim() != "") {
            var basicAuth = new SwaggerClient.PasswordAuthorization('basic', username, password);
            window.swaggerUi.api.clientAuthorizations.add("basicAuth", basicAuth);
            console.log("authorization added: username = " + username + ", password = " + password);
        }
    }
})();

- Tuan Minh