Bypass Identity Manager with ArcGIS.com OAuth token object

IanKramer3 · ‎08-06-2013

Hi All,
I know this is similar to a recent post, but I think its different enough to merit its own thread. I want to access one of my feature layers (using REST Url) from my organization's ArcGIS.com using the OAuth token generated using the methodology show here: https://developers.arcgis.com/en/authentication/app-logins.html. That works great, and I got the JSON token. However now, I am unsure how to pass that JSON token in my JS app to prevent the Identify Manager login from appearing. Initially I thought that I could pass it in the FeatureLayer's credential property, but that looks like it only returns when the feature layer is loaded. I looked at one sample that stores the Identity Manager on the local system, but the "kernel.id.initialize(token)" statement does not seem to work either. I do see that IdentityManagerBase has a registerToken function, but I can't seem to figure out how to implement that.

Can somebody please provide me with a code snippet on how this is done?

Thanks!

Ian

IanKramer3 · ‎08-20-2013

I was able to figure this out. The first thing you will need to do is generate a REST request to get the access token.

https://www.arcgis.com/sharing/oauth2/token?client_id=APPID&client_secret=APPSECRET&grant_type=clien...

This will return back a Json token object where TOKEN STRING is the automatically generated token string from the system.

{"access_token":"TOKEN STRING","expires_in":7199}

Now in your JavaScript code, add "esri/IdentityManagerBase" and "esri/kernel" to your requires. Should look like this.

require([
        "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer",
        "dojo/parser", "esri/IdentityManagerBase", "esri/kernel", "dojo/domReady!"
      ], function(
        Map, InfoTemplate, FeatureLayer,
        parser, IMB, kernel
      ) {....

Then in your code, create a Json object like this:

var token = {"server": "http://www.arcgis.com/sharing/rest",
          "userId":"USERID",
          "token": "TOKEN STRING",
          "ssl":false,
          "expires":7200};

Make sure to include your ArcGIS.com userid and the token that you got above.

Then call the following statement to register the token object to the IdentityManager

kernel.id.registerToken(token);

Then you can add your feature layers.

Hope that helps!

Ian

View solution in original post

IanKramer3 · ‎08-20-2013

I was able to figure this out. The first thing you will need to do is generate a REST request to get the access token.

https://www.arcgis.com/sharing/oauth2/token?client_id=APPID&client_secret=APPSECRET&grant_type=clien...

This will return back a Json token object where TOKEN STRING is the automatically generated token string from the system.

{"access_token":"TOKEN STRING","expires_in":7199}

Now in your JavaScript code, add "esri/IdentityManagerBase" and "esri/kernel" to your requires. Should look like this.

require([
        "esri/map", "esri/InfoTemplate", "esri/layers/FeatureLayer",
        "dojo/parser", "esri/IdentityManagerBase", "esri/kernel", "dojo/domReady!"
      ], function(
        Map, InfoTemplate, FeatureLayer,
        parser, IMB, kernel
      ) {....

Then in your code, create a Json object like this:

var token = {"server": "http://www.arcgis.com/sharing/rest",
          "userId":"USERID",
          "token": "TOKEN STRING",
          "ssl":false,
          "expires":7200};

Make sure to include your ArcGIS.com userid and the token that you got above.

Then call the following statement to register the token object to the IdentityManager

kernel.id.registerToken(token);

Then you can add your feature layers.

Hope that helps!

Ian

IanKramer3 · ‎09-18-2013

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"/>
    <title>Create web map from JSON</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css" />
    <link rel="stylesheet" href="css/layout.css"/>

    <script src="http://js.arcgis.com/3.6/"></script>
    <script>

        require([
          "dojo/parser",
          "dojo/ready",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dojo/dom",
          "esri/map",
          "esri/geometry/Extent",
          "esri/urlUtils",
          "esri/arcgis/utils",
          "esri/dijit/Legend",
          "esri/dijit/Scalebar",
          "esri/IdentityManagerBase", "esri/kernel",
          "dojo/domReady!"
        ], function (
          parser,
          ready,
          BorderContainer,
          ContentPane,
          dom,
          Map,
          Extent,
          urlUtils,
          arcgisUtils,
          Legend,
          Scalebar, IMB, kernel
        ) {
            ready(function () {

                parser.parse();

                var webmapId = "<INSERT WEBMAP ID HERE>";
                var userId = "<INSERT USER ID HERE>";
                var tokenStr = "<INSERT TOKEN HERE>";

                var token = {
                    "server": "http://www.arcgis.com/sharing/rest",
                    "userId": userId,
                    "token": tokenStr,
                    "ssl": false,
                    "expires": 7200
                };

                kernel.id.registerToken(token);

                arcgisUtils.createMap(webmapId, "map").then(function (response) {

                    var map = response.map;

                    //By default the extent will be that of the web map. Here we change it
                    //to a custom extent.


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

                    //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
                    }, "legend");
                    legendDijit.startup();

                });

            });

        });

    </script>
</head>

<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="title"></div>
        <div id="subtitle"></div>
      </div>
      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
</body>
</html>

DanielMclaglen · ‎06-02-2014

Hi Kramer

I am trying to do exactly this and it is driving me mad. If i use your code exactly as is (just changing the token and map id) then I get challenge where it says username and password are correct but I don't have access to the resource (which I do). This error I suspect is a complete red herring as I can change the username to something not correct and I get the same error.

Further to this once I change the library to 3.9 then I do not get the challenge but no map is shown.

Have you got this working with 3.9?

Ta,
D

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"/>
    <title>Create web map from JSON</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css" />
    <link rel="stylesheet" href="css/layout.css"/>

    <script src="http://js.arcgis.com/3.6/"></script>
    <script>

        require([
          "dojo/parser",
          "dojo/ready",
          "dijit/layout/BorderContainer",
          "dijit/layout/ContentPane",
          "dojo/dom",
          "esri/map",
          "esri/geometry/Extent",
          "esri/urlUtils",
          "esri/arcgis/utils",
          "esri/dijit/Legend",
          "esri/dijit/Scalebar",
          "esri/IdentityManagerBase", "esri/kernel",
          "dojo/domReady!"
        ], function (
          parser,
          ready,
          BorderContainer,
          ContentPane,
          dom,
          Map,
          Extent,
          urlUtils,
          arcgisUtils,
          Legend,
          Scalebar, IMB, kernel
        ) {
            ready(function () {

                parser.parse();

                var webmapId = "<INSERT WEBMAP ID HERE>";
                var userId = "<INSERT USER ID HERE>";
                var tokenStr = "<INSERT TOKEN HERE>";

                var token = {
                    "server": "http://www.arcgis.com/sharing/rest",
                    "userId": userId,
                    "token": tokenStr,
                    "ssl": false,
                    "expires": 7200
                };

                kernel.id.registerToken(token);

                arcgisUtils.createMap(webmapId, "map").then(function (response) {

                    var map = response.map;

                    //By default the extent will be that of the web map. Here we change it
                    //to a custom extent.


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

                    //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
                    }, "legend");
                    legendDijit.startup();

                });

            });

        });

    </script>
</head>

<body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
      <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
        <div id="title"></div>
        <div id="subtitle"></div>
      </div>
      <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" >
        <div id="legend"></div>
      </div>
    </div>
</body>
</html>

stevegourley · ‎02-02-2017

A side note; The application needs to be owned by the same user as the web maps being accessed otherwise authentication will be granted.