【Swagger】客製化可以輸入Header的欄位

上一篇【Swagger】活著的API規格書 提到如何使用Swagger來產生規格與測試API，但遇到一個問題是，很多API會把驗證的Key放到Header傳遞，但Swagger產出來的頁面並沒有設定Header的地方，這時候就要來小調整一下已符合需求。

首先我們先把原本的API改成要吃Header的Key值才算驗證通過

public class TestSwaggerController : ApiController
    {
        /// <summary>
        /// 測試Swagger的API
        /// </summary>
        /// <param name="parameter">The parameter.</param>
        /// <returns></returns>
        [HttpGet]
        [Route("api/testSwagger")]
        public HttpResponseMessage Get([FromUri]testSwaggerGetParameter parameter)
        {

            //沒有帶Appkey在Header
            if (!Request.Headers.Contains("X-Key"))
            {
                return Request.CreateResponse(HttpStatusCode.NotAcceptable, "必須輸入AppKey");

            }

            var AppKey =  Request.Headers.GetValues("X-Key").FirstOrDefault();
            if (AppKey != "MyKey")
            {
                return Request.CreateResponse(HttpStatusCode.NotAcceptable, "AppKey不正確!!!");
            }

            if (parameter != null &&
                parameter.ID == "toyo" && 
                parameter.PassWord == "123456")
            {
                return Request.CreateResponse(HttpStatusCode.OK, "帳號密碼正確");
            }

            return Request.CreateResponse(HttpStatusCode.OK, "帳號密碼錯誤摟!!!!!");
        }
    }

這時候測試一下原本的API，會發現因為吃不到Header裡面的X-Key，導致輸出驗證失敗的錯誤

[](https://1.bp.blogspot.com/-hntf0ZIC-cQ/WAB1wx9JTOI/AAAAAAAAIAU/R5nql0g5UZwtIU6pdfk82zPO7EjDp4FggCLcB/s1600/1.png)

Header中也再次確認沒有帶X-key在其中

[](https://1.bp.blogspot.com/-pevW7o5r1eg/WAB2BE9-ayI/AAAAAAAAIAY/ErtqWFRqK7k0WBAKQXBZB32ghXOn3196gCLcB/s1600/1.png)

開始客製化吧

• 首先先建立一個JS檔，讓Swagger的View能引用這支JS，然後透過這支JS與Jquery去改View，我將這支JS就命名為AppKey.js

  [](https://1.bp.blogspot.com/-VdaLRHRtOlI/WAB3LAbaafI/AAAAAAAAIAc/tDB1aQ-EzzEutJ0RXZkrr4TRwvcWwFUnwCLcB/s1600/1.png)

• 接著請在這支JS檔案寫下以下JS

$(function () {
    $('#input_apiKey').hide();

    //加上Header區塊
    var HeaderBar = $('<div id="headerbar">' +
        '<h2 class="heading">Header</h2>' +
        '<table style="background-color:#E8E8D0"><thead><tr>' +
            '<th style="width: 100px; max-width: 100px" data-sw-translate="">Parameter</th>' +
            '<th style="width: 310px; max-width: 310px" data-sw-translate="">Value</th>' +
            '<th style="width: 200px; max-width: 200px" data-sw-translate="">Description</th>' +
        '</tr></thead>' +
        '<tbody class="operation-params">' +
        '<tr>' +
            '<td class="code required"><label for="custom_appkey">appkey</label></td>' +
            '<td><input class="parameter required" minlength="1" name="custom_appkey" placeholder="(required)" id="custom_appkey" type="text" value=""></td>' +
            '<td class="markdown"><p>AppKey</p></td>' +
        '</tr>' +
        '</tbody></table>' +
    '</div>');
    $('#resources_container').before(HeaderBar);

    //把值加到Header
    $('#custom_appkey').on('change', function () {
        var key = this.value;
        if (key && key.trim() !== '') {
            swaggerUi.api.clientAuthorizations.add("key", new SwaggerClient.ApiKeyAuthorization("X-Key", key, "header"));
        }
    });

});

主要內容就是抓到特定區塊，然後組Html用Jquery的方式放上去，然後透過Swagger開放的API塞到Header裡面送出

• 接著請將這支JS修改屬性 > 建置動作 > 內嵌資源

[](https://4.bp.blogspot.com/-BwLvO5AMcYw/WAB4kuDTvUI/AAAAAAAAIAg/QBIkgR01zCYDIxd2UjHmhHLanbuwCchqQCLcB/s1600/1.png)

• 打開SwaggerConfig找到188~189行的地方把註解拿掉改成如下
  [](https://2.bp.blogspot.com/-kG8umCQL1M0/WAB5FrxW2gI/AAAAAAAAIAo/RwoPyjGGq0YB1SE6f9jTvJ3h9mcveFFlQCLcB/s1600/1.png)

  c.InjectJavaScript(thisAssembly, "WebApplication1.CustomSwagger.AppKey.js");

• 接著再次執行專案

  [](https://2.bp.blogspot.com/-jAdPbsrj5yI/WAB5_JNiKdI/AAAAAAAAIAs/7DMJc1iTBl4kAm6_7yTv2f4pmNCfqFEQQCLcB/s1600/1.png)

  Header欄位出現了

  試試看欄位是否有效，因為剛剛程式是改成要帶**MyKey**，所以來測試看看

[](https://1.bp.blogspot.com/-v7nxyvIuGfs/WAB6YhN2EEI/AAAAAAAAIAw/luDPe_40Fpc-xvazlnkwp6qEPRdUbKMvgCLcB/s1600/1.png)

可以抓到X-Key了

完成!!!! 因為是透過Jquery的方式去改變欄位，所以只要透過上述的方式去載入JS，要怎麼改View應該都不是問題了，以上。

參考文章

Customize Authentication Header in SwaggerUI using Swashbuckle