2016年1月7日 星期四

[Web API] 在 Swagger UI 送出Http Header資訊

Swagger

之前開發Web API,都是透過Chome Postman來測試API,測試無誤後,將他儲存Collections再匯出給其他同事繼續開發前端部分,但前陣子發現Swagger這個好物,可以將註解直接變成文件,且可以直接在介面發送Request,查看Response,真的省了不少時間,至於怎麼在VS安裝使用,有很多前輩都分享了:

KingKong Bruce記事 - ASP.NET WEB API 文件產生器(2) – SWAGGER

mrkt 的程式學習筆記 - ASP.NET Web API 文mrkt 的程式學習筆記件產生器 - 使用 Swagger

但在開發App通常我會在Header加入Token來驗證是否有存取API的權限,但發現Swagger無法在UI直接加入我要傳入的Header資訊。

b64347a88e264b6383b9d05e0ef9ee56

沒有這欄位,只好硬幹了,以下就依步驟紀錄一下

首先先在你的ASP.NET網站底下加入一個scripts (當然存放位置可以依你而定),在這個js上點右鍵,建置動作改成內嵌資源

45276f387cbe488aa218e0106e5d3121

接著找到App_Start\SwaggerConfig.cs底下,找到181行,取消註解 c.InjectJavaScript

將字串改為你的專案名稱及存放的Namespace

b9a21869aed84e1c97cea378f6c5ba75

Swagger預設已經掛載jQuery,所以我們在swagger-header.js寫些程式

右上角有個api_key的欄位,此欄位的用途在於調用API的時候自動幫你帶api_key這個參數

a7602f2645a340539e15aace6d6e2143

這個我們用不到,所以我們在js寫個程式把它隱藏,然後插入兩個DOM: Header Name跟Header Value的textbox

7760e2a4cd52476a984e81b27da9bce2

畫面就會變這樣:

1c341f6896804aa2bd49f17593cb3c9d

接著我們將這兩個textbox change的時候,透過Swagger的API加入Header資訊

d08e8a91839c474f87a751922409c38d

這樣再發送Request的時候就會看到Header的值:

1ec69a5aaa4c4d01aed6f33f94e5737d

可以用Chome的開發者工具至Network查看

12770befe8824361949bb9fffe381b6b

知道怎麼用jQuery去改UI,就可以依你的需求去調整硬幹了~

--

References :

http://stevemichelotti.com/customize-authentication-header-in-swaggerui-using-swashbuckle/