web-dev-qa-db-fra.com

Ajout d'une autorisation de base pour Swagger-UI

J'ai déjà déployé un projet fanfaron mais je ne parviens pas à lui donner une autorisation de base. Actuel lorsque vous cliquez sur le bouton "Essayez-le!" bouton, vous devez vous connecter à un compte pour accéder aux résultats. J'ai un compte que je veux utiliser automatiquement à chaque fois que quelqu'un tente d'accéder à l'API. Voici mon index.html pour le projet:

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

J'essaie de déterminer où l'information est supposée aller pour permettre une autorisation de base. Je sais que cela implique les lignes de code suivantes, mais quelqu'un peut-il m'expliquer s'il vous plaît plus en détail où vont exactement les choses. J'ai compris que la documentation de swagger sur GitHub n'est ni très claire ni utile.

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

Le paramètre correct pour l'en-tête d'authentification de base est:

Authorization: Basic username:password

La chaîne nom d'utilisateur: mot de passe doit être codée à l'aide de RFC2045-MIME, une variante de Base64 . Voir plus de détails ici: https://en.wikipedia.org/wiki/Basic_access_authentication#Client_side

Ensuite, pour configurer cet en-tête, vous devriez faire:

Considérant que le codage Base64 pour nom d'utilisateur: mot de passe est dXNlcm5hbWU6cGFzc3dvcmQ=

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

Lisez plus à ce sujet ici: https://github.com/swagger-api/swagger-ui

5
ipeluffo

Swagger UI 3.x

Dans Swagger UI 3.13.0+, vous pouvez utiliser la méthode preauthorizeBasic pour pré-renseigner le nom d'utilisateur et le mot de passe d'authentification de base pour les appels "à l'essai".

En supposant que votre définition d'API inclue un schéma de sécurité pour l'authentification de base:

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

security:
  - basicAuth: []

vous pouvez spécifier le nom d'utilisateur et le mot de passe par défaut pour l'authentification de base, comme suit:

// 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" utilisera le nom d'utilisateur et le mot de passe spécifiés. Si vous cliquez sur le bouton "Autoriser" dans l'interface utilisateur de Swagger, vous verrez que le nom d'utilisateur et le mot de passe masqué sont déjà renseignés dans l'interface utilisateur.


Cette réponse contient également une solution pour Swagger UI 3.1.6—3.12.1, qui ne possède pas la fonction preauthorizeBasic.

2
Helen

J'ai eu un problème similaire, les réponses suggérées sont correctes dans mon cas, je finis par ajouter quelque chose dans le fichier index.html comme: 

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

J'ai ajouté ceci sur la méthode marquée addApiKeyAuthorization ou vous pouvez créer une autre méthode mais l'appelez après la window.swaggerUi.load(); 

Mais si vous utilisez votre swagger-ui comme "autonome" avec quelque chose comme gulp ou grunt, vous devrez peut-être configurer les services pour accepter toutes les requêtes OPTIONS.

Je me bats un peu avec ça, j'espère que ça aidera quelqu'un. 

Cordialement

0
cesaregb

vous pouvez ajouter/changer cette fonction dans votre fichier 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);
    }
  }

OU vous pouvez passer à la nouvelle version de Swagger 2.0, ce problème connu a été corrigé.

0
manish1706