topic Re: can't get legend to work w/ secured service.... in ArcGIS JavaScript Maps SDK Questions

can't get legend to work w/ secured service....

caseycupp — Fri, 02 May 2014 21:20:33 GMT

I've been working in the javascript legend sandbox...

I've made a minor change to the sandbox code... my Unsecured Services show up in the map and the legend...

However, my secured services prompt me for the username and password, I manually enter them... then the service does show up in the map but not the legend...

http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=widget_legend

<!DOCTYPE html> <html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <!--The viewport meta tag is used to improve the presentation and behavior of the samples     on iOS devices-->   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Map with legend</title>    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">    <style>     html, body {       height: 97%;       width: 98%;       margin: 1%;     }      #rightPane {       width: 20%;     }        </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>   <script src="http://js.arcgis.com/3.9/"></script>   <script>     var map;     require([       "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",       "dojo/_base/array", "dojo/parser",       "dijit/layout/BorderContainer", "dijit/layout/ContentPane",        "dijit/layout/AccordionContainer", "dojo/domReady!"     ], function(       Map, FeatureLayer, Legend,       arrayUtils, parser     ) {       parser.parse();        map = new Map("map", {         basemap:"topo",         center: [-96.53, 38.374],         zoom: 13       });         //add the legend       map.on("layers-add-result", function (evt) {         var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {           return {layer:layer.layer, title:layer.layer.name};         });         if (layerInfo.length > 0) {           var legendDijit = new Legend({             map: map,             layerInfos: layerInfo           }, "legendDiv");           legendDijit.startup();         }       });                           $.get("https://maps2.petroweb.com/MAPS2ArcGISServer/tokens?request=getToken&username=pwuser&password=Mauser$98K&expiration=1440&client=http%20referer&referer=localhost")                     .done(function (data) {                                               var imageParameters = new esri.layers.ImageParameters();                         imageParameters.format = "png";                                                    var mapServiceURL = "http://mymapserver.com/MAPS2ArcGISServer/rest/services/MySecureService/MapServer/?token=" + data;                         //var mapServiceURL = "http://mymapserver.com/MAPS2ArcGISServer/rest/services/MyUnsecureService/MapServer/?token=" + data;                                                  var usWellsLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapServiceURL, { "opacity": 1, "imageParameters": imageParameters });                         map.addLayers([usWellsLayer]);                                            })                     .fail(function (xhr, textStatus, errorThrown) {                         alert("Failed to get us wells map layer security token.");                     });                 //map.addLayers([colorado]);     });   </script> </head>  <body class="claro">    <div id="content"        data-dojo-type="dijit/layout/BorderContainer"        data-dojo-props="design:'headline', gutters:true"        style="width: 100%; height: 100%; margin: 0;">           <div id="rightPane"          data-dojo-type="dijit/layout/ContentPane"          data-dojo-props="region:'right'">           <div id="legendDiv"></div>         </div>        <div id="map"          data-dojo-type="dijit/layout/ContentPane"          data-dojo-props="region:'center'"          style="overflow:hidden;">     </div>   </div> </body>  </html>

Re: can't get legend to work w/ secured service....

Noah-Sager — Fri, 02 May 2014 22:39:57 GMT

Hi Casey,

I think the issue is that as soon as any layers in the map get loaded, the create legend widget method gets called. Thus, once you sign-in to display the secure layers, the legend is already complete.

I think you have two options moving forward:
1) Use the proxy page with your credentials so that all the layers (secure & non-secure) get loaded at once
2) Refresh the legend after the secure services get added using legend.refresh()

Hope this helps! Have a great weekend.

-Noah

Re: can't get legend to work w/ secured service....

caseycupp — Mon, 05 May 2014 13:17:31 GMT

I don't think I was clear.. the user should not have to sign in.

My current workflow

Without Legend
# 1 - Get Token
# 2 - append token to URL
# 3 - map.AddLayers
Happy Map

With Legend
# 1 - Get Token
# 2 - append token to URL
# 3 - map.AddLayers
# 4 - legendDijit.startup(); (The legend layer has the token at this point)
# 5 - map prompts user for sign in 😞

The user doesn't sign in..

In the chrome console debugger.. The legend has the token...and CORS is enabled on this server.

legendDijit.layerInfos[0].layer.url - "http://myarcgisserver.com/MAPS2ArcGISServer/rest/services/US_Wells/MapServer/?token=4-6f3b1Tseh_YyfoGv_-KiS7KzEJDYtNNNgYYFHas1Y."

Re: can't get legend to work w/ secured service....

Noah-Sager — Mon, 05 May 2014 14:34:05 GMT

Hi Casey,

It sounds like a proxy would the most appropriate and secure workflow for your situation. I tested the legend dijit sample by adding a secure feature layer using the proxy page, and it worked fine.

Using the proxy: https://developers.arcgis.com/javascript/jshelp/ags_proxy.html

A few questions to consider:
How are you getting and appending the token in the code?
What event fires the legendDijit.startup() function?

-Noah

Re: can't get legend to work w/ secured service....

BenFousek — Mon, 05 May 2014 14:56:39 GMT

The legend widget doesn't like token appended service urls.

Once constructed the layer doesn't need the token query string anymore. Simply set the layer's url property w/o the token.

var layer = new Dynamic('http://some_url/some_service?token=some_token', {   //options }); layer.url = 'http://some_url/some_service'; map.addLayer(layer);

Re: can't get legend to work w/ secured service....

caseycupp — Tue, 06 May 2014 14:33:00 GMT

Thanks, used btfou method and that worked.

casey