I am developing a SPA (Single Page Application). I am trying to make some Axios calls for acquiring some properties(such as “lastLogin”, “FirstName”, “LastName”, etc) of the user that has logged in into my app. I did the following steps:
Although, if I make the call through my Browser or Postman works fine. It returns a JSON object. But not within my apply. According to the Okta’s documentation it is CORS enabled.
Hopefully you can help me with that.
I actually sent an email a couple days ago. I am still waiting for a response. I just thought maybe it was a good idea also to post my issue here on the forum, so that way other developers could help, or be aware of this issue.
If you are still stuck then try removing the ‘/’ from the end when you add it to trusted sites. Okta checks if the slash is included or not and can reject the site is the slash is not included.
this.signIn = new OktaSignIn({
/**
* Note: when using the Sign-In Widget for an ODIC flow, it still
* needs to be configured with the base URL for your Okta Org. Here
* we derive it from the given issuer for convenience.
*/
baseUrl:https://xxxx,okta.com
clientId: xxxxx,
redirectUri:https://xxxx,okta.com/implicit/callback,
// logo: '/assets/angular.svg',
i18n: {
en: {
'primaryauth.title': 'Sign in to Synchub',
},
},
authParams: {
responseType: ['id_token', 'token'],
issuer: this.oktaBaseUrl,//sampleConfig.oidc.issuer,
display: 'page',
scopes: sampleConfig.oidc.scope.split(' '),
},
});
No and client will not allow this. Can you please help me how to use web sso for angularjs i found one solution but getting 404 error after authentication
In order to have successful authentication inside the Angular application, you must enable CORS as the Angular SDK uses front-end channel (browser) requests in order to communicate with Okta and retrieve the user’s details.
Alternatively, you can create an API gateway which will forward all /userinfo endpoint through a back-end channel (server), removing the necessity for CORS enablement. This will also require a custom getUser() method.
Thank you for your reply. I have implemented back end and and also cors still getting same error
Suppose my angular js url is localhost:4200 and api url is localhost:8080/api.
Can you please open a support case with us through an email to developers@okta.com, mentioning the Okta tenant, application ID and an uncensored screenshot from the browser’s JavaScript console? One of our Developer Support Engineers will take over the ticket and further assist you.
I know this is an old thread but I got here from a Google search. I was having the same issue when trying to exchange my session token for an OpenID Connect ID_Token. I had already setup my CORS settings properly but was still getting a CORS error. I was able to figure out why the CORS settings were not applying to that particular endpoint and figured I should post it here for anyone like me having the same issue.
When you are exchanging a session token for an OpenID Connect ID_Token Okta requires you to redirect your browser instead of simply hitting the endpoint (à là Fetch api, etc). This is to allow Okta to verify your redirect_url paired with your client_id. When I changed my code to forward the user to the /oauth2/v1/authorize endpoint I was able to get an ID_Token in return in the URL fragment upon returning to my site.
Using the Okta Sign-in widget, once the user has successfully authenticated to Okta the ‘onSuccess’ event is fired. In the object handed to the onSucces function there is a session token accessed like this: res.session.token. For my use case I wanted more of the user’s information and was trying to get it through the /v1/authorize endpoint which will exchange my session token for an OpenID token (which contains more info about the user and is signed with your applications Okta keys). The CORS policy on that endpoint doesn’t allow you to hit it as a XHR, AJAX or Fetch request. You have to redirect the user’s browser to it in order for it to work.
So in the onSuccess function I build a url for the /v1/authorize endpoint using my clientId, response_type, scope, redirect_uri, state, nonce and sessionToken. For example:
let oidcURL: string = `${this.baseUrl}/v1/authorize?client_id=${clientId}&response_type=id_token&scope=openid+email&prompt=none&redirect_uri=${redirectURI}&state=${state}&nonce=${nonce}&sessionToken=${res.session.token}`;
then I redirect to that URL. It will return to the redirect_uri (assuming it matches the redirect set up for your application). And it will return with the state and nonce values you gave it. In the return url behind the hash there will be the OpenID token your are looking for. Make sure to verify the signature, expiration, etc on the token and you should be good to go.
