ArcGIS Server Token with VectorTileLayer

MirHashmi · ‎10-12-2021

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.js...";

const oLBaseMapUrl = "https://www.arcgis.com/sharing/rest/content/items/3e1a00aeae81496587988075fe529f71/resources/styles/..."; //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 · ‎10-12-2021

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

MirHashmi · ‎10-13-2021

Hi @UndralBatsukh Thanks for your reply. I've tried to implement a test page that works but it still doesnt draw the map. Here is the code and a link to jsfiddle. Looking at the dev tools network tab, I can see that it loads required urls with the token but still map doesn't draw. Am I missing something here?

<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>VectorTileLayer | Sample | ArcGIS API for JavaScript 4.21</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.21/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/VectorTileLayer",
        "esri/config"
      ], (Map, MapView, VectorTileLayer, esriConfig) => {
        // Create a Map
        const map = new Map();

        // Make map view and bind it to the map
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [46.897998, 24.598897],
          zoom: 5
        });

        /********************************************************************
         * Add a vector tile layer to the map
         *
         * The url must point to the style or the vector tile service
         *********************************************************************/
        const tileLayer = new VectorTileLayer({
          url: "https://abc.ab.ca/server/rest/services/Hosted/MyMapService/VectorTileServer"
        });

        const interceptor = {
          urls: tileLayer.url,
          before: function (params) {
            params.requestOptions.query.token =
              "Xj9OUDvMFYz3BHd3fcPnHiJdmmae9gWrfT4WL-VFmJjwoeu82JSC4SCzPc18a7Z_c0VaS-xdFD3neOCtAhn0rKIXaSE7ilsN7Z4F0xTclcGYsDNI-E1UyKtL5YmSkgphSRlwfsrAOU9rEqzu4Z_LDo9b6XFUCi00S5glYTv28pE.";
          }
        };

        esriConfig.request.interceptors.push(interceptor);

        map.add(tileLayer);
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

SailiTang1 · ‎10-12-2021

Hi,

Did you try this? Adding the service to ArcGIS online and turning on "Store Credentials with service item. Do not prompt for authentication." And then, share the item you added to public.

MirHashmi · ‎10-13-2021

Hi @SailiTang1 Thanks for your reply. However, I do not have an ArcGIS online option available. The service is available on premises arcgis portal. Thanks.