web-dev-qa-db-ja.com

Swashbuckleでベアラートークンを有効にする（Swaggerドキュメント）

Individual Account Securityを使用するasp.net webapiアプリケーションを作成したため、ベアラートークンはデフォルトで有効になっています。うまく機能しているので、Postmanで問題なくテストできます。

ここで、SwashbuckleによるSwagger UIを統合しようとしているときの質問があります。 Swashbuckleを次の方法でインストールしました。

インストールパッケージスワッシュバックル

次に、SwaggerConfig.csを変更します。

GlobalConfiguration.Configuration
    .EnableSwagger(c =>
    {
        c.ApiKey("Token")
            .Description("Filling bearer token here")
            .Name("Authorization")
            .In("header");
    }
    .EnableSwaggerUi(c =>
    {
        c.EnableApiKeySupport("Authorization", "header");
    };

アプリケーションを起動して、ベアラートークンを入力します。

enter image description here

しかし、承認が必要なapiリクエストを実行すると機能しません。スクリーンショットは次のとおりです。

enter image description here

ベアラートークンは、ヘッダーのAuthorizationに追加されます。しかし、まだエラー401が発生しました。トークンがエンコードされているためかどうか疑問に思っています（SPACEは％20に置き換えられます）。何か案が？ありがとう。

ところで、Swagger UIでトークンを取得できるように、Swaggerドキュメントに/ tokenを追加する方法についても疑問に思っています。

swaggerswagger-uiswashbuckle
31
Bagusflyer

更新

以下で詳述する問題は、 Swashbuckle v5.5. で解決されました。

問題

まったく同じ問題にぶつかりました。根本的な原因は Swashbuckleのソースコード のこの行だと思います：

_var key = encodeURIComponent($('#input_apiKey')[0].value);
_

これは、HTML入力フィールドの値がURLエンコードを通過し、スペースを_%20_に変換する場所です。 GitHubのスワッシュバックルリポジトリ で問題を開く予定です。

Workaround

その問題が解決されるまで、Swagger UIに挿入されたJavascriptファイルを使用して上記の行を置き換えることに基づく回避策があります。

  1. Swashbuckleをインストールしたプロジェクトで、新しいフォルダーを作成して呼び出します "Swagger"。

  2. 新しいフォルダーに "SwaggerUiCustomization.js"という新しいJavascriptファイルを作成し、このスクリプトをその中に配置します。

    _(function () {
    function addApiKeyAuthorization() {
        var key = $('#input_apiKey')[0].value;
        if (key && key.trim() != "") {
            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization(swashbuckleConfig.apiKeyName, key, swashbuckleConfig.apiKeyIn);
            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
            log("added key " + key);
        }
    }
    $('#input_apiKey').change(addApiKeyAuthorization);
})();
_

  3. ソリューションエクスプローラーでファイルを選択し、Alt + Enterを押してそのPropertiesを編集します。 Propertiesウィンドウで、ファイルのBuild Actionを埋め込みリソース。

  4. SwaggerConfig.csファイルで、EnableSwaggerUi()コードブロック内に次の行を追加します：c.InjectJavaScript(thisAssembly, "<Project_Default_Namespace>.Swagger.SwaggerUiCustomization.js");
    もちろん、_<Project_Default_Namespace>_をプロジェクトのデフォルト名前空間に置き換えてください。

  5. プロジェクトを実行し、テキストボックスに「Bearer」と入力します。コントローラーアクションを呼び出すと、サーバー側で_%20%_の代わりに空白を使用して、まったく同じ値を取得する必要があります。

18
urig

注：この例では、Json Web Tokensを使用しています。

認証文字列に「ベアラー」が必要ないようにコードを設定できます。

トークンを取得するWebApiプロジェクトのコード（以下のコードセグメントのtoken = ...を参照）：

private static bool TryRetrieveToken(HttpRequestMessage request, out string token)
    {
        token = null;
        IEnumerable<string> authzHeaders;
        if (!request.Headers.TryGetValues("Authorization", out authzHeaders) || authzHeaders.Count() > 1)
        {
            return false;
        }
        var bearerToken = authzHeaders.ElementAt(0);
        token = bearerToken.StartsWith("Bearer ") ? bearerToken.Substring(7) : bearerToken;
        return true;
    }

Swagger ApiKey：

c.ApiKey("Authorization")
                        .Description("Filling bearer token here")
                        .Name("Bearer")
                        .In("header");

Swagger有効ApiKeyサポート：

c.EnableApiKeySupport("Authorization", "header");

Swagger UIでApi_Keyフォーム要素にトークンを貼り付ける： enter image description here

Swaggerのリクエストヘッダーでの表示： enter image description here

3
Jeremy Ray Brown