Jak wysłać nagłówek autoryzacji z prośbą w interfejsie użytkownika Swagger?

Question

Mam aplikację ASP.NET Web Api 2. Dodałem do niego SwashBuckle (Swagger dla .NET). Wyświetla moje punkty końcowe bez problemu, ale aby wysłać żądanie, muszę dołączyć nagłówek autoryzacji do tego żądania. Jeśli dobrze rozumiem, aby to zrobić, muszę zmodyfikować plik index.html (https://github.com/swagger-api/swagger-ui#how-to-use-it), więc git sklonowany projekt Swashbuckle w celu modyfikacji index.html i dodać kilka nagłówków.

Czy to jedyny sposób na przesłanie nagłówka autoryzacji z żądaniem w Swashbuckle?

Answer 1

W celu wysłania nagłówka Authorization z prośbą wykorzystaniem Swagger UI Musiałem:

1. Biorąc pod nazwa mojego zespołu jest: My.Assembly i zawiera folder: Swagger, gdzie umieściłem mój zwyczaj index.html i dodaje ten wiersz w SwaggerConfig.cs:

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

pamiętać, że index.html ładuje pliki JavaScript i CSS. Musiałem zmienić wszystkie kropki na przerywane w ścieżkach plików, aby te pliki wczytały się. Nie wiem, dlaczego to musiało być zrobione, ale to rozwiązać problem ładowania pliku ...

1. W pliku index.html zmodyfikowałem

   addApiKeyAuthorization()

funkcja wyglądać tak:

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

Uwaga zmieniłem "zapytanie" do "nagłówek".

3. ja też Odkomentowano ten kod:

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

który wyświetla tekst w drugim polu tekstowym, ale wydaje się, że nie ma znaczenia, co zawiera o ile nie jest pusty.

To zadziałało u mnie i umożliwiło załadowanie niestandardowego pliku index.html. Teraz szukam umożliwienia użytkownikowi Swagger UI manipulowania wartością parametrów nagłówka ...

Answer 2

Dodałem poniższy kod w pliku js i dodałem go jako zasób osadzony do mojego projektu web api. Kiedy budujesz i uruchamiasz Swagger, pole tekstowe api_key zostanie zastąpione polem klucza klucza autoryzacji, w którym możesz wkleić swój klucz AuthKey i przy każdym żądaniu, swagger doda go do nagłówka żądania.

(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

na okaziciela tokena Zrobiłem to w ten sposób: użyłem swashbuckle tylko do generowania pliku swagger.json i używane Swagger.Net wyświetlania najnowsza wersja SwaggerUI (3.xx) i dostosowywania go:

więc w moich referencji projektowych, I „V dodanej (poprzez Nuget):

w index.html:

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

, a następnie w konstruktorze SwaggerUIBundle:

Wyświetlacz

wynik:

Ja również dostosowany wiele innych funkcji (Json modelu spoiwa, string zapytanie parsowania, niestandardowego SwaggerGenerator przesłonić domyślne zachowanie dla ConflictingActionsResolver aby być w stanie obsługiwać wiele ścieżek trasy, ale nie wchodzi w zakres tego wątku)