webentwicklung-frage-antwort-db.com.de

Hinzufügen einer Basisberechtigung für die Swagger-UI

Ich habe zurzeit ein Swagger-Projekt implementiert, aber ich habe Probleme, ihm einige grundlegende Berechtigungen hinzuzufügen. Aktuell wenn Sie auf "Try it out!" Klicken Sie müssen sich bei einem Konto anmelden, um auf die Ergebnisse zuzugreifen. Ich habe ein Konto, das ich automatisch verwenden möchte, wenn jemand versucht, auf die API zuzugreifen. Bellow ist meine index.html für das Projekt:

    <!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>

Ich versuche zu ermitteln, wohin die Informationen gehen sollen, um die Basisberechtigung zuzulassen. Ich weiß, dass es die folgenden Codezeilen betraf, aber kann mir jemand bitte etwas genauer erklären, wo die Dinge genau laufen. Ich bin zu der Erkenntnis gekommen, dass die Dokumentation für swagger auf GitHub nicht sehr klar oder hilfreich ist

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

Die korrekte Einstellung für den Header der Standardauthentifizierung lautet:

Authorization: Basic username:password

Der String Benutzername: Kennwort muss mit RFC2045-MIME einer Variante von Base64 ..__ codiert werden. Weitere Informationen finden Sie hier: https://en.wikipedia.org/wiki/Basic_access_authentication#Client_side

Um diesen Header zu konfigurieren, sollten Sie Folgendes tun:

Die Base64-Kodierung für Benutzername: Kennwort ist dXNlcm5hbWU6cGFzc3dvcmQ=.

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

Lesen Sie mehr darüber hier: https://github.com/swagger-api/swagger-ui

5
ipeluffo

Swagger-Benutzeroberfläche 3.x

In Swagger UI 3.13.0+ können Sie die preauthorizeBasic-Methode verwenden, um den Benutzernamen und das Kennwort der Basisauthentifizierung für "try it out" -Aufrufe vorab auszufüllen.

Angenommen, Ihre API-Definition enthält ein Sicherheitsschema für Basic auth:

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

security:
  - basicAuth: []

sie können den Standardbenutzernamen und das Standardkennwort wie folgt angeben:

// 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" verwendet den angegebenen Benutzernamen und das angegebene Kennwort. Wenn Sie in der Swagger-Benutzeroberfläche auf die Schaltfläche "Authorize" klicken, werden der Benutzername und das maskierte Kennwort in der Benutzeroberfläche vorbelegt.


Diese Antwort enthält auch eine Lösung für die Swagger-Benutzeroberfläche 3.1.6—3.12.1, die nicht über die preauthorizeBasic-Funktion verfügt.

2
Helen

Ich hatte ein ähnliches Problem. Die vorgeschlagenen Antworten stimmen in meinem Fall. Ich füge etwas in der index.html hinzu: 

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

Ich habe dies entweder für die markierte Methode addApiKeyAuthorization hinzugefügt, oder Sie können eine andere Methode erstellen, sie aber nach der window.swaggerUi.load(); aufrufen. 

Wenn Sie jedoch Ihre Swagger-Ui als "Stand-alone" mit etwas wie Schluck oder Grunzen ausführen, müssen Sie die Dienste möglicherweise so konfigurieren, dass sie alleOPTIONSrequest akzeptieren.

Ich habe ein bisschen damit zu kämpfen, ich hoffe es hilft jemandem. 

Grüße

0
cesaregb

sie können diese Funktion in Ihrer dist/index.html-Datei hinzufügen/ändern 

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

ODER Sie können mit der neuen Version von Swagger 2.0 fortfahren, dies ist ein bekanntes Problem, das behoben wurde.

0
manish1706