0

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!

amy cai
  • 73
  • 8

2 Answers2

1

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 (i.e. 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 -

Related documentation:

L. X.
  • 26
  • 1
  • Thanks for the reply, I will try it out. Just one question about loading the web scene or web map. How did you load them? just right after the esriRequest() code? Could you provide the sample code for loading the web scene with esriRequest()? Thanks! – amy cai Oct 16 '20 at 11:36
  • 1
    @amycai Sure thing! Yes, we can load the web scene or map right after the esriRequest() code. Here is a [CodePen sample](https://codepen.io/lxie/pen/YzWWvLL?editors=1000). This will not work on the fly though because I did not include my client id or secret in the code. – L. X. Oct 19 '20 at 13:44
  • Nice! I have test it for my secured web map, works very well! Thanks! – amy cai Oct 21 '20 at 14:27
0

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

cabesuon
  • 4,860
  • 2
  • 15
  • 24