nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How do I add a secured feature service using a token in 4.X?

MattStayner

I need to load a secured layer using an Esri token. In 3.X I did this:

const url = `${serviceUrl}?token=${esriToken}&f=json`
var featureLayer = new FeatureLayer({
  url: url
});

It worked great and would load the secure feature service.

I do the exact same thing in 4.X, and I get the pop-up asking me to sign in. I double-checked the URL, and it provides the JSON, so that's not the issue.

What gives? I already signed in using OAuth2. That's how I got the token. I don't want to have to sign in again. Please help. Thanks!

Find more posts tagged with

Accepted answers

ReneRubalcava

We strip any URL parameters added to a layer URL to better manage params we need to use for queries and stuff. This is by design. The preferred way is IdentityManager for tokens, but you can use the requestInterceptors for this.

      esriConfig.request.interceptors.push({
        // set the `urls` property to the URL of the FeatureLayer so that this
        // interceptor only applies to requests made to the FeatureLayer URL
        urls: "https://services6.arcgis.com/ExtdhXSbhHKK7FFW/arcgis/rest/services/Related_Table_2/FeatureServer/0",
        // use the BeforeInterceptorCallback to add token to query
        before: function(params) {
          params.requestOptions.query = params.requestOptions.query || {};
          params.requestOptions.query.token = "my-token";
        },
      });

You can double check that its appended by checking the network request.

Hope that helps.

All comments

ReneRubalcava

There are a couple of options, but if you simply want to append it to the URL, you can use the before() requestInterceptor

https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#RequestInterceptor

MattStayner

Hi @ReneRubalcava ,

Thanks for the quick response? Yes, I just want to append the token to the URL. Why do I need to use a `requstInterceptor`. Why can't I just append the token to the request as shown in this example? I didn't include the actual token, but you get the idea.

At any rate, that approach doesn't work. I tried looking at before() and I can't wrap my mind around how I would do that. Would you mind updating the example to show how that would work?

ReneRubalcava

      esriConfig.request.interceptors.push({
        // set the `urls` property to the URL of the FeatureLayer so that this
        // interceptor only applies to requests made to the FeatureLayer URL
        urls: "https://services6.arcgis.com/ExtdhXSbhHKK7FFW/arcgis/rest/services/Related_Table_2/FeatureServer/0",
        // use the BeforeInterceptorCallback to add token to query
        before: function(params) {
          params.requestOptions.query = params.requestOptions.query || {};
          params.requestOptions.query.token = "my-token";
        },
      });

You can double check that its appended by checking the network request.

Hope that helps.

ZohaibUddinKhan

@ReneRubalcava Thanks for the reply. I used the same code as provide by you and replace the following:-

URL- https://services.slip.wa.gov.au/arcgis/rest/services/Landgate_v2_Subscription_Services/Cadastral/MapServer/35
Token- Generate Token from https://token.slip.wa.gov.au/arcgis/tokens/

Now, my code looks like following:-

const featureLayerUrl = "https://services.slip.wa.gov.au/arcgis/rest/services/Landgate_v2_Subscription_Services/Cadastral/MapServer/35";

esriConfig.request.interceptors.push({
urls: featureLayerUrl,
before: function (params) {
params.requestOptions.query = params.requestOptions.query || {};
params.requestOptions.query.token = "nXKRnEHxxxxxxxxxxxxxxxXXXXxxxxxxxxxxxxxxx.";
},
});

const cadastreLayer = new FeatureLayer({
url: featureLayerUrl,
outfields: ["land_id"]
});

map.add(cadastreLayer);

But, it is still asking for the Username / Password on the page. Do you know what I'm missing? Thanks.

ReneRubalcava

There is probably a request being made to the root of the service to check for capabilities. You can make the request interceptor url to the root of the server.

{
  urls: "https://services.slip.wa.gov.au"
}

UndralBatsukh

Hi there,

You can do couple of things. If you are using JS API version 4.18, then you can take advantage of FeatureLayer.customParameters property as it was introduced for cases like this one. You can do this:

var layer = new FeatureLayer({
  url: serviceUrl,
  customParameters: {
   "token": yourToken
  }
});

If you are using a version older than 4.18, then you can use interceptors to modify the request before it is sent. You can do this:

 const interceptor = {
    urls: [
    "url to the service",
  ],
  before({ url, requestOptions }) {
    requestOptions.query.token = "yourTOKEN";
  },
  after({ data, url, requestOptions }) {
    console.log("after", data, url, requestOptions);
  }
};
esriConfig.request.interceptors.push(interceptor);

const layer = new FeatureLayer({
  url: "service url"
});

Hope this helps,

-Undral

MattStayner

This worked perfectly for me. Thanks @ReneRubalcava !

ZohaibUddinKhan

Thanks @UndralBatsukh for the reply. We're using JS API version 4.18 and unfortunately it is still asking for the credentials. Am I doing something terribly wrong here ?

Following is our code:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title></title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>
    <script>
        require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], function (esriConfig, Map, MapView, FeatureLayer) {

            esriConfig.apiKey = "AAPK9c1060b46848481f85233a3e75........-......._hEZz";

            const map = new Map({
                basemap: "arcgis-topographic" // Basemap layer service
            });

            const view = new MapView({
                map: map,
                center: [115.860299, -31.954594], // Longitude, latitude
                zoom: 13, // Zoom level
                container: "viewDiv" // Div element
            });

            const featureLayerUrl = "https://services.slip.wa.gov.au/arcgis/rest/services/Landgate_v2_Subscription_Services/Cadastral/MapServer/41";
            //const featureLayerUrl = "https://token.slip.wa.gov.au/arcgis/rest/services/Landgate_v2_Subscription_Services/Cadastral/MapServer/41";

            var layer = new FeatureLayer({
                url: featureLayerUrl,                
                customParameters: {
                    "token": "nXKRnEHxOLrfCyVAs3......_....."//Get the token from https://token.slip.wa.gov.au/arcgis/tokens/
                }
            });

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

and following are the results while browsing:-

ZohaibUddinKhan

Hi @UndralBatsukh , thanks for the reply. I've created a separate post so that we can track the solution and mark it accepted later.

Here is the Post https://community.esri.com/t5/arcgis-api-for-javascript/how-to-access-secured-arcgis-server-map-service/m-p/1042775

ZohaibUddinKhan

Thanks @ReneRubalcava for the reply. I tried the change but no luck! Any clue what I'm doing wrong? I've created a separate post so that we can keep track and accept the solution later. (New post url: https://community.esri.com/t5/arcgis-api-for-javascript/how-to-access-secured-arcgis-server-map-service/m-p/1042775)

Following is my code for JS API v4.16:-

<script type="text/javascript">
        require([
            "esri/config",
            "esri/Basemap",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/VectorTileLayer",
            "esri/layers/FeatureLayer",
            "dojo/domReady!"
        ], function (esriConfig, Basemap, Map, MapView, VectorTileLayer, FeatureLayer
        ) {
            var initialLatitude = '-31.954594';
            var initialLongitude = '115.860299';
            var initialPoint = { type: "point", latitude: initialLatitude, longitude: initialLongitude };
            var vectorTileLayerID = '07a6b122323b4exxxxxxxc0a97b29';

            var wp_VectorTileLayer = new VectorTileLayer({
                portalItem: {
                    id: vectorTileLayerID
                }
            });

            var MDSbaseMap = new Basemap({
                baseLayers: [
                    wp_VectorTileLayer
                ]
            });

            var map = new Map({
                basemap: MDSbaseMap
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 11,
                constraints: {
                    minScale: 3000,  
                    maxScale: 30,  
                    rotationEnabled: false
                },
                center: initialPoint
            });

            view.popup.autoOpenEnabled = false;

            const featureLayerUrl = "https://services.slip.wa.gov.au/arcgis/rest/services/Landgate_v2_Subscription_Services/Cadastral/MapServer/41";
            //const featureLayerUrl = "https://token.slip.wa.gov.au/arcgis/rest/services/Landgate_v2_Subscription_Services/Cadastral/MapServer/41";

                esriConfig.request.interceptors.push({
                    urls: "https://services.slip.wa.gov.au/",
                    before: function (params) {
                        params.requestOptions.query = params.requestOptions.query || {};
                        params.requestOptions.query.token = "nXKRnEHxOLrxxxxxxxxxxxxxxtU4amjZzsrI.";//Get the token from https://token.slip.wa.gov.au/arcgis/tokens/
                    },
                });

            const layer = new FeatureLayer({
                url: featureLayerUrl
            });

            map.add(layer);

            view.ui.move(["zoom"], "bottom-left");

        });
    </script>

ReneRubalcava

Check all the network requests to that domain and verify that the token is appended to the URL. Maybe a token source URL permission issue?

ZohaibUddinKhan

Thanks @ReneRubalcava for the reply and help. I can see the token is getting appended in the URL, but maybe CORS is the problem. Trying to find the solution to overcome it. If you have any suggestions then feel free to share.

jaykapalczynski

Are there parameters for Editing? I see your example shows Query Parameters but what about if I need to edit this?

jaykapalczynski

I see that you are adding Query Parameters.....are there Edit parameters for editing?

ReneRubalcava

I don't know if this was available when this post was made, maybe, and I missed it, happens. But the layers have a property called customParameters you can use to add tokens like this.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#customParameters

In this case, you can avoid using an interceptor to add url params.

ShmuelKatorzaDAO

Hi ,

I needed also to change in the security option the support for two options:

"allowHttpPostQueryParams"

"allowHttpGet"

under arcgis server admin -- > security --> tokens

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.