Swagger啓用客戶端oAuth證書

Question

我試圖設置Swagger（通過Swashbuckle）到我的webApi上。我已經知道它能夠成功顯示我的方法，並且開放的方法正常工作。

我的Api上的大多數方法都使用oAuth2進行身份驗證，使用client_credentials授予類型。我試圖設置Swagger UI，以便用戶可以將他們的憑據輸入到文本框中，並使用它。

這是我到目前爲止有：

Swashbuckle配置

public static class SwashbuckleConfig 
{ 
    public static void Configure(HttpConfiguration config) 
    { 
     config.EnableSwagger(c => 
      { 
       c.SingleApiVersion("v1", "Configuration Api Config"); 
       c.OAuth2("oauth2") 
        .Description("OAuth2") 
        .Flow("application") 
        .TokenUrl("http://localhost:55236/oauth/token") 
        .Scopes(scopes => 
        { 
         scopes.Add("write", "Write Access to protected resources"); 
        }); 

       c.OperationFilter<AssignOAuth2SecurityRequirements>(); 
      }) 
      .EnableSwaggerUi(c => 
      { 
       c.EnableOAuth2Support("Test", "21", "Test.Documentation"); 
       c.InjectJavaScript(Assembly.GetAssembly(typeof(SwashbuckleConfig)), 
          "InternalAPI.Swagger.client-credentials.js"); 

      }); 
    } 

    public class AssignOAuth2SecurityRequirements : IOperationFilter 
    { 
     public void Apply(Operation operation, SchemaRegistry schemaRegistry, 
         ApiDescription apiDescription) 
     { 
      //All methods are secured by default, 
      //unless explicitly specifying an AllowAnonymous attribute. 
      var anonymous = apiDescription.ActionDescriptor.GetCustomAttributes<AllowAnonymousAttribute>(); 
      if (anonymous.Any()) return; 

      if (operation.security == null) 
       operation.security = new List<IDictionary<string, IEnumerable<string>>>(); 

      var requirements = new Dictionary<string, IEnumerable<string>> 
      { 
       { "oauth2", Enumerable.Empty<string>() } 
      }; 

      operation.security.Add(requirements); 
     } 
    } 
} 

客戶credentials.js

(function() { 
    $(function() { 
     var basicAuthUi = 
      '<div class="input">' + 
       '<label text="Client Id" /><input placeholder="clientId" id="input_clientId" name="Client Id" type="text" size="25">' + 
       '<label text="Client Secret" /><input placeholder="secret" id="input_secret" name="Client Secret" type="password" size="25">' + 
       '</div>'; 

     $(basicAuthUi).insertBefore('div.info_title'); 
     $("#input_apiKey").hide(); 

     $('#input_clientId').change(addAuthorization); 
     $('#input_secret').change(addAuthorization); 
    }); 

    function addAuthorization() { 
     var username = $('#input_clientId').val(); 
     var password = $('#input_secret').val(); 

     if (username && username.trim() !== "" && password && password.trim() !== "") { 

      //What do I need to do here?? 
      //var basicAuth = new SwaggerClient.oauth2AUthorisation(username, password); 
      //window.swaggerUi.api.clientAuthorizations.add("oauth2", basicAuth); 

      console.log("Authorization added: ClientId = " 
       + username + ", Secret = " + password); 
     } 
    } 
})(); 

客戶端的例子，我正試圖修改是從here。顯然這是基本身份驗證，但我需要修改它以適應oAuth。

在調用Api方法之前，我需要做些什麼才能使其生成令牌？

Answer 1

首先我想說你不能使用客戶端的客戶端證書流; 但今天我還打破了這個規則：）。那麼直到用戶輸入它應該沒問題（我希望你使用TLS）。

通常你會在這裏實現隱式類型，你可以點擊這裏瞭解如何（個人而言，我還沒有嘗試過）：https://danielwertheim.se/use-identityserver-in-swaggerui-to-consume-a-secured-asp-net-webapi/

所以待辦事項，你將需要刪除此安全定義： c.OperationFilter（） ; 你可以離開休息。

，只是添加以下代碼：

function addApiKeyAuthorization() { 

      var clientId = $('#input_clientid')[0].value; 
      var clientSecret = $('#input_clientsecret')[0].value; 

      if (clientId == '' || clientSecret == "") 
       return; 

      var token = getToken(clientId, clientSecret, 'a defined scope'); 

      var authKeyHeader = new SwaggerClient.ApiKeyAuthorization("Authorization", "Bearer " + token.access_token, "header"); 
      console.log("authKeyHeader", authKeyHeader); 
      window.swaggerUi.api.clientAuthorizations.add("Authorization", authKeyHeader); 

      //handle token expiration here 
     } 

     function getToken(clientId, clientSecret, scope) { 

      var authorizationUrl = '<url to token service>/connect/token'; 
      var authorizationParams = "grant_type=client_credentials&scope=" + scope; 
      var basicAuth = window.btoa(clientId + ":" + clientSecret) 
      var token = ""; 

      $.ajax({ 
       type: 'POST', 
       url: authorizationUrl, 
       contenttype: 'x-www-form-urlencoded', 
       headers: { 
        'Authorization': 'basic ' + basicAuth 
       }, 
       data: authorizationParams, 
       success: function (data) { 
        token = data; 
       }, 
       error: function (data) { 
        // don't worry about it, swagger will respond that something went wrong :) 
       }, 
       async: false 
      }); 

      return token; 
      //example response format: {access_token: "86f2bc88dcd1e6919ef0dadbde726c52", expires_in: 3600, token_type: "Bearer"} 
     } 

     $('#explore').on('click', addApiKeyAuthorization); 

我希望這有助於。玩得開心:)