web-dev-qa-db-fra.com

Comment envoyer un en-tête d'autorisation avec une requête dans l'interface utilisateur Swagger?

J'ai une application ASP.NET Web Api 2. J'y ai ajouté Swashbuckle (Swagger for .NET). Cela ne pose pas de problème à mes ordinateurs d'extrémité, mais pour pouvoir envoyer une demande, je dois joindre un en-tête d'autorisation à cette demande. Si je comprends bien, j'ai besoin de modifier le fichier index.html ( https://github.com/swagger-api/swagger-ui#how-to-use-it ), alors je suis projet cloné Swashbuckle afin de modifier index.html et d’ajouter des en-têtes.

Est-ce la seule façon d'envoyer un en-tête d'autorisation avec la demande dans Swashbuckle?

swaggerswagger-uiswashbuckleswagger-2.0
17
Marta

Afin d'envoyer l'en-tête d'autorisation avec une requête à l'aide de l'interface utilisateur Swagger, je devais:

  1. Étant donné que le nom de mon assembly est: My.Assembly et qu'il contient un dossier: Swagger, Où j'ai placé mon index.html personnalisé, j'ai ajouté cette ligne dans SwaggerConfig.cs:

     c.CustomAsset("index", thisAssembly, "My.Assembly.Swagger.index.html");

Notez que index.html charge les fichiers javascript et css. Je devais changer tous les points en pointillés dans les chemins de fichiers pour que ces fichiers soient chargés. Je ne sais pas pourquoi cela a dû être fait, mais cela a résolu le problème du chargement du fichier ...

  1. Dans le fichier index.html, j'ai modifié le

    addApiKeyAuthorization ()

fonctionner pour ressembler à ça:

function addApiKeyAuthorization() {
        var key = encodeURIComponent($('#input_apiKey')[0].value);
        if (key && key.trim() != "") {
            var value = "auth-scheme api_key=123456,order_id=56789";
            var authKeyHeader = new SwaggerClient.ApiKeyAuthorization("Authorization", value, "header");
            window.swaggerUi.api.clientAuthorizations.add("Authorization", authKeyHeader);
        }
    }

Notez que j'ai changé "requête" en "en-tête".

  1. J'ai aussi commenté ce code:

    var apiKey = "this field represents header but can be anything as long as its not empty";
$('#input_apiKey').val(apiKey);

qui affichera du texte dans le deuxième champ de texte, mais il semble que son contenu n’a aucune importance tant qu’il n’est pas vide.

Cela a fonctionné pour moi et m'a permis de charger le fichier index.html personnalisé. Maintenant, je cherche à permettre à l'utilisateur de l'interface utilisateur Swagger de manipuler la valeur des paramètres d'en-tête ...

11
Marta

J'ai ajouté le code ci-dessous dans un fichier js et l'ajouté en tant que ressource intégrée à mon projet API Web. Lorsque vous créez et exécutez Swagger, la zone de texte api_key est remplacée par la zone de texte Clé d'autorisation, dans laquelle vous pouvez coller votre clé AuthKey. À chaque demande, swagger l'ajoute à l'en-tête de demande.

(function () {

    $(function () {
        var basicAuthUI =
         '<div class="input"><input placeholder="Authorization Token" id="input_token" name="token" type="text"></div>';
            $(basicAuthUI).insertBefore('#api_selector div.input:last-child');
            $("#input_apiKey").hide();
            $('#input_token').change(addAuthorization);
    });

    function addAuthorization() {
        var token = $('#input_token').val();

        if (token && token.trim() !== "" ) {
            window.swaggerUi.api.clientAuthorizations.add("api_key", new window.SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + token, "header"));
            console.log("authorization added: Bearer = " + token);
        }
    }

})();
4
Kumar Nitesh

pour le jeton porteur, je l’ai fait de cette façon: 

Donc, dans mes références de projet, j’ai ajouté (via nuget):

 references

 swaggerui

dans index.html:

<input id="bearer-code-input" type="text" placeholder="Enter Bearer Token here" style="width: auto" value="yourtoken" />

puis dans le constructeur SwaggerUIBundle:

const ui = SwaggerUIBundle({
...,
requestInterceptor: function (req) {
req.headers = {
'Authorization': 'Bearer ' + document.getElementById('bearer-code-
input').value
, 'Accept': 'application/json',
'Content-Type': 'application/json'
};
return req;
},
... })

résultat affiché:  result

J'ai également personnalisé de nombreuses autres fonctions (classeur de modèles Json, analyse de chaîne de requête, SwaggerGenerator personnalisé pour remplacer le comportement par défaut de ConflictingActionsResolver afin qu'il puisse gérer plusieurs chemins de routage, mais cela ne fait pas partie de ce fil).

0
Xavave