ArcGIS Server Token with VectorTileLayer

MirHashmi

Is there a way to access secured service through VectorTileLayer in ArcGIS JS API.  I have tried with using methods - interceptor and  CustomParameters - but nothing seems to work. Am I missing something? 

1. Generated token
2. Tried to append token in interceptor and customparameters

 const myBaseMapUrl = "https://abc.ab.ca/server/rest/services/Hosted/ILoveMapV1_0/VectorTileServer/resources/styles/root.json";

      const oLBaseMapUrl = "https://www.arcgis.com/sharing/rest/content/items/3e1a00aeae81496587988075fe529f71/resources/styles/root.json"; //openlayers

      // esriConfig.request.interceptors.push({

      //   urls: myBaseMapUrl,

      //   before: function(params) {

      //     params.requestOptions.query = params.requestOptions.query || {};

      //     params.requestOptions.query.token = this.accesstoken;

      //   }

      // });

      // My Basemap vector tile layer

      const myBaseMapLayers = new VectorTileLayer({

          url: (prd) ? myBaseMapUrl : oLBaseMapUrl,

          customParameters: {

            "token": this.accesstoken

          }

      });

 

My application always presents me with the credentials dialog box and I do not need it.

 

@ReneRubalcava 

Thanks

UndralBatsukh

Hi there, 

The customParameters is not supported on VectorTileLayer so setting it on the layer won't help. However, the before interceptors will work. If you are being asked to login that means you still have urls that need to have the token attached. You can look in the network tab to see where it's being sent and which response says it needs a token. Copy those urls and add them to the interceptor urls. Your vector tiles will display without a login promo, once all urls requiring tokens are added to the interceptor urls. I have tested and verified that it works as expected. 

Here is my simple test (token is already expired in this case) and I am adding vector tiles from a protected portal item however the service itself is publicly accessible (so I don't have to add urls for the service). 

  const interceptor = {
          urls: [
            "https://www.arcgis.com/sharing/rest/content/items/92499d146008498091eed0ffaa4b09d5"
          ],
          before({ url, requestOptions }) {
            requestOptions.query.token = "10ilTU8DrsMBMrmj2kApv1pkhFn0MS1OhjNoAzFWU7DUeQufPC9xNj-4lDd0Di1MTSHzwzPKwDdDiE1gDRcXTAxWsFVyCbVoFsChB_9Ez1C6NSqkRE3mftygP_2zW3KEDrmRw87zcwFxezZ9Q9SW0AxlxOeVAZf1o0G5wSwvF11J8jRovtfqunLunkjXQiFFViTKgnDM5NbOc7TAU5uyUes3piH5FCWxts36StJUMAw.";
          }
        };

        esriConfig.request.interceptors.push(interceptor);
        const map = new Map();

        // Make map view and bind it to the map
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-98.5795, 39.8282],
          zoom: 3
        });

        const tileLayer = new VectorTileLayer({
          portalItem: {
            id: "92499d146008498091eed0ffaa4b09d5"
          }
        });
        map.add(tileLayer);

 

Hope this helps,

-Undral