Ajouter une sécurité personnalisée à Swagger

Question

Je suis nouveau à utiliser swagger comme interface utilisateur pour tester et déboguer et afficher la documentation de mes projets API Web.

Dans un projet récent (type: ASP.NET Web API), j'ai rencontré un problème, mon API n'avait aucune sorte de sécurité car son interface n'est claire pour personne. Mais j'ai besoin de sécuriser l'interface utilisateur swagger puisque tout le monde peut accéder à ma documentation complète en ajoutant simplement un "Swagger" après l'URL de l'API !!

Depuis que j'ai ajouté le swagger facilement par paquet de pépites de swashbulckle out-of-the-box, je ne sais pas comment y ajouter une quelconque sécurité. si n'importe quel corps pourrait donner une étape par étape, je l'apprécierais vraiment.

Une chose est que j'ai essayé d'ajouter à la ligne ci-dessous SwaggerConfig.cs mais il n'a pas appliqué une api-clé et je peux ouvrir fanfaronnades ui en entrant simplement someting comme http://localhost:4505/swagger dans mon navigateur spécial:

GlobalConfiguration.Configuration 
    .EnableSwagger(c => 
     { 
     c.ApiKey("key-11111-0000-1111-test") 
       .Description("API Key Authentication") 
       .Name("apiKey") 
       .In("header"); 

     c.EnableApiKeySupport("apiKey", "header"); 
     }); 

(S'il vous plaît noter que j'ai omis les configurations qui n'étaient pas pertinentes à la question du bloc de code ci-dessus)

Dois-je appliquer la sécurité de l'api-clé à api elle-même de swagger? Si oui, s'il vous plaît montrer une façon simple de faire il.

Mise à jour # 1: J'ai trouvé un hack en changeant simplement l'adresse de swagger-ui. juste ajouter cette ligne à SwaggerConfig.cs:

GlobalConfiguration.Configuration 
      .EnableSwagger(c => 
       { 
        //a long list of auto generated stuff 
        //don't touch them if you don't know how to change them 
       }) 
        //next line is what you add 
        .EnableSwaggerUi("sandbox-passphrase-000000-passphrase2/swagger/{*assetPath}"); 

Alors serait quelque chose comme ci-dessous l'accès lien vers Swagger-ui:

http://your-api.com:port/sandbox-passphrase-000000-passphrase2/swagger/index

Mais ce n'est pas ce que je veux, i besoin de quelque chose comme ajouter une boîte de texte nom d'utilisateur/mot de passe à swagger-ui pour empêcher l'accès non autorisé.

Answer 1

J'ai trouvé un autre hack!

• nous utiliserons l'API textbox clé dans fanfaronnades-ui comme une boîte de mot de passe

• nous allons cacher le conteneur principal de fanfaronnades-ui avec un simple code javascript.
• contenu du corps sont cachés jusqu'à ce que le mot de passe correct est entré dans la zone de texte

suivez les étapes ci-dessous

1. changement SwaggerConfig.cs comme ci-dessous:

public class SwaggerConfig 
    { 
     public static void Register() 
     { 
      var thisAssembly = typeof(SwaggerConfig).Assembly; 
      GlobalConfiguration.Configuration 
       .EnableSwagger(c => 
        { 
         c.SingleApiVersion("v1", "Swagger with api key test"); 
        }) 
       .EnableSwaggerUi(c => 
        { 
        c.InjectJavaScript(thisAssembly, 
        "enterYourAPIAssemblyNameHere.swagger.swagger_script.js"); 
        }); 
     } 
    } 

2 . ajouter un dossier dans le répertoire racine de votre projet et nommez-le swagger

3. ajouter un fichier javascript dans le dossier, nommez-swagger_script.js et modifier le contenu de celui-ci comme suit:

var wrapper = document.getElementById("swagger-ui-container"); 
var child = wrapper; 

var parent = wrapper.parentNode; 
wrapper.parentNode.removeChild(wrapper); 

var apikey = document.getElementById("input_apiKey"); 
apikey.setAttribute('type', 'password'); 

apikey.onchange = function() { 
    var wrapper = document.getElementById("swagger-ui-container"); 
    var key = "1234567890"; 
      var enteredkey = apikey.value; 
      if (enteredkey == key) { 
       parent.appendChild(child); 
      } else { 
       child = wrapper; 
       wrapper.parentNode.removeChild(wrapper); 
      } 
} 

Accédez aux propriétés de swagger-script.js et définissez son action de construction sur Embedded Resource

"1234567890" sera votre clé pour accéder à la fonctionnalité Swagger.

Nous devrions avoir terminé maintenant mais si vous voulez plus de sécurité, ajoutez simplement une action à api et faites-lui retourner une chaîne hachée, puis en javascript appelez cette action et comparez les mots de passe hachés. Mais comme je l'ai dit, ce n'est pas la meilleure façon de gérer cela, mais il est toujours acceptable comme un hack!

Swashbuckle Version 5.5.3