topic Re: ArcGIS Server Token with VectorTileLayer in ArcGIS JavaScript Maps SDK Questions

ArcGIS Server Token with VectorTileLayer

MirHashmi — Tue, 12 Oct 2021 11:51:03 GMT

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

Re: ArcGIS Server Token with VectorTileLayer

UndralBatsukh — Tue, 12 Oct 2021 16:33:29 GMT

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).

Hope this helps,

-Undral

Re: ArcGIS Server Token with VectorTileLayer

SailiTang1 — Tue, 12 Oct 2021 17:57:18 GMT

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.

Re: ArcGIS Server Token with VectorTileLayer

MirHashmi — Thu, 14 Oct 2021 03:07:02 GMT

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.

Re: ArcGIS Server Token with VectorTileLayer

MirHashmi — Thu, 14 Oct 2021 15:52:06 GMT

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>