Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Identity Manager
Explore in the sandbox
Open in CodePen
View live sample
Description
The IdentityManager, release at version 2.5, simplifies the process of working with secure resources. The IdentityManager handles the process of prompting the user for their credentials, generating a token, and appending it to the resource. To use the IdentityManager simply include esri/IdentityManager as part of your require statement.
Once you've added the IdentityManager to your application it will take care of the following:
- Prompting the user for their credentials.
- Appending the token to the resources.
- Refreshing the token as needed.
Note: The IdentityManager works with resources from ArcGIS, Portal, and services published using ArcGIS Server 10.0 SP1 or greater.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Accessing secure ArcGIS Server services</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body {
height: 98%;
width: 99%;
margin: 0;
padding-top: 4px;
padding-left: 4px;
}
#rightPanel {
width: 220px;
border: 2px solid #617798;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
#mapCanvas {
border-top: 2px solid #617798;
border-bottom: 2px solid #617798;
border-left: 2px solid #617798;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
padding: 0px;
}
</style>
<script src="https://js.arcgis.com/3.46compact/"></script>
<script>
var map;
require([
"dojo/_base/array",
"dojo/parser",
"esri/config",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/layers/FeatureLayer",
"esri/map",
"esri/IdentityManager",
"dojo/domReady!",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer"
],
function (arrayUtils, parser, esriConfig, Editor, TemplatePicker, FeatureLayer, Map){
parser.parse();
map = new Map("mapCanvas", {
basemap: "topo-vector",
center: [-120.723, 35.165],
zoom: 12,
slider: false
});
//add editor when secureLayer is added
map.on("layers-add-result", initEditing);
//add the secure service - token is required
var secureLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/SaveTheBay/FeatureServer/0",
{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
map.addLayers([secureLayer]);
map.infoWindow.resize(200, 200);
function initEditing(event){
var results = event.layers;
var featureLayerInfos = arrayUtils.map(results, function (result){
return {
"featureLayer": result.layer
};
});
var layers = arrayUtils.map(results, function (result){
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: layers,
rows: 'auto',
columns: 2
}, "templatePickerDiv");
templatePicker.startup();
//setup the editor widget
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: featureLayerInfos
};
var params = {
settings: settings
};
var editorWidget = new Editor(params);
map.enableSnapping();
editorWidget.startup();
}
});
</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'">
</div>
<div id="rightPanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<p>This sample shows how to view and edit a secure map service using token-based authentication. Use the following credentials
to test the application:<br>
User Name: <b>user1</b><br>
Password: <b>user1</b><br>
or<br>
User Name: <b>user2</b><br>
Password: <b>user2</b></p>
<div id="content" style="height:100%;">
<div id="templatePickerDiv"></div>
</div>
</div>
</div>
</body>
</html>