ASP.NET WEB API 2 OWIN Authentication unsuported grant_Type

Question

Hi I am trying to set up OAuth bearrer token authentication in my ASP.NET Web API 2 project. I have two project one will be the WEB API Project and the other a SPA project.

Here is what I have done so far:

I have created the OWIN Startup class:

[assembly: OwinStartup(typeof(CodeArt.WebApi.App_Start.Startup))]

namespace CodeArt.WebApi.App_Start

{
    public class Startup
    {
        static Startup()
        {
            PublicClientId = "self";

        UserManagerFactory = () => new UserManager<UserModel>(new UserStore<UserModel>());

        OAuthOptions = new OAuthAuthorizationServerOptions {
            TokenEndpointPath = new PathString("/Token"),
            Provider = new OAuthAuthorizatonServer(PublicClientId, UserManagerFactory),
            AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"),
            AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
            AllowInsecureHttp = true
        };
    }

    public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }

    public static Func<UserManager<UserModel>> UserManagerFactory { get; set; }

    public static string PublicClientId { get; private set; }
    public void Configuration(IAppBuilder app)
    {
        ConfigureAuth(app);
    }

    public void ConfigureAuth(IAppBuilder app)
    {
        app.UseCookieAuthentication(new CookieAuthenticationOptions());
        app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalBearer);
        app.UseOAuthBearerTokens(OAuthOptions);
    }
}

I have configured Web API to use only bearer token authentication:

    private static void ConfigureBearerTokenAuthentication(HttpConfiguration config)
    {
        config.SuppressDefaultHostAuthentication();
        config.Filters.Add(new HostAuthenticationFilter(Startup.OAuthOptions.AuthenticationType));

    }

I have configured WEB API to support CORS:

    private static void ConfigureCrossOriginResourseSharing(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);
    }

I have created the OAuthAuthorizationServerProvider class.From this class I only managed to make my code call this method:

   public override Task ValidateClientAuthentication(OAuthValidateClientAuthenticationContext context)
    {
        if(context.ClientId == null)
        {
            context.Validated();
        }

        return Task.FromResult<object>(null);
    }

The if condition inside of it always gets executed.

On my spa project I have the following:

This is my viewModel:

 var vm = {
        grant_type: "password",
        userName: ko.observable(),
        password: ko.observable()
};

When the login button gets clicked I call this function:

     var http = {
          post:function(url, data) {
             return $.ajax({
                url: url,
                data: data,
                type: 'POST',
                contentType: 'application/json',
                dataType: 'jsonp'
            });
        }
     }

function loginClick() {
        var model = ko.mapping.toJS(vm.loginModel);
        var rez = $.param(model);

        http.post("http://localhost:3439/Token", rez)
            .done(function (data) {
                console.log(data);
            })
            .fail(function(eror, stuff, otherstuff) {
                console.log(eror);
                console.log(stuff);
                console.log(otherstuff);
            });
    }

My first attempt I have set the post calls dataType to json and I got this errors:

OPTIONS ...:3439/Token 400 (Bad Request) jquery.js:7845

OPTIONS ...:3439/Token No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...:3304' is therefore not allowed access. jquery.js:7845

XMLHttpRequest cannot load ...3439/Token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...3304' is therefore not allowed access.

The 3 dots represent http://localhost.

The second time arround I set it datatype to jsonp and I got back an error that stated unsupported "unsupported_grant_type".

Both calls make it to ValidateClientAuthentication that I mentioned above but they are both sent back as a failed request.

Now I am guessing that the problem is more related to how I am sending data instead of the grand_type because the SPA template in Visual Studion set's the grant type to grant_type: "password" like I did.

Also I have read that I have to serialize the data not send it in json in order for this to work here is the exact json serialized data that get's sent: "grant_type=password&userName=aleczandru&password=happynewYear&moduleId=models%2FappPostModels%2FloginModel"

The model id property get's set to all my object in my SPA template by Durandal Framework.

Can anyone tell me what I am doing wrong I have been trying to figure this out for the last two days?

Answer 1

Add the following line of code to GrantResourceOwnerCredentials, which will add the header to the response.

context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });

for more information refer to: web-api-2-0-cors-and-individual-account-identity