Need guidance on using iTwin Platform APIs

[ovaisa]

I am interested in using iTwin Platform services (project, issues, form,...) I played around with the API in developer.bentley.com and all requests seem to interacting with my projects/users/issues as expected.

To understand how to access these services from within my app, I added a function to myFirstUiProvider() app with a simple request (following the code in Platform API clash review example). Please see response below. Any guidance on what I need to do to get this working (add appropriate access control in my request?).

private static onRequest = async () => { // this function is invoked with a added to myFirstUiProvider widget
const requestContext = await AuthorizedFrontendRequestContext.create();
const accessToken = await IModelApp.authorizationClient?.getAccessToken();
const url = https://api.bentley.com/users/me;
const options = {
method: "GET",
headers: {
Authorization: accessToken.toTokenString(IncludePrefix.Yes),
},
};
return request(requestContext, url, options)
.then((resp: Response): string | undefined => {
if (resp.body === undefined) return undefined;
return resp.body;
}).catch((_reason: any) => {
console.log("Reason: "+_reason);
return undefined;
});
};

From console.log() output
Reason: Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

Access to XMLHttpRequest at 'https://api.bentley.com/users/me' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://api.bentley.com/users/me
net::ERR_FAILED

[aruniverse]

@laurynasr ?

Just to confirm:

• Does your app have an api association for the Administration > Users apis?
• Did you update the scopes for your app?
• Are you using the right token, issued by the right issuer (https://ims.bentley.com/) ?

[ovaisa]

Hi Arun,

To reconfirm the questions you asked

• Does your app have an api association for the Administration > Users apis?
  [ovaisa] Yes, users:read' is added to the app
  https://developer.bentley.com/apps/spa/spa-mUoxM1nhDmQ1MV9NDGZtrOznP/
  Scopes (33)
  ...
  urlps-third-party users:read validation:modify validation:read assets:modify context-registry-service:read-only
  ...

• Did you update the scopes for your app?
  [ovaisa] Here is the scope from my .env (users:read is included)
  IMJS_AUTH_CLIENT_SCOPES="users:read openid email profile organization imodelhub context-registry-service:read-only product-settings-service general-purpose-imodeljs-backend imodeljs-router urlps-third-party"

• Are you using the right token, issued by the right issuer (https://ims.bentley.com/) ?
  [ovaisa] The login is done using the following two pages - these are 'out of box' login pages so I assume this is the right issuer. The first asks for login id (email) and second asks for password
  https://imsoidc.bentley.com/connect/authorize?client_id=spa-mUoxM1nhDmQ1MV9NDGZtrOznP&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fsignin-callback&response_type=code&scope=users%3Aread%20openid%20email%20profile%20organization%20imodelhub%20context-registry-service%3Aread-only%20product-settings-service%20general-purpose-imodeljs-backend%20imodeljs-router%20urlps-third-party&state=ff19064b44b24b60a9287f6af2355e5c&code_challenge=YpHcI8q140qHRb8UiBtxUjlqFPlr42vTRLUWoKoRd7o&code_challenge_method=S256&response_mode=query

  AND

https://imsoidc.bentley.com/as/V1bHk/resume/as/authorization.ping

[aruniverse]

The easiest way to confirm the issuer for your auth token is to inspect in a site like https://jwt.ms/ and look at the issuer field. Please don't share your auth token here in the discussion.

"iss": "https://ims.bentley.com",

Im pretty sure the token you are using (obtained from IModelApp.authorizationClient?.getAccessToken()) is being issued by https://imsoidc.bentley.com. To use the iTwin Platform APIs you will need a token issued by https://ims.bentley.com and not https://imsoidc.bentley.com

To get around this you will need to manage 2 separate oidc clients, 1 pointing to imsoidc, and 1 to ims, and use the ims client when making any calls to the iTwin Platform Apis.

If you bootstrapped an app using the @bentley/itwin-viewer template , then you will have an AuthorizationClient which currently manages a client pointing to imsoidc. You will need to add another client and set that up like the current one, but have that new one's authority be https://ims.bentley.com. Then when you need to make a call to an iTwinPlatform Api you'd use the token from that client you just added.

Here's some reading on the authentication if you're interested.

We're sorry for the inconvenience and lack of documentation on this, we are working on improving this.

[aruniverse]

Here's a sample auth client you can use.
When making a request to iTwinPlatform Api, you can obtain the right token like so:

AuthorizationClient.apimClient.getAccessToken()

[ovaisa]

Thank you Arun, this works now! I am able to connect to User service. I will test with the services I really need and hopefully will not have to bug you again :)

For your reference, I had to make few minor changes to get the code to work with the bootstrap app. AuthorizationClient.zip

1. Needed to make the class default export because that is how App.tsx is importing it. Else need to modify App.tsx in bootstrap template

2. Added the following line - I believe it redirects to the login page as without it the login page was not opening.

      await BrowserAuthorizationCallbackHandler.handleSigninCallback(
          oidcConfiguration.redirectUri
      );
   

3. Added IMJS_..._AUTHORITY attributes in .env file

Thanks a lot for your help, I would not have been able to figure this out based on your initial response, so appreciate you taking time to come up with the code to resolve this issue.

[aruniverse]

Hey, just wanted to update you, not sure if you saw the post below about desktop, but the same can be applied to the web here.

You can now remove the AuthorizationClient I had shared with you earlier.
If you go to your app on the developer portal, developer.bentley.com/apps/spa/{whatever-your-spa-client-id-is}, you should find the new itwinjs scope under the Visualization section, add that, and update your web app.

Now you just need to use 1 client, using https://ims.bentley.com as the authority as long as you have the itwinjs scope.

  const authConfig: BrowserAuthorizationClientConfiguration = {
    authority: "https://ims.bentley.com",
    scope: process.env.IMJS_AUTH_CLIENT_SCOPES ?? "",
    clientId: process.env.IMJS_AUTH_CLIENT_CLIENT_ID ?? "",
    redirectUri: process.env.IMJS_AUTH_CLIENT_REDIRECT_URI ?? "",
    postSignoutRedirectUri: process.env.IMJS_AUTH_CLIENT_LOGOUT_URI,
    responseType: "code"
  };

<Viewer
  authConfig={{ config: authConfig }}
  ...
/>

And now you can obtain a token like so:

await IModelApp.authorizationClient?.getAccessToken()

[JohnMajerle]

Hello Arun, @aruniverse

Can you provide instructions on how to do the same thing for an app created from the sample desktop-starter ?

Thanks,

John M.

[JohnMajerle]

Hello Arun,

I created a new project using this template and got it to launch correctly. However when I tried to include in the IssuesWidget sample my the web service requests are still failing with a CORS error. See first image below. I pasted my current scopes in the second image below.

My .env file has the following content.

Do I need to use a different ITWIN_VIEWER_REDIRECT_URI in order to remove the CORS errors?

Thanks,

John M.

ITWIN_VIEWER_SCOPE ="email organization profile openid itwinjs issues:modify issues:read "
ITWIN_VIEWER_CLIENT_ID="native-Ylz9OS9l9P7O43uTHglhZCGFU"
ITWIN_VIEWER_REDIRECT_URI="http://localhost:3000/signin-callback"
ITWIN_VIEWER_SNAPSHOT="./samples/house_model.bim"
ITWIN_VIEWER_ISSUER_URL="https://ims.bentley.com"

BROWSER=none
SKIP_PREFLIGHT_CHECK=true
DISABLE_ESLINT_PLUGIN=true
GENERATE_SOURCEMAP=false

scripts/README-imodeljs.md
USE_FAST_SASS=true
USE_FULL_SOURCEMAPS=true
TRANSPILE_DEPS=false
DISABLE_TERSER=true

[aruniverse]

Did you add the issues:* scopes after you ran the desktop-viewer for the first time? You might need to go to the backstage to sign in. If you're already signed in, then you might need to clear the entry in the windows credentials manager and then restart the viewer

[JohnMajerle]

Hello Arun,

Deleting the cached credentials solved that problem. I now see the Issues widget listing my three issues. However I'm not seeing my Issue markers. Currently debugging that.

I did notice the following POST error. Do I need to add yet another scope to my token?

[aruniverse]

Hey John, glad that worked. I've seen that POST error as well, it should be safely ignored. We'll be fixing that in the next major version of iModel.js. If you have any further questions that aren't about authenticating to the iTwin Platform apis, please post in a separate discussion post.

[JohnMajerle]

@aruniverse - Will do. And thanks for all the help.

[ovaisa]

Thank you Arun for fixing this issue and letting me know. I will look into this shortly. We want to replace default authentication process with our own (as all our users are already authenticated by our service). We have been studying documentation on iTwin authentication, but if there an example code for this, would really appreciate if you can point me to that, or any guidance on architecture/workflow to follow. Thank you, Ovais

…

------ Original Message ------ From: "Arun George" ***@***.***> To: "imodeljs/imodeljs" ***@***.***> Cc: "ovaisa" ***@***.***>; "Author" ***@***.***> Sent: 8/6/2021 7:00:45 PM Subject: Re: [imodeljs/imodeljs] Need guidance on using iTwin Platform APIs (#1699)

Hey, just wanted to update you, not sure if you saw the post below about desktop, but the same can be applied to the web here. You can now remove the AuthorizationClient I had shared with you earlier. If you go to your app on the developer portal, developer.bentley.com/apps/spa/{whatever-your-spa-client-id-is}, you should find the new itwinjs scope under the Visualization section, add that, and update your web app. Now you just need to use 1 client, using https://ims.bentley.com as the authority as long as you have the itwinjs scope. constauthConfig: BrowserAuthorizationClientConfiguration={authority: "https://ims.bentley.com",scope: process.env.IMJS_AUTH_CLIENT_SCOPES??"",clientId: process.env.IMJS_AUTH_CLIENT_CLIENT_ID??"",redirectUri: process.env.IMJS_AUTH_CLIENT_REDIRECT_URI??"",postSignoutRedirectUri: process.env.IMJS_AUTH_CLIENT_LOGOUT_URI,responseType: "code"};<ViewerauthConfig={{config: authConfig}} ... /> And now you can obtain a token like so: awaitIModelApp.authorizationClient?.getAccessToken() — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#1699 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATZJRX2FA74YLK2X66L66KLT3PTI3ANCNFSM47FTR2RA>. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email>.

[aruniverse]

Can you ask this in a separate discussion post?