3

I am facing an issue with authenticating my SPFx webpart against an Azure AD backed Web API. What I have done so far is

  • Created a ASP.NET WEB API 2 project. Added OWIN and configured CORS and OIDC in the pipeline.
  • This works perfectly well when I try to authenticate via the browser by calling the endpoint.
  • But when I try to do this via SPFx I get a CORS error that says “Origin null is not allowed”. This is same one a couple of others got here

Some Observations:

  • When I deploy my application to an Azure app service and turn on the Authentication from the app service, magically things start to work fine. I am unable to figure out what is it that I am missing in my OIDC configuration that is causing this.
  • Also, a bit of network trace showed the following
    1. Options request is sent to Web server
    2. Web server responds with 200 OK
    3. This leads to a redirect 302 to location login.microsoftonline.com with my client ID of the application and other parameters in the querystring.
    4. This redirect throws a CORS error because the Origin header is null in this case.

Below is how OWIN is setup.

Startup.cs

 public partial class Startup
 {
        public void Configuration(IAppBuilder app)
        {
            var corsPolicy = new CorsPolicy()
            {
                AllowAnyHeader = true,
                AllowAnyMethod = true,
                SupportsCredentials = true
            };
            corsPolicy.Origins.Add("https://m365x081712.sharepoint.com");

            CorsOptions corsOptions = new CorsOptions()
            {
                PolicyProvider = new CorsPolicyProvider()
                {
                    PolicyResolver = context => Task.FromResult(corsPolicy)
                }
            };
            app.UseCors(corsOptions);
            ConfigureAuth(app); //Calls within Startup.Auth.cs
            ConfigureWebApi(app);

        }
 }

Startup.Auth.cs

public partial class Startup
{
        public void ConfigureAuth(IAppBuilder app)
        {
            app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType);
            app.UseCookieAuthentication(new CookieAuthenticationOptions());
            app.UseOpenIdConnectAuthentication(
                 new OpenIdConnectAuthenticationOptions
                 {
                     ClientId = "8755bda6-a388-42fc-a8e1-8f2652603334",
                     Authority = "https://login.microsoftonline.com/m365x081712.onmicrosoft.com/",
                     Notifications = new OpenIdConnectAuthenticationNotifications()
                     {
                         RedirectToIdentityProvider = (context) =>
                         {
                             string appBaseUrl = context.Request.Scheme + "://" + context.Request.Host + context.Request.PathBase;
                             context.ProtocolMessage.RedirectUri = appBaseUrl + "/";
                             context.ProtocolMessage.PostLogoutRedirectUri = appBaseUrl;
                             return Task.FromResult(0);
                         }
                     }
                 });

        }
}

The SPFx (react) code that calls the Web API is

import { AadHttpClient, HttpClientResponse } from '@microsoft/sp-http';
// .. Omitted bunch of unneeded code.

this.context.aadHttpClientFactory
      .getClient('8755bda6-a388-42fc-a8e1-8f2652603334')
      .then((client: AadHttpClient): void => {
        client
          .get("https://localhost:44386/api/values", AadHttpClient.configurations.v1,{
            credentials:"include", //probably don't need this.
            method:"GET"
          })
          .then((response: HttpClientResponse): Promise<any[]> => {
            return response.json();
          })
          .then((data: any[]): void => {
            console.log(data);
          });
      });
  • Please use this my article – Sergei Sergeev Jan 29 at 10:09
  • @SergeiSergeev The article you shared is for core. I am currently working on ASP.NET Web API 2. – Tanmay Jan 30 at 5:16
  • The code for WEB API 2 with OWIN looks very similar, I'm pretty sure you can get the idea from the post – Sergei Sergeev Jan 30 at 5:19
  • @SergeiSergeev I haven't been able to get it to work. Curious to know if you've succeeded with it. I see a few github issues too (linked above) about people complaining the same thing as I am facing. One key difference i see is you are using JwtBearerAuth and I am using OpenIDConnect. Could that be the cause? – Tanmay Jan 30 at 5:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.