Come inviare un'intestazione Autorizzazione con una richiesta nell'interfaccia utente di Swagger?

Question

Ho un'applicazione ASP.NET Web Api 2. Ho aggiunto Swashbuckle (Swagger per .NET). Visualizza i miei endpoint senza problemi, ma per poter inviare una richiesta è necessario allegare un'intestazione di autorizzazione a tale richiesta. Se ho capito bene per farlo ho bisogno di modificare il file index.html (https://github.com/swagger-api/swagger-ui#how-to-use-it) così ho git clonato il progetto Swashbuckle per modificare index.html e aggiungere alcune intestazioni.

È l'unico modo per inviare l'intestazione Autorizzazione con la richiesta in Swashbuckle?

Answer 1

Per poter inviare intestazione di autorizzazione con una richiesta utilizzando Swagger UI avevo bisogno di:

1. Dato il nome del mio assembly è: My.Assembly e contiene una cartella: Swagger, dove ho messo il mio index.html personalizzato, ho aggiunto questa linea in SwaggerConfig.cs:

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

Nota che i carichi index.html javascript e file CSS. Ho dovuto cambiare tutti i punti per essere tratteggiato nei percorsi dei file in modo che quei file possano essere caricati. Non so il motivo per cui doveva essere fatto, ma risolto il problema del caricamento del file ...

2. Nel file index.html ho modificato il

   addApiKeyAuthorization()

funzione per quella faccia:

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

Nota ho cambiato "query" a "header".

3. Ho anche senza commenti di questo codice:

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

che visualizzerà il testo nel secondo campo di testo, ma sembra non importa che cosa contiene finché non è vuoto.

Questo ha funzionato per me e mi ha consentito di caricare il file index.html personalizzato. Ora sto cercando di abilitare l'utente dell'interfaccia utente di Swagger per manipolare il valore dei parametri dell'intestazione ...

Answer 2

Ho aggiunto sotto il codice in un file js e l'ho aggiunto come risorsa incorporata al mio progetto web api. Quando costruisci ed esegui Swagger, la casella di testo api_key verrà sostituita con la casella di testo Chiave di autorizzazione, in cui puoi incollare il tuo AuthKey e ad ogni richiesta, lo swagger lo aggiungerà all'intestazione della richiesta.

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

})(); 

Answer 3

per portatore di token che ho fatto in questo modo: ho usato Swashbuckle solo per generare il file swagger.json e utilizzati per la visualizzazione di Swagger.Net ultima versione SwaggerUI (3.xx) e personalizzandolo:

Così nei miei riferimenti al progetto, ho aggiunto 'v (tramite NuGet):

in index.html:

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

quindi nel costruttore SwaggerUIBundle:

Display

risultato:

ho anche personalizzato un sacco di altre funzioni (JSON modello legante, string query analisi sintattica, SwaggerGenerator personalizzati per ignorare il comportamento predefinito per ConflictingActionsResolver di essere in grado di gestire più percorsi di percorso, ma non è nell'ambito di questa discussione)