2015-06-25 76 views
12

我目前已經部署了一個swagger項目,但我在添加一些基本授權時遇到問題。當你點擊「試用它」時按鈕,您需要登錄到一個帳戶才能訪問結果。我有一個帳戶,我希望每次有人試圖訪問api時都會自動使用該帳戶。貝婁是我的index.html項目:爲Swagger-UI添加基本授權

<!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上招搖的文檔不是很清楚或有幫助

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

回答

5

的基本認證頭的正確的設置是:

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

+0

請務必在符合以下條件的行後添加此行:swaggerUi.load() – Sean

0

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

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

它會在Swagger顯示前詢問身份驗證。在您的DIST

0

您可以添加/更改該功能/ 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); 
    } 
    } 

或者您也可以揚鞭2.0的新版本移動,這被稱爲問題是固定的。

0

我也有類似的問題,建議答案在我的情況我結束了在index.html的添加類似是正確的:

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

我加入這個在任標記方法addApiKeyAuthorization也可以創建另一種方法,但把它叫做window.swaggerUi.load();

後,但如果你有你的招搖的用戶界面運行的「獨立」的東西,如一飲而盡或呼嚕聲,你可能需要將服務配置爲接受所有OPTIONS請求。

我爲此付出了一點努力,我希望它能幫助別人。

Regards