How to access secure webscene through javascript api in esri js(without ask credential from user.)

Question

I have created a web scene on my arcgis online portal and hosted it there also. Now I want to load the webscene on map through arcgis javascript api v4.1.6 and I want to pass the credential(like a token which I can get from argis js api with the right client id and client secret) through code.

Here is my code for loading the web scene

let scene = new WebScene({
  portalItem: { // autocasts as new PortalItem()
    id: "0614ea1f9dd043e9ba157b9c20d3c538"  // ID of the WebScene on the on-premise portal
  }
});`

let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

var formdata = new FormData();
formdata.append("client_id", "");
formdata.append("client_secret", "");
formdata.append("grant_type", "client_credentials");
formdata.append("expiration", "20160");

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: formdata,
  redirect: 'follow'
};

let token = await fetch("https://www.arcgis.com/sharing/rest/oauth2/token", requestOptions)

When I want to check the map in my website, it always prompt a popup window and ask for user name and password. So I am curios is it possible to feed the token somewhere in the code when I load the web scene? So it won't ask username and password from user.

Can you please provide me some sample code in ArcGIS API JavaScript v4.1.6?

Thanks!

Answer 1

If you want do it public, that is what I am understanding, you can set proxy that handle the security of the services. ESRI have open resources for similar tasks, take a look at this,

ESRI Git - Resources - Proxy

Answer 2

It is possible to bypass the login prompt with the Esri Resource Proxy. However, the README does say that "it is not permitted to embed credentials in a resource proxy for the purpose of bypassing Named User authentication (ie the principle that each end-user must have their own unique login)".

Here is another possible workflow:

Pass the token generated at https://www.arcgis.com/sharing/rest/oauth2/token in a registerToken() to access the non-public items. With that, every AJAX request made by the application forwards this token when accessing web maps and other items stored in ArcGIS Online, or resources on your server.

        var url = "https://www.arcgis.com/sharing/rest/oauth2/token";
        var token = "";
        esriRequest(url, {
                query: {
                    client_id: "<CLIENT_ID>",
                    client_secret: "<CLIENT SECRET>",
                    grant_type: "client_credentials"
                },
                method: "post"
            })
            .then((response) => {
                token = response.data.access_token;
                esriId.registerToken({
                    server: "https://www.arcgis.com/sharing/rest",
                    token: token
                })
            })
            .catch((err) => {
                if (err.name === 'AbortError') {
                    console.log('Request aborted');
                } else {
                    console.error('Error encountered', err);
                }
            });

A few things to note about this workflow:

1. The non-public items have to be owned by the same user who generated the client id and secret.
2. The layers on the web map / scene have to be either public or owned by the user who generated the client id and secret. That said, if you do need to include a non-public layer created by another user, you can create an item referencing that layer using the following workflow, and then add this new item to the web map / scene -

• Add items from the web: https://doc.arcgis.com/en/arcgis-online/manage-data/add-items.htm#ESRI_SECTION1_1A21D51E1AFC41EA9974209BD94E50C0

Related documentation:

• IdentityManager.registerToken: https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html#registerToken
• request.esriRequest: https://developers.arcgis.com/javascript/latest/api-reference/esri-request.html#esriRequest