Cors Problem w/ Widget

Questions
1

I’m having an issue using the Okta Sign-in widget. I have a proof of concept where I am getting an browser error that says:

Failed to load https://dev-586182.oktapreview.com/oauth2/v1/authorize?client_id=0...client-SKU=ID_NET451&x-client-ver=5.2.0.0: 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:62114’ is therefore not allowed access.

I have configured http://localhost:62114 and http://localhost:62114/ as trusted origins for the API. The odd thing to me is that if I use the redirect flow (as opposed to the widget), it works fine.

I have also tested with the okta-aspnetcode-mvc-example code and that seems to work fine.

Any thoughts would be appreciated. This is my configuration for the widget:

   <script type="text/javascript">
        const signIn = new OktaSignIn({
            /**/
            baseUrl: 'https://dev-586182.oktapreview.com/'
            /**/
        });

        signIn.renderEl({ el: '#widget' }, (res) => {
            var sessionTokenField = $("#hiddenSessionTokenField");
            sessionTokenField.val(res.session.token);
            var form = sessionTokenField.parent();
            form.submit();
        }, (err) => {
            console.error(err);
        });
    </script>
2

Hi @cmthomps,

Have you followed all the steps recommended by our quickstarts?

Do you have in your widget configuration the following params:

 var oktaSignIn = new OktaSignIn({
    baseUrl: "https://dotnet.oktapreview.com",
    clientId: "{clientId}",
    authParams: {
      issuer: "https://dotnet.oktapreview.com/oauth2/default",
      responseType: ['token', 'id_token'],
      display: 'page'
    }
  });
3

I am basing my proof of concept on this example: https://github.com/oktadeveloper/okta-aspnetcore-mvc-example

When I run that example, it works fine. When I run my proof of concept, I get the cors error.

4

Hey @cmthomps,

Unfortunately, that example is outdated.
Please, take a look at our new examples repo for ASP.NET:

https://github.com/okta/samples-aspnetcore
https://github.com/okta/samples-aspnet

Let me know how it goes after trying with these.

5

I don’t think those examples use the sign on widget.

6

If you go to the resource-server example, there is a list of our front-end sample applications (Vue, React, and Angular) to demonstrate the interaction with the resource server.

For example, if you go to the React repo, you will see a custom-login example which uses the widget.

If you want to use the plain js widget, then try with the next configuration:

        var oktaSignIn = new OktaSignIn({
            baseUrl: "https://dev-586182.oktapreview.com/",
            clientId: "{clientId}",
            authParams: {
                issuer: "https://dev-586182.oktapreview.com/oauth2/default",
                responseType: ['token', 'id_token'],
                display: 'page'
            }
        });

You can see the full configuration/example in the https://developer.okta.com/quickstart/#/widget/dotnet/aspnetcore.

Also, in the widget repo you can find a lot of examples.

If you have set the right URL as your trusted origin, it should work. Double check that you have the right one.

image
image.png887×595 27.4 KB

I am curious about how is your project structure? ASP.NET Core web API + front-end?

7

Thanks, I’m working on a ASP.NET MVC project (not a Single Page App (SPA)). The examples all seem to be more geared to a Angular type of implementation. The example I had posted in my original message is closest to what I’m trying to do.

8

OK, so what you want to do is using a custom login page (using the widget) instead of the okta-hosted login page in your asp.net mvc project?

if that is the case, then you want to see this example: https://github.com/okta/samples-aspnetcore/tree/master/self-hosted-login