クライアントサイドのoAuth資格情報を有効にするスワッガー

Question

スワッガーを私のwebApiに（Swashbuckle経由で）設定しようとしています。私はそれが私のメソッドを正常に表示し、開いているメソッドがうまく動作するという点まであります。

私のApiのメソッドのほとんどは、client_credentialsグラントタイプを使用して、認証にoAuth2を使用します。私はユーザーがテキストボックスに資格情報を入力し、それを使用できるようにスワッガー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です。明らかにこれはBasic認証用ですが、oAuthに合わせて変更する必要があります。

Apiメソッドを呼び出す前にトークンを生成するには、どうすればよいですか？

Answer 1

まず、クライアント側からクライアントの資格情報フローを使用してはいけません。 しかし、私は今日もそのルールを破っています：）。それがユーザーによって入力されるまで、それはうまくいくはずです（私はあなたがTLSを使用していることを願っています）。

通常、あなたが（個人的に私はそれを試していない）する方法についてここで確認することができ、ここで暗黙的な型を実装します：https://danielwertheim.se/use-identityserver-in-swaggerui-to-consume-a-secured-asp-net-webapi/

このセキュリティ定義を削除する必要がありますので、TODO： 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); 

私はこのことができます願っています。お楽しみください：）