Ben,I ran a quick test using the legend dijit along with using esri.request to get the token and the secure service displayed correctly in the legend:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Accessing secure ArcGIS Server services</title>
<link rel="stylesheet" type="text/css" href="https://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="security.css">
<style type="text/css">
html, body {
height: 98%; width: 99%;
margin:0;
padding-top:4px;
padding-left:4px;
}
#rightPanel{
width:140px;
border:2px solid #617798;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
#status {
font-size: 14px;
font-weight:bold;
}
#mapCanvas{
border-top:2px solid #617798;
border-bottom:2px solid #617798;
border-left:2px solid #617798;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
padding:0px;
}
.submit input{
width:auto;
padding: 9px 15px;
background: #617798;
border:0;
font-size:14px;
color:#FFF;
cursor:pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input{
padding:5px;
border: solid 1px #E5E5E5;
outline:0;
font:normal 13px;
width:120px;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
label{
margin-right:10px;
color:#999;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
</style>
<script type="text/javascript">
var dojoConfig = { parseOnLoad: true };
</script>
<script type="text/javascript" src="https://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.Legend");
dojo.addOnLoad(initialize);
// Global variables
var map,resizeTimer;
function initialize() {
//check to see if browser supports placeholder text - if not enable labels for username and
//password form.
if(!supportsPlaceholder()){
esri.show(dojo.byId('passwordLabel'));
esri.show(dojo.byId('nameLabel'));
}
esri.config.defaults.io.proxyUrl = "proxy/proxy.php";
// Create map
map = new esri.Map("mapCanvas",{
extent: new esri.geometry.Extent({"xmin":-12080521,"ymin":4472736,"xmax":-11829657,"ymax":4563023,"spatialReference":{"wkid":3857}}),
slider: false
});
dojo.connect(map, "onLoad", mapLoaded);
// Add a cached map service
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
//add the map service to the map - this layer doesn't require a token
var trailsService = new esri.layers.ArcGISDynamicMapServiceLayer("https://servicesbeta.esri.com/ArcGIS/rest/services/SanJuan/Trails/MapServer");
map.addLayer(trailsService);
}
function mapLoaded() {
esri.hide(dojo.byId("status"));
dojo.connect(dojo.byId("username"), "onkeypress", keyPressed);
dojo.connect(dojo.byId("password"), "onkeypress", keyPressed);
dojo.connect(dijit.byId('mapCanvas'), 'resize', function() {
resizeMap();
});
}
function signIn() {
// Check if the user has entered username and password
var usr = dojo.byId("username").value, pwd = dojo.byId("password").value;
if (!usr || !pwd) {
return;
}
dojo.byId("signInStatus").innerHTML = "Creating token...";
// Get token from the ArcGIS Server Token Service.
//
esri.request({
url: "https://servicesbeta.esri.com/ArcGIS/tokens",
content: {
request: "getToken",
username: usr,
password: pwd
},
handleAs: "text",
load: tokenObtained,
error: tokenRequestFailed
});
}
function tokenObtained(response) {
dojo.byId("signInStatus").innerHTML = "Token created. Accessing the service...";
// Add the secure feature service to the map
// Note that the token is appended to the URL
// when constructing the layer.
var featureLayerURL = "https://servicesbeta.esri.com/ArcGIS/rest/services/SanJuan/TrailConditions/MapServer/0?token=" + response;
var infoTemplate = new esri.InfoTemplate("Current Conditions", "${Condition} incident updated on ${UpdateDate:DateFormat(selector: 'date', fullYear: true)}. ${Description}");
var conditions = new esri.layers.FeatureLayer(featureLayerURL,{
infoTemplate:infoTemplate,
outFields:["*"]
});
conditions.setDefinitionExpression("Description != ''");
dojo.connect(conditions, "onLoad", function() {
setTimeout(function() {
// closeSignInForm();
dojo.byId("signInStatus").innerHTML = "";
}, 1500);
});
dojo.connect(conditions, "onError", function(error) {
dojo.byId("signInStatus").innerHTML = "Error: " + error.message;
});
dojo.connect(map,'onLayerAddResult',function(results){
console.log('added');
//add legend
var legendDijit = new esri.dijit.Legend({
map:map
},"legendDiv");
legendDijit.startup();
});
map.addLayers([conditions]);
map.infoWindow.resize(200,120);
}
function tokenRequestFailed(error) {
dojo.byId("signInStatus").innerHTML = "Unable to create token. Please check your username/password";
}
function keyPressed(e) {
if (e.charOrCode === dojo.keys.ENTER) {
signIn();
}
}
//Handle resize of browser
function resizeMap(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function(){
map.resize();
map.reposition();
}, 500);
}
function supportsPlaceholder() {
// An alternative to this test would be to use a javascript library like
//Modernizr that detects support for HTML5 and CSS3 functionality.
var i = document.createElement('input');
return 'placeholder' in i;
}
function disableSignInForm() {
dojo.byId("username").value = "";
dojo.byId("password").value = "";
var node = dojo.byId("content"), box = dojo.contentBox(node);
dojo.style(node, { top: 0, opacity: 1 });
var hideAnimation = dojo.animateProperty({
node: node,
duration: 500,
properties: { top: -1 * box.h, opacity: 0 }
});
hideAnimation.play();
}
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="position:relative;width:100%;height:100%;">
<div id="mapCanvas" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" >
<span id="status" style="position: absolute; z-index: 99; right: 5px; top: 5px;">
Loading...
</span>
</div>
<div id='centerPanel' data-dojo-type='dijit.layout.ContentPane' data-dojo-props="region:'left'" style='width:200px;'>
<div>
<h3>Legend</h3>
<div id='legendDiv'></div>
</div>
</div>
<!--right content panel-->
<div id="rightPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'">
<p>This sample shows how to view a secure map service using token-based authentication.</p>
<div id="content" >
<p>To view current trail conditions sign in with user name: <b>rick</b> and password:<b>rick@esri</b></p>
<p class="username">
<label style="display:none;" for="username" id="nameLabel">Name</label>
<input placeholder="Username" type="text" name="username" id="username" />
</p>
<p class="password">
<label style="display:none;" id="passwordLabel" for="password">Password</label>
<input placeholder="Password" type="password" name="password" id="password" />
</p>
<p class="submit">
<input type="submit" id="signIn" onclick="signIn();" value="Sign In" autofocus/>
</p>
</div>
<span id="signInStatus"></span>
</div>
</div>
</body>
</html>
Can you provide more details about your scenario?