Updating OKTA's user profile from Angular application

Questions
1

My question may be basic but I have trouble finding a way to update user profile from my own angular UI.

I didn’t think a basic user operation like this is that much complicated but it seems it is.

I followed the instruction to update my user, using okta user API:

https://developer.okta.com/docs/guides/implement-oauth-for-okta/overview/

And then I tried to apply the same concept in my angular project which I managed to use Okta angular widget and I can register user and login from my app.

this is my configuration:
oidc: {
clientId: ‘jkefkjefkjdfkjfkgfkgj’,
issuer: ‘https://udhfjkhdfhejfhdjfh.okta.com/oauth2/default’,
redirectUri: ‘http://localhost:8080/login/callback’,
scopes: [‘openid’, ‘profile’, ‘email’, ‘okta.users.manage.self’],
testing: {
disableHttpsCheck: false
}
}

With this scope ‘okta.users.manage.self’, it gives me an error like this:
error.errorCode: invalid_scope, error.description: One or more scopes are not configured for the authorization server resource.

Someone educate me on how to set okta specific scopes in angular projects.

I think somewhere I read just Okta Service Client can mint tokens using okta specific scopes. But my postman test uses the same client as my angular project.

2

Hi @mehdizj2000

As noted here, only the Org Authorization Server can mint access tokens that contain Okta API scopes.

In your current configuration, your issuer is https://udhfjkhdfhejfhdjfh.okta.com/oauth2/default, which means tokens would be minted by default authorization server.

If you want to refer to Okta Org authorization server, then the issuer should be just https://${yourOktaOrg}/oauth2 in the sdk configuration.

Please refer to this doc to know more about the difference between org authorization server and default authorization server.

1 Like
3

Hi @gpadma ,

Thank you I didn’t notice those docs before.

Now, when I set the Org Authorization Server as you mentioned, I get CORS error that says:

Access to XMLHttpRequest at ‘https://dfdfgdfgdf.okta.com/oauth2/.well-known/openid-configuration’ from origin ‘http://localhost:8080’ has been blocked by CORS policy

I already set http://localhost:8080 as Trusted Origins and it works for default authorization server well.

I want to do a simple task.

  1. Register a user with okta Self Service Registration.
  2. Login with that user.
  3. Update user info.

Is there any way to do the above task using Angular? I am wondering how the postman example works without any issue. In there I set Auth URL and Access Token URL separately.

4

@mehdizj2000 It looks like the URI you post has sth wrong. It should be either
https://dfdfgdfgdf.okta.com/oauth2/default/.well-known/openid-configuration
or
https://dfdfgdfgdf.okta.com/.well-known/openid-configuration
which depends on if you have access to API AM feature.
Can you please check which metadata you have access?
For the URL issue, if you still have questions, you can refer Okta doc here.

1 Like
5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.