web-dev-qa-db-ja.com

Swagger-UIの基本認証の追加

現在swaggerプロジェクトを展開していますが、基本的な承認を追加するのに問題があります。 「Try it out！」をクリックすると現在結果にアクセスするには、アカウントにログインする必要があります。誰かがAPIにアクセスしようとするたびに自動的に使用したいアカウントがあります。 Bellowはプロジェクトの私の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"));
basic-authenticationswaggerswagger-ui
15
Zack Herbert

基本認証ヘッダーの正しい設定は次のとおりです。

Authorization: Basic username:password

文字列username：passwordは、RFC2045-MIME Base64のバリアントを使用してエンコードする必要があります。詳細はこちらをご覧ください： https://en.wikipedia.org/wiki/Basic_access_authentication#Client_side

次に、このヘッダーを構成するには、次を実行する必要があります。

username：passwordのBase64エンコーディングはdXNlcm5hbWU6cGFzc3dvcmQ=

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

詳細はこちらをご覧ください： https://github.com/swagger-api/swagger-ui

6
ipeluffo

Swagger UI 3.x

Swagger UI 3.13.0+では、preauthorizeBasicメソッドを使用して、「try it out」呼び出しの基本認証ユーザー名とパスワードを事前に入力できます。

API定義に基本認証のセキュリティスキームが含まれていると仮定します。

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

security:
  - basicAuth: []

次のように、基本認証のデフォルトのユーザー名とパスワードを指定できます。

// 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");
  }
})

「Try it out」は指定されたユーザー名とパスワードを使用します。SwaggerUIで「Authorize」ボタンをクリックすると、ユーザー名とマスクされたパスワードがUIに事前入力されていることがわかります。


この回答 には、preauthorizeBasic機能を持たないSwagger UI 3.1.6—3.12.1のソリューションも含まれています。

4
Helen

私は同様の問題を抱えていましたが、提案された答えは私の場合は正しいです、私はindex.htmlに次のようなものを追加することになります：

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

マークされたメソッドaddApiKeyAuthorizationに追加したか、別のメソッドを作成してwindow.swaggerUi.load();の後に呼び出すことができます

しかし、gulpやgruntのような「スタンドアロン」としてswagger-uiを実行している場合、すべての[〜＃〜] options [〜＃〜]リクエストを受け入れるようにサービスを構成する必要があります。

私はそれと少し苦労しています、それが誰かを助けることを願っています。

よろしく

1
cesaregb

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の新しいバージョンに移行できます。これは既知の問題が修正されました。

0
manish1706