0

I have an Angular (2.x) Spa application that utilizes webapi calls from the backend. The assets for the Spa are hosted via Owin static file middleware not an MVC controller returning a view. I am trying to integrate with Okta for SSO utilizing OpenID Connect oauth2 code flow. Thus I would have expected a simple example like the following to work:

https://github.com/oktadeveloper/okta-oidc-spa-osw-aspne

However, the example uses a controller action to host the view. Bottom line I have an Authorize attribute on my webapi endpoint that returns 302 requests to the okta /oauth2/v1/authorize endpoint which ultimately is giving me an error like the following:

XMLHttpRequest cannot load https://xxxxx.okta.com/oauth2/v1/authorize?client_id=xxxxx&re…xxxxx. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:54544' is therefore not allowed access.

I enabled CORS on my webapi config that did not result in any change as well.

Configuration is as follows:

app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType);
            app.UseCookieAuthentication(new CookieAuthenticationOptions { });
            app.UseOpenIdConnectAuthentication(new OpenIdConnectAuthenticationOptions
            {
                ClientId = "xxxxxx",
                Authority = "https://xxxxx.okta.com",
                ClientSecret = "xxxxxxx"
            });

So a couple questions result, should I even be using the OpenIdConnectAuthentication middleware, how do I get the re-directs to work on a static asset that I have no controller action to tag an authorize attribute to. Etc. Another thing that the example project has looks like a pop-up widget for okta sign on which seems like it is un-necessary if you just re-direct to them when an unauthorized user is detected.

Shawn
  • 869
  • 1
  • 9
  • 27

1 Answers1

2

OpenID Connect does work for a SPA, although it may make more sense in your scenario to use the implicit flow instead of the code flow. See this general answer: Authentication for SPA

Choosing implicit vs. code depends on what you ultimately want your SPA to have access to. Do you want the SPA to directly hold onto an access token (implicit), or do you want that to stay on the server (code)? There isn't a simple answer because it depends a lot on how your app is built and what you need it to do.

Another, possibly simpler option is to use the Okta Sign-in Widget in your SPA, which can handle a lot of this for you. There's a tutorial on setting this up in an Angular app.

Full disclosure: I work at Okta.

Nate Barbettini
  • 51,256
  • 26
  • 134
  • 147
  • The only concern I have with implicit is that it's considered inherently less secure than code, also without refresh tokens aren't you continuously going to have to redirect to okta to keep the token alive (non-expired)? I have been looking at the Okta blog post on angular (2+) with Okta to see how things are handled and I have the sample working with our subscription. – Shawn May 20 '17 at 02:41
  • However the well known config url to get the json is complaining about cors issues (and it is my understanding that's under API mgmt which we are currently not subscribed to...something which is not mentioned in the blog). I got around it by hardcoding these values in the npm package to prove that was the problem. – Shawn May 20 '17 at 02:42
  • 1
    For what it is worth this blog post really helped me out http://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc – Shawn May 24 '17 at 00:53