adobe / aem-assets-selectors-mfe-examples

Assets Selectors contains a collection of components such as AssetSelector and DestinationSelector from Adobe Experience Manager Assets as a Cloud Service (AEM CS)
Apache License 2.0
5 stars 7 forks source link

Building the Sample React app does not work. #8

Open tamelang opened 9 months ago

tamelang commented 9 months ago

Expected Behaviour

I can build the project like described in read me file

Actual Behaviour

npm install failes because of missing https

npm i   
npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY
npm ERR! errno UNABLE_TO_GET_ISSUER_CERT_LOCALLY
npm ERR! request to https://artifactory.corp.adobe.com/artifactory/api/npm/npm-adobe-platform-release/@adobe/react-spectrum/-/react-spectrum-3.25.1.tgz failed, reason: unable to get local issuer certificate

after temporarily disabling https npm config set strict-ssl false

npm i                          
npm ERR! code E401
npm ERR! 401 Unauthorized - GET https://adobe.trust-adobe.console.banyanops.com/v2/auth?client_id=ePcIQuesF41DxqDK3gTuUw&nonce=uzUMqN9Of6g9AN2SV9Bz8&redirect_uri=https%3A%2F%2Fartifactory.corp.adobe.com%2Fbnn_trust_cb&response_type=code&scope=openid+profile+email&state=9O1le8810F9743pUp9TEfs

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/tim/.npm/_logs/2024-02-14T14_12_51_244Z-debug-0.log

Steps to Reproduce

navigate to /examples/react run npm i

Platform and Version

local

Sample Code that illustrates the problem

Logs taken while reproducing problem

nazimamin commented 9 months ago

While we wait to update this, a workaround for you would be to remove the yarn.lock and try to do a fresh install.

vedgunjan commented 8 months ago

Hi, I was able to start the app but getting "https://www.adobe.com/?error=unsupported_grant_type"

Does it mean "imsScope" is incorrect?

Also can someone plz tell from where to grab the imsClientId ?(IMS_CLIENT_ID_ASSOCIATED_WITH_YOUR_AEM_ASSETS_REPOSITORY)

Any thoughts?

Thanks Ved

nazimamin commented 8 months ago

Hi @vedgunjan, this repository is meant to be a supplemental documentation that show cases some of the integration you can do with AssetSelector. As this integration only available case-by-case on-boarding, it assumes that you have already been provisioned and provided a "IMS_CLIENT_ID_ASSOCIATED_WITH_YOUR_AEM_ASSETS_REPOSITORY" by Adobe. Please reach out to your account team or support Adobe Slack channel to get more information.

vedgunjan commented 8 months ago

Hi @nazimamin After reading through the documentation, I was able to grab the imcClientId and orgId from the developer console of AEM CS. It was my bad to not read the doc throughly.

But now after providing those details in the react example, I'm running into grant type error and also I could see cors error in the console log image image

It seems that I'm missing some configurations.Any guidance would be greatly appreciated

nazimamin commented 8 months ago

@vedgunjan may you open a support ticket from your Admin Console requesting to provision the Assets Selector. The support ticket should be marked P2 and include:

  1. Program ID and Environment ID for the AEM CS instance
  2. Domain names where the integrating application is hosted

After the AssetSelector is provisioned for you, you will be provided with a client id and the scope that you can pass to registerAssetSelectorAuthService.

vedgunjan commented 8 months ago

Thanks @nazimamin I have created the ticket. Once I get the details I will proceed. Thanks again for the help. Really appreciate it.

vedgunjan commented 8 months ago

Hi @nazimamin

Hope you are doing well and thank you for your guidance so far!

We got the Assets Selectors provisioned and we were provided with an imsClientId, imsScope, and a redirectUrl. After applying those values, the authentication flow was triggered and the modal (pop-up) was displayed. But now I'm seeing CORS error in the network tab for the call to https://adobeid-na1.services.adobe.com/ims/check/v6/token?jslVersion=v2-v0.31.0-2-g1e8a8a. Of course, it is missing the Access-Control-Allow-Origin header. Also, the pop-up appears momentarily and closes by itself

image

I'm trying to run it on my local and I tried both the react and the vanilla js example. Both are erroring out because of the CORS error.

Are there any steps/configurations that I'm missing? Any suggestions will be really helpful.

Thanks Ved

nazimamin commented 7 months ago

@vedgunjan you would not have seen that CORS error if it was provisioned correctly. I suggest you follow up with that support where you have the imsClientId provisioned.