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 to Access Secured ArcGIS Server Map Service?

ZohaibUddinKhan

Hello Everyone,

Thanks for reading my post.

We're using JS API to access the secured service and we're expecting it wouldn't ask for the user credentials as we're passing Token, but it's not working as expected and asking for credentials.

Following is the 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 = "AAPK9c1060b46848481f85233a3e7-Bf1Yng_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": "nXKRnEHxOLrfCyV_209zi9ht45yzP-IIrvjZzsrI."//Get the token from https://token.slip.wa.gov.au/arcgis/tokens/
                }
            });

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

Find more posts tagged with

Accepted answers

All comments

RiddhiM

has anyone found a solution to this issue?

blake.terhune

CORS is always a challenge. Have a look at the documentation to see if you can identify the solution for your particular setup. The easiest (but not always most reasonable) solution is to run your app from the same server as your services.

MarkEastwood

Any luck getting this to work?

ZohaibUddinKhan

Thanks @BlakeTerhune for the reply.

Is there any other way apart from application authentication if I don't want to get credentials from each users?
I changed my code and now generating the Token in the code like below and CORS is the challenge I'm facing now. Any suggestion?:-

<script>
        function getToken() {

            var settings = {
                "url": "https://token.slip.wa.gov.au/arcgis/tokens/generateToken",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                "data": {
                    "username": "username@domain.com",
                    "password": "678965",
                    "client": "referer",
                    "ip": "",
                    "referer": "https://www.domain.com/",
                    "expiration": "60",
                    "f": "json"
                },
                async: false
            };

            return $.ajax(settings).done().responseText;

        }
        console.log('1');
        var result = getToken();
        var token1 = $.parseJSON(result).token;

        require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], function (esriConfig, Map, MapView, FeatureLayer) {

            esriConfig.apiKey = "AAPK9c1060b46848481f85233a3e-_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": token1
                }
            });

            map.add(layer);

        });
    </script>

This is the Cors challenge:-

Thanks for your time.

blake.terhune

You cannot reuse the same token like that. You have to generate a token when the app loads and gets user credentials. You could also consider application authentication if you don't want to get credentials from each user.

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.