Can't access user profile information

Questions OAuth/OIDC
1

I’ve been trying for some time now with the documentation to properly access the user information of a specific user.

I’ve seen people doing it multiple ways and there doesn’t seem to be a proper way within the documentation that I can find except the cURL examples. Therefore I just do access the user info through a http.get() instead of using the OktaAuthService.

Now, I can login on localhost:4200 within my test application. I set up Trusted Origin http://localhost:4200/ on both port 80 and 443. And still, with the code below I get 401’d and 403’d both telling me that CORS is not allowed because the request_uri is not a trusted origin.

In my profile.component.ts I use the following Code to http.get() the user’s information because I have not seen any other way to access it:

ngOnInit() {
this.user = this.oktaAuth.getUser().then((user) => {
  // Got user
  this.oktaAuth.getAccessToken().then((token) => {
    // Got access token
    let httpHeaders: HttpHeaders = new HttpHeaders({'Authorization': 'SSWS ' + token})
      .append('Accept', 'application/json').append('Content-Type','application/json');

    this.http.get('https://dev-713629.oktapreview.com/api/v1/users/' + user.sub, {headers: httpHeaders})
      .subscribe((res) => {
        console.log(res);
      });
  });
});

And I get:

GET https://dev-713629.oktapreview.com/api/v1/users/00uffkg0jnMibX4Nl0h7 401 (Unauthorized) profile:1 Failed to load https://dev-713629.oktapreview.com/api/v1/users/00uffkg0jnMibX4Nl0h7: No 'Access-Control Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401.

My two questions:

  • What is really going wrong here? (Trusted Origin works, the log-in works hence it must accept http://localhost:4200)
  • How do I really gather the user.profile information of a user? (Or all of a user’s information) - Because OktaAuthService.getUser() just gives me sud, email and email_verified

Thanks for the answer!

2

Hi @chriszo111,

Looking at your code, I see that you’re passing the accessToken in the Auth header to the /api/v1/users endpoint. This will not work. (The error you see is confusing though.)
You will need to pass an Okta API Token to the users endpoint.
To get the API token, follow this document - https://developer.okta.com/docs/api/getting_started/getting_a_token

You could also use our node SDK to get users instead of directly calling the API - https://github.com/okta/okta-sdk-nodejs

Let us know if this helps.

3

Good questions. I can provide a little further explanation.

What is really going wrong here?

The real thing you are seeing is the difference between our authentication APIs and our management APIs. Anything that requires an API token (also called “SSWS”) is part of our management APIs, and do not support CORS. There is no secure way to store an API token in the browser, so you shouldn’t call these APIs from frontend code.

How do I really gather the user.profile information of a user? (Or all of a user’s information) - Because OktaAuthService.getUser() just gives me sud, email and email_verified

The items in user.profile are the things in the user’s ID token. You can either:

  • Add more things (claims) to the ID token: Create an authorization server | Okta Developer
  • Build an API that runs on a backend server you control (using one of our management SDKs as @vijet suggested), and use the access token you have on the frontend to call that backend API, which can then safely use an API token to call the Okta management APIs.

I dashed this answer off a little quickly at the end of the day, so please ask more questions if it didn’t make sense. :slight_smile:

1 Like
4

Thanks @nate.barbettini, that gives me a good idea of what’s going on regarding security. Also, I didn’t even see claims yet, thanks for that hint (and it makes total sense).

The documentation did not state the possibility of using Claims to access user information (it might help some people who go through the documentation, or did I miss it?)

I’ll try using Claims now, as I don’t want to have a backend (reason I am using Okta in the first place), I just want to have a website fully hosted on GitHub Pages.

5

I created a new claim:

image
image.png2034×426 35.8 KB

… following the example with “sub”, cause that was what I thought show’s up when accessing the userinfo with https://dev-713629.oktapreview.com/oauth2/default/v1/userinfo/

What I get back is the Observable, allowing me to access sub (which should - following the rule described in Okta Expression Language - be ‘user.userName’ and no hashed value), email_verified and email.

I still don’t get nothing else except for these key-value pairs. I am again running against a wall, cause I have no clue how I can access the profile data for a specific user using only the frontend. What am I doing wrong using the Claims-attempt you showed me? I also don’t think I am using the Claims defined, because I don’t see email_verified, neither email defined there. (btw. I tried both ID_token and Access_token, cause the doc’s say access-token is the approach for OAUTH2.0).

For better understanding you might quickly look into my application on GitHub

6

Hey @chriszo111, sorry for the delay. Did you make any progress?

The best way to see if your custom claim is working is to use the Token Preview tool that’s built into the Authorization Server section. That will let you debug things before they even get to your code. If you’re still struggling with this, what happens when you preview the token?

7

I took a brief look at your application. Have you tried setting the scope in the initial config?

In app.modules.ts:

const config = {
  issuer: 'https://dev-713629.oktapreview.com/oauth2/default',
  redirectUri: 'http://localhost:4200/implicit/callback',
  clientId: '0oafiwd7qfU6IE4GU0h7',
  idps: [
    { type: 'FACEBOOK', id: '0oaffxvx65klCzKXz0h7' }
  ],
  ---->  scope: 'openid profile'
};
1 Like
8

Hey @nate.barbettini, I managed to get it via the Token. What I do is, I have the Super Admin Token which then gets userinfo by user id (sub). However, this is not how I want to achieve getting the user data. Because the page is public, the source code is too - so I can’t use a token with Super Admin rights. It would be very convenient if there was a way to get the currently logged in user’s personal data API-wise to make it kinda like a Backend as a Service.

@paul.leblond I will try so and give feedback on how that worked soon, thanks for the hint!

9

I agree, you shouldn’t need to embed an API token in your public code. It definitely is possible to get that user data in the ID token. Adding a custom claim on the Authorization Server is the best way to achieve that. If the claim you added isn’t showing up on the Angular side, I’d debug it using the Token Preview tool (in the Authorization Server settings on Okta) first to make sure that the claim is working.

What are the specific things you want to show up in the token?

10

@nate.barbettini I haven’t had time to properly debug it yet.

I wanted to be able to create custom fields i.e. of game accounts like steam to play a bit with their API. I added custom fields and am able to get them with the token.

The claims I tried like shown above, but they don’t show in postman either, which must mean that I did something wrong there.

I will have a try on this soon and come back with feedback!

Thanks for the continuous help!

11

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