ArcGIS Online WebMap authentication timeout

Question

I have an ArcGIS Online public account and add WebMap to my website.

My ArcGIS Online WebMap looks like this ESRI's sample: LINK

And I am trying to add my WebMap to my website like this ESRI's reference page. You will see there is a map in the center of page: LINK

My WebMap is displayed on my webpage well. When I access my webpage, my WebMap asks my ID and Password. If I entered it, then it shows my map.

However, my question is, if I moved to different page and then come back to map page, it asks again. Is it possible to set a timeout so I don't have to sign in everytime I access the page?

Answer 1

The reason I asked this question is that to find out if there were a way to reduce my code simple and work on code in front-end.

I've researched OAuth that ESRI provided and I ended up using esri/IdentityManager. There were references to use esri/IdentityManager package; however there were no sample code to using it with personal WebMap which used arcgisUtils.createMap

So here is sample code that I worked:

 require([
          "dojo/parser",
          "dojo/ready",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dojo/dom",
          "esri/map",
          "esri/urlUtils",
          "esri/arcgis/utils",
          "esri/dijit/Legend",
          "esri/dijit/LayerList",
          "esri/graphic",
          "esri/symbols/PictureMarkerSymbol",
          "esri/symbols/TextSymbol",
          "esri/geometry/Point",
          "esri/dijit/Scalebar",
          "dojo/_base/unload",
          "dojo/cookie",
          "dojo/json",
          "esri/config",
          "esri/IdentityManager",
          "esri/layers/FeatureLayer",
          "dojo/domReady!"
        ], function (
          parser,
          ready,
          BorderContainer,
          ContentPane,
          dom,
          Map,
          urlUtils,
          arcgisUtils,
          Legend,
          LayerList,
          Graphic,
          PictureMarkerSymbol,
          TextSymbol,
          Point,
          Scalebar,
          baseUnload,
          cookie,
          JSON,
          esriConfig,
          esriId,
          FeatureLayer
        ) {

            var mapOptions = {
            basemap: "topo",
                    autoResize: true, // see http://forums.arcgis.com/threads/90825-Mobile-Sample-Fail
                    center: [currentPosition.lng, currentPosition.lat],
                    zoom: 15,
                    logo: false
        };

            // cookie/local storage name
            var cred = "esri_jsapi_id_manager_data";

            // store credentials/serverInfos before the page unloads
            baseUnload.addOnUnload(storeCredentials);

            // look for credentials in local storage
            loadCredentials();

            parser.parse();

            esriConfig.defaults.io.proxyUrl = "/proxy/";

            //Create a map based on an ArcGIS Online web map id
            arcgisUtils.createMap('PUT-YOUR-ESRI-KEY', "esriMapCanvas", { mapOptions: mapOptions }).then(function (response) {

                var map = response.map;

                // add a blue marker
                    var picSymbol = new PictureMarkerSymbol(
                            'http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png', 50, 50);
                    var geometryPoint = new Point('SET YOUR LAT', 'SET YOUR LONG');
                    map.graphics.add(new Graphic(geometryPoint, picSymbol));

                //add the scalebar
                var scalebar = new Scalebar({
                    map: map,
                    scalebarUnit: "english"
                });

                //add the map layers
                var mapLayers = new LayerList({
                    map: map,
                    layers: arcgisUtils.getLayerList(response)
                }, "esriLayerList");
                mapLayers.startup();

                //add the legend. Note that we use the utility method getLegendLayers to get
                //the layers to display in the legend from the createMap response.
                var legendLayers = arcgisUtils.getLegendLayers(response);
                var legendDijit = new Legend({
                    map: map,
                    layerInfos: legendLayers
                }, "esriLegend");
                legendDijit.startup();
            });

            function storeCredentials() {
                // make sure there are some credentials to persist
                if (esriId.credentials.length === 0) {
                    return;
                }

                // serialize the ID manager state to a string
                var idString = JSON.stringify(esriId.toJson());
                // store it client side
                if (supports_local_storage()) {
                    // use local storage
                    window.localStorage.setItem(cred, idString);
                    // console.log("wrote to local storage");
                }
                else {
                    // use a cookie
                    cookie(cred, idString, { expires: 1 });
                    // console.log("wrote a cookie :-/");
                }
            }

            function supports_local_storage() {
                try {
                    return "localStorage" in window && window["localStorage"] !== null;
                } catch (e) {
                    return false;
                }
            }

            function loadCredentials() {
                var idJson, idObject;

                if (supports_local_storage()) {
                    // read from local storage
                    idJson = window.localStorage.getItem(cred);
                }
                else {
                    // read from a cookie
                    idJson = cookie(cred);
                }

                if (idJson && idJson != "null" && idJson.length > 4) {
                    idObject = JSON.parse(idJson);
                    esriId.initialize(idObject);
                }
                else {
                    // console.log("didn't find anything to load :(");
                }
            }
        });