401 Unauthorized errors when accessing WebApI from AngularJS/ADAL.js client

Question

I've got a self-hosted web api application with an angular front end, and I need to now start authenticating users via Azure Active Directory.

I've downloaded the SinglePageApp example and I've set this up and have it running successfully. https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi

When applying the necessary changes to my own app, I can successfully redirect the user to the Azure login screen and get back the userProfile using adal.js/adal_angular.js. I'm getting 401 unauthorized errors whenever I call my API, however using Fiddler, I can see that the bearer token is added to the HTTP header in each call.

Here is my AdalAngular setup:

.config(["$httpProvider", "adalAuthenticationServiceProvider", ($httpProvider, adalProvider) => {
            adalProvider.init(
            {
                instance: "https://login.microsoftonline.com/",
                tenant: "<snip>.onmicrosoft.com",
                clientId: "<snip>",
                extraQueryParameter: "nux=1",
                cacheLocation: "localStorage" // enable this for IE, as sessionStorage does not work for localhost.
            },
            $httpProvider);

Here is my startup.cs code:

public void Configuration(IAppBuilder appBuilder)
    {

        ConfigureWebApi(appBuilder);
        ConfigureAuth(appBuilder);
        ConfigureFileSystem(appBuilder);
        appBuilder.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    }

private void ConfigureWebApi(IAppBuilder appBuilder)
    {
        // Configure Web API for self-host. 
        HttpConfiguration config = new HttpConfiguration();
        config.MapHttpAttributeRoutes();
        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        appBuilder.UseWebApi(config);
    }

    private void ConfigureAuth(IAppBuilder app)
    {
        app.UseWindowsAzureActiveDirectoryBearerAuthentication(
            new WindowsAzureActiveDirectoryBearerAuthenticationOptions
            {
                Tenant = ConfigurationManager.AppSettings["ActiveDirectoryTenant"],
                Audience = ConfigurationManager.AppSettings["ActiveDirectoryApplicationId"]
            });
    }

    private void ConfigureFileSystem(IAppBuilder appBuilder)
    {

        //Set the Welcome page to test if Owin is hosted properly
        appBuilder.UseWelcomePage("/welcome.html");
        appBuilder.UseErrorPage(new Microsoft.Owin.Diagnostics.ErrorPageOptions() { ShowExceptionDetails = true });
        var physicalFileSystem = new PhysicalFileSystem(@".\wwwroot");
        if (ConfigurationManager.AppSettings.AllKeys.Contains("ContentPath"))
        {
            var path = ConfigurationManager.AppSettings["ContentPath"];
            physicalFileSystem = new PhysicalFileSystem(path);
        }
        FileServerOptions fileOptions = new FileServerOptions();

        fileOptions.EnableDefaultFiles = true;
        fileOptions.RequestPath = PathString.Empty;
        fileOptions.FileSystem = physicalFileSystem;
        fileOptions.DefaultFilesOptions.DefaultFileNames = new[] { "index.html" };
        fileOptions.StaticFileOptions.FileSystem = fileOptions.FileSystem = physicalFileSystem;
        fileOptions.StaticFileOptions.ServeUnknownFileTypes = true;
        appBuilder.UseFileServer(fileOptions);
    }

Where ActiveDirectoryTenant and ActiveDirectoryApplicationId are in my app.config and match what is configured in my angular adalProvider.init code exactly.

Finally, my ApiController looks like this:

 [Authorize]
[RoutePrefix("api/connection")]
public class ServerConnectionController : ApiController
{
    [Route("all")]
    [HttpGet]
    public HttpResponseMessage GetAllConnections()
    {
        HttpResponseMessage response;
        try
        {
            string owner = ClaimsPrincipal.Current.FindFirst(ClaimTypes.NameIdentifier).Value;
            var connections = _iDataAccess.GetAllConnections().ToList();
            response = Request.CreateResponse(HttpStatusCode.OK, connections);
        }
        catch (Exception ex)
        {
            response = GetExceptionResponseMessage(ex);
        }

        return response;
    }
}

As mentioned the HTTP request header captured by Fiddler looks ok, and the aud property on my ADAL.js userInfo.profile is the correct appid.

Any suggestions on what might be missing? Note that this is not a native web based app, it's self-hosted, which means the web service is running on localhost as a windows service, and not in IIS.

I have configured the site to use HTTPS, but I get the same problem regardless of HTTP or HTTPS traffic.

Thanks for listening!

The only difference between my own implementation of this and yours is that I declare the ConfigureAuth(appBuilder); as the first line in the Startup.cs Configuration method — Marcus Höglund
This appears to have been the problem, thanks so much for the suggestion! — gooram
Ok, great! Should I add this as an answer so this question get's closed? — Marcus Höglund
Yes please. And if you can explain why the order is important here, that would be even better. — gooram

Marcus Höglund Marcus Höglund · Accepted Answer · 2017-03-14T16:01:47

You need to declare the ConfigureAuth(appBuilder); as the first line in the Startup.cs Configuration method. You can find a good explanation here on why it need to be declared as the first.

401 Unauthorized errors when accessing WebApI from AngularJS/ADAL.js client

1 Answers