web-dev-qa-db-ja.com

Swagger UIでリクエストとともにAuthorizationヘッダーを送信する方法は？

ASP.NET Web Api 2アプリケーションがあります。 Swashbuckleを追加しました（Swagger for .NET）。エンドポイントに問題は表示されませんが、リクエストを送信するには、そのリクエストにAuthorizationヘッダーを添付する必要があります。それを行うために正しく理解したら、index.htmlファイルを変更する必要があります（ https://github.com/swagger-api/swagger-ui#how-to-use-it ） index.htmlを変更してヘッダーを追加するために、Swashbuckleプロジェクトをgit cloneしました。

それはSwashbuckleのリクエストでAuthorizationヘッダーを送信する唯一の方法ですか？

swaggerswagger-uiswashbuckleswagger-2.0
18
Marta

Swagger UIを使用してリクエストとともにAuthorizationヘッダーを送信するには、次のことが必要です。

  1. アセンブリの名前がMy.Assemblyであり、フォルダーが含まれている場合：Swagger、カスタムindex.htmlを配置した場所に、SwaggerConfig.csに次の行を追加しました。

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

Index.htmlがjavascriptおよびcssファイルをロードすることに注意してください。これらのファイルをロードするには、ファイルパス内のすべてのドットを破線に変更する必要がありました。私はなぜそれをしなければならなかったのか分かりませんが、ファイルをロードする問題を解決しました...

  1. Index.htmlファイルで、

    addApiKeyAuthorization（）

そのように見える関数：

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

「クエリ」を「ヘッダー」に変更したことに注意してください。

  1. また、このコードのコメントを外しました。

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

2番目のテキストフィールドにテキストが表示されますが、空でない限り、何が含まれていても問題ないようです。

これでうまくいき、カスタムのindex.htmlファイルをロードできるようになりました。今、私はSwagger UIユーザーがヘッダーパラメーターの値を操作できるようにすることを検討しています...

11
Marta

以下のコードをjsファイルに追加し、それを組み込みリソースとしてWeb APIプロジェクトに追加しました。 Swaggerをビルドして実行すると、api_keyテキストボックスは認証キーテキストボックスに置き換えられ、AuthKeyを貼り付けることができ、すべてのリクエストでswaggerがリクエストヘッダーに追加します。

(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

ベアラートークンの場合はそのようにしました：swagger.jsonファイルの生成にのみswashbuckleを使用し、最新のSwaggerUIバージョン（3.xx）の表示とカスタマイズにSwagger.Netを使用しました。

だから私のプロジェクトの参照では、私は（nugetを介して）追加しました：

references

swaggerui

index.html内：

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

次に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;
},
... })

結果表示： result

また、他の多くの関数をカスタマイズしました（Jsonモデルバインダー、クエリ文字列解析、カスタムSwaggerGeneratorは、ConflictingActionsResolverのデフォルトの動作をオーバーライドして複数のルートパスを処理できるようにしますが、このスレッドのスコープ内にはありません）

0
Xavave