topic Bypass user login dialog and automatically signing a user account in ArcGIS JavaScript Maps SDK Questions

Bypass user login dialog and automatically signing a user account

ScottGrace — Sun, 12 Dec 2021 03:28:34 GMT

I need to automatically sign in a user without requiring them to enter the username and password for the ArcGIS online account. I have a user name and password that i want to be able to use everytime a user tries to view a web app that is only viewable to an organization. When it is only visible to the organization you are required to sign in, i want to bypass the process and automatically login a user. I know that i need to use the token feature but im unable to make that work... here is what i have:

<script type="text/javascript">
      dojo.require("utilities.App");
      dojo.require("templateConfig.commonConfig");
      
      
        dojo.require("dojo.parser");
        dojo.require("esri.IdentityManager");
        var cred = "esri_jsapi_id_manager_data";
        var shortLivedTokenValidity=60;
        function init() {

            var idBase = new esri.IdentityManagerBase();
            //esri.config.defaults.io.proxyUrl = "proxy.ashx";
            var serverInfo = {
                server: "http://myserver:port",
                tokenServiceUrl: "http://myserver/arcgis/tokens",
                currentVersion: 10.1
            };
            var def = idBase.generateToken(serverInfo, { username: "user1", password: "user1" });
            def.addCallback(function (tokenInfo) {
        var idBase = new esri.IdentityManagerBase();
        //Short lived token is valid for 60 mins by defult 
                idBase.tokenValidity =shortLivedTokenValidity=60;
                var serverInfo = {
                    server: "http://myserver:port",
                    tokenServiceUrl: "http://myserver/arcgis/tokens/",
                    currentVersion: 10.1
                };
                
                esri.id.registerServers([serverInfo]);
               //get token creation time in epoch
                var creationTime = (new Date).getTime();
        //calculate the token expiration based on short lived token validity
                var expirationTime = creationTime + (shortLivedTokenValidity * 60000);
        //create array of secured services 
                var securedServices = [];
                for (var services in this.configData.mapService) {
                    securedServices.push(this.configData.mapService[services]);
                }
                var idString = dojo.toJson({ serverInfos: [serverInfo],
                    credentials: [{
                        userId: user1,
                        server: "http://myserver:port",
                        token: tokenInfo.token,
                        expires: expirationTime,
                        ssl: false,
                        creationTime: creationTime,
                        resources: securedServices
                    }]
                });
                // store it client side
                if (_supports_local_storage()) {
                    // use local storage

                    window.localStorage.setItem(this._jsAPIIDManagerData, idString);
                } else {
                    // use a cookie
                    dojo.cookie(this._jsAPIIDManagerData, idString, { expires: 1 });
                }
                this._loadCredentials();
        
      });
      
               
        }
    
     function _supports_local_storage() {
            try {
                return "localStorage" in window && window["localStorage"] !== null;
            } catch (e) {
                return false;
            }
        }

        function _loadCredentials() {

            var idJson, idObject;
            if (this._supports_local_storage()) {
                // read from local storage
                idJson = window.localStorage.getItem(this._jsAPIIDManagerData);
            } else {
                // read from a cookie
                idJson = dojo.cookie(this._jsAPIIDManagerData);
            }
            if (idJson && idJson != "null" && idJson.length > 4) {
                idObject = dojo.fromJson(idJson);
                esri.id.initialize(idObject);
            }
        }
        
    
    dojo.addOnLoad(init);


      var i18n;
      dojo.ready(function(){

      
        i18n = dojo.i18n.getLocalization("esriTemplate","template");
        var  defaults = {
        //The ID for the map from ArcGIS.com
        webmap: "mywebmapid",
        //Modify this to point to your sharing service URL if you are using the portal
        sharingurl: null,//for example: "http://www.arcgis.com",
        //The id for the web mapping application item that contains configuration info - in most
        ////When editing you need to specify a proxyurl (see below) if the service is on a different domain
        //Specify a proxy url if you will be editing, using the elevation profile or have secure services or web maps that are not shared with everyone.
        proxyurl: "",
        //cases this will be null.
        appid: "",
        //set to true to display the title
        displaytitle: true,
        //Enter a title, if no title is specified, the webmap's title is used.
        title: "",
        //Enter a description for the application. This description will appear in the left pane
        //if no description is entered the webmap description will be used.
        description: "",
        //specify an owner for the app - used by the print option. The default value will be the web map's owner
        owner: '',
        //Specify a color theme for the app. Valid options are gray,blue,purple,green and orange
        theme: 'gray',
        //Optional tools - set to false to hide the tool
        //set to false to hide the zoom slider on the map
        displayslider: true,
        displaymeasure: true,
        displaybasemaps: true,
        displayoverviewmap: true,
        displayeditor: true,
        displaylegend: true,
        displaysearch: true,
        displaylayerlist: true,
        displaybookmarks: true,
        displaydetails: true,
        displaytimeslider: true,
        displayprint: true,
        
        displayelevation: false,
        //This option is used when the elevation chart is displayed to control what is displayed when users mouse over or touch the chart. When true, elevation gain/loss will be shown from the first location to the location under the cursor/finger.
        showelevationdifference: false,
        displayscalebar: true,
        displayshare: true,
        //Set to true to display the left panel on startup. The left panel can contain the legend, details and editor. Set to true to
        //hide left panel on initial startup. 2
        leftPanelVisibility: true,
        //If the webmap uses Bing Maps data, you will need to provide your Bing Maps Key
        bingmapskey: commonConfig.bingMapsKey,
        //specify a group in ArcGIS.com that contains the basemaps to display in the basemap gallery
        //example: title:'ArcGIS Online Basemaps' , owner:esri
        basemapgroup: {
          title: null,
          owner: null
        },
        //Enter the URL's to the geometry service, print task and geocode service. 
        helperServices: commonConfig.helperServices,
        //Set the label in the nls file for your browsers language
        printlayouts: [{
          layout: 'Letter ANSI A Landscape',
          label: i18n.tools.print.layouts.label1,
          format: 'PDF'
        }, {
          layout: 'Letter ANSI A Portrait',
          label: i18n.tools.print.layouts.label2,
          format: 'PDF'
        }, {
          layout: 'Letter ANSI A Landscape',
          label: i18n.tools.print.layouts.label3,
          format: 'PNG32'
        }, {
          layout: 'Letter ANSI A Portrait',
          label: i18n.tools.print.layouts.label4,
          format: 'PNG32'
        }],
        printlayout: false,
        printformat: "PNG32",
        //Specify the geocoder options. By default uses the geocoder widget with the default locators. If you specify a url value then that locator will be used.
        placefinder: {
          "url": "",
          "countryCode":"",
          "currentExtent":false,
          "placeholder": "",
          "singlelinefieldname":""
        },
        
        link1: {
          url: '',
          text: ''
        },
        link2: {
          url: '',
          text: ''
        },
        //specify the width of the panel that holds the editor, legend, details
        leftpanewidth: 228,
        //Restrict the map's extent to the initial extent of the web map. When true users
        //will not be able to pan/zoom outside the initial extent.
        constrainmapextent: false,
        //Provide an image and url for a logo that will be displayed as a clickable image
        //in the lower right corner of the map. If nothing is specified then the esri logo will appear.
        customlogo: {
          image: '',
          link: ''
        },
        //embed = true means the margins will be collapsed to just include the map no title or links
        embed: false
      };
        
        var app = new utilities.App(defaults);
        app.init().then(function(options){
            initMap(options);
        });

      });

    </script>

The could for the token generation was originally posted here:
http://forums.arcgis.com/threads/73298-Possible-to-hard-code-credentials?highlight=token

and the rest of the code you see is from the basic viewer

Re: Bypass user login dialog and automatically signing a user account

IanKramer3 — Tue, 17 Sep 2013 17:50:52 GMT

Scott, check out this post. I think its what you are looking for.

http://forums.arcgis.com/threads/90031-Bypass-Identity-Manager-with-ArcGIS.com-OAuth-token-object?highlight=bypass+identity

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 18 Sep 2013 16:48:37 GMT

kramer_usc,

I was trying to implement what you outlined on your thread...but i am unable to accomplish it, could you possibly provide me a sample?

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 18 Sep 2013 16:50:06 GMT

Scott, check out this post. I think its what you are looking for.

http://forums.arcgis.com/threads/90031-Bypass-Identity-Manager-with-ArcGIS.com-OAuth-token-object?highlight=bypass+identity

kramer_usc,

I was trying to implement what you outlined on your thread...but i am unable to accomplish it, could you possibly provide me a sample?

Re: Bypass user login dialog and automatically signing a user account

IanKramer3 — Wed, 18 Sep 2013 18:22:30 GMT

Hi Scott,
I posted the sample HTML/JS on the thread I sent you above. You will need to add in your webmap id, ArcGIS.com userID, and the token that you generate.

Make sure that you create a Web Mapping Application on your ArcGIS.com Organization account first. Then you need to get the APPID and APPSECRET that is assigned to that application. From there, you will need to put those two things in the URL below. Then just copy out the returned token string (just the token property) and put it into the code I posted on my thread. Ultimately, you will want to write this REST request into some sort of web-based authentication, but this should get you started.

Ian

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

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 18 Sep 2013 18:36:07 GMT

Hi Scott,
I posted the sample HTML/JS on the thread I sent you above. You will need to add in your webmap id, ArcGIS.com userID, and the token that you generate.

Make sure that you create a Web Mapping Application on your ArcGIS.com Organization account first. Then you need to get the APPID and APPSECRET that is assigned to that application. From there, you will need to put those two things in the URL below. Then just copy out the returned token string (just the token property) and put it into the code I posted on my thread. Ultimately, you will want to write this REST request into some sort of web-based authentication, but this should get you started.

Ian

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

when i plug in my information and the rest request:
ready(function () {

parser.parse();
var webmapId = "****";
var userId = "*****";
var tokenStr = "<INSERT TOKEN HERE>";
var expireStr = "<INSERT TOKEN HERE>";

esri.request({
    url: "https://www.arcgis.com/sharing/oauth2/token?",
    content: {
       client_id : "*****",
       client_secret : "******",
       grant_type : "client_credentials"
    },
    handleAs: "json",
    load: tokenObtained,
    error: tokenRequestFailed
});

function tokenObtained(response)
{
    tokenStr = response.access_token;
    expireStr = response.expires_in;
}
function tokenRequestFailed(response)
{

console.log("in TORF", response);
}

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

kernel.id.registerToken(token);

i get this error message on the logon window that says "The username and password are valid, but you don't have access to this resource." what am i doing wrong?

for the record when i log in with my arcgisonline credentials i am able to go through.

Re: Bypass user login dialog and automatically signing a user account

IanKramer3 — Wed, 18 Sep 2013 19:03:35 GMT

What happens if you execute that OAuth2 token URL directly in a browser window? Do you get back the JSON correctly with the token?

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 18 Sep 2013 19:07:14 GMT

What happens if you execute that OAuth2 token URL directly in a browser window? Do you get back the JSON correctly with the token?

yes i do, i get

{"access_token":"blah blah..","expires_in":7200}

with URL
https://www.arcgis.com/sharing/oauth2/token?client_id=*****&client_secret=****&grant_type=client_credentials

Re: Bypass user login dialog and automatically signing a user account

IanKramer3 — Wed, 18 Sep 2013 19:23:23 GMT

ok, let's eliminate your esri.request code block for right now and just try copying and pasting the token into the following part of the code as a string. do the same for your userId as well. The expires property is a integer and not a string.

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

Re: Bypass user login dialog and automatically signing a user account

IanKramer3 — Wed, 18 Sep 2013 19:27:44 GMT

Also, how did you set up the application on ArcGIS.com. Did you create it as a "web application" or did you choose mobile, desktop, or application? I set mine up as a Web Application with the "Ready to use" option and the API set to "Javascript".

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 18 Sep 2013 19:28:10 GMT

ok, let's eliminate your esri.request code block for right now and just try copying and pasting the token into the following part of the code as a string. do the same for your userId as well. The expires property is a integer and not a string.

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

that seemed to work... another issue i seem to have it that the file that my web map uses as a layer isnt being loaded. What is wrong with my esri.request, getting the token?

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 18 Sep 2013 19:31:24 GMT

Also, how did you set up the application on ArcGIS.com. Did you create it as a "web application" or did you choose mobile, desktop, or application? I set mine up as a Web Application with the "Ready to use" option and the API set to "Javascript".

this is how mine looks:

App ID:***********
App Secret:********
App Type:browser
Redirect URI's:**URL from properties*****

Properties
URL
*****
Code Attachment
None
Purpose Ready To Use
API JavaScript
Usage Credits Used
Shared with Organization

Re: Bypass user login dialog and automatically signing a user account

IanKramer3 — Wed, 18 Sep 2013 19:33:53 GMT

I'll play around with esri.request code you sent. I am implementing my authentication in .NET, so I wasn't going to use the esri.request method, but it should work and now I am curious about why it is not working.

What kind of file are you trying to reference from your web map?

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 18 Sep 2013 19:35:00 GMT

I'll play around with esri.request code you sent. I am implementing my authentication in .NET, so I wasn't going to use the esri.request method, but it should work and now I am curious about why it is not working.

What kind of file are you trying to reference from your web map?

the application references a kml file with points which is displayed when i open the application on AGOL itself.

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 18 Sep 2013 19:37:09 GMT

I'll play around with esri.request code you sent. I am implementing my authentication in .NET, so I wasn't going to use the esri.request method, but it should work and now I am curious about why it is not working.

What kind of file are you trying to reference from your web map?

ive been playing with the eari.request all day...i cant imagine why it wouldnt work...is there another way to make an rest request?

Re: Bypass user login dialog and automatically signing a user account

IanKramer3 — Wed, 18 Sep 2013 20:28:38 GMT

Actually, I see the issue. You need to move this code inside your tokenObtained(response) function. You need to get back the token before you create the web map. In the code you supplied, it sends the request and then gets the webmap before the token is returned. I tested your code and it works if you do that.

---------------------------------------
function tokenObtained(response) {
blah, blah, blah

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

kernel.id.registerToken(token);

..CODE TO LOAD WEBMAP
}

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 18 Sep 2013 20:33:58 GMT

Actually, I see the issue. You need to move this code inside your tokenObtained(response) function. You need to get back the token before you create the web map. In the code you supplied, it sends the request and then gets the webmap before the token is returned. I tested your code and it works if you do that.

---------------------------------------
function tokenObtained(response) {
blah, blah, blah

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

kernel.id.registerToken(token);

..CODE TO LOAD WEBMAP
}

Ohhhhhh, i see that makes sense. do you know why my kml file isnt working? its about 8 MB in size...could that be why it is running out?

Here is my log file dump from the chrome inspector:

XHR finished loading: "https://www.arcgis.com/sharing/oauth2/token?&client_id=*****&client_secret=****&grant_type=client_credentials". init.js:15
XHR finished loading: "http://www.arcgis.com/sharing/rest/content/items/****?f=json". init.js:15
Error {code: 403, messageCode: "GWM_0003", message: "You do not have permissions to access this resource or perform this operation.", details: Array[0], log: undefined�?�}
init.js:15
XHR finished loading: "http://www.arcgis.com/sharing/rest/content/items/****....". init.js:15
XHR finished loading: "http://www.arcgis.com/sharing/rest/content/items/****....". init.js:15
Resource interpreted as Script but transferred with MIME type text/plain: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer?f=json&callback=dojo.io.script.jsonp_dojoIoScript1._jsonpCallback". init.js:34
XMLHttpRequest cannot load http://static.arcgis.com/attribution/World_Topo_Map?f=json. Origin http://localhost is not allowed by Access-Control-Allow-Origin. index_ian.html:1
_577 {stack: "Error: Unable to load http://static.arcgis.com/att�?�._3f3 (http://js.arcgis.com/3.6/init.js:15:99959)", message: "Unable to load http://static.arcgis.com/attribution/World_Topo_Map?f=json status: 0", response: Object, status: 0, responseText: ""�?�}
init.js:15
Resource interpreted as Script but transferred with MIME type text/plain: "http://utility.arcgis.com/sharing/kml?url=**my_AGOL_portal**&callback=dojo.io.script.jsonp_dojoIoScript2._jsonpCallback". init.js:34
dojo.io.script error
Error {code: 400, message: "File not found. Wrong url or out of memory.", details: Array[0], log: undefined, httpCode: 400}
init.js:34
XMLHttpRequest cannot load https://services.arcgisonline.com/ArcGIS/rest/info?f=json. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

Re: Bypass user login dialog and automatically signing a user account

IanKramer3 — Wed, 18 Sep 2013 22:07:24 GMT

I am not sure about this one. It looks like you are getting a CORS error, basically your web server is not registered/allowed to access services.arcgisonline.com (its a security thing on their end), where I guess they are storing a copy of your KML file. I have run into this error before with esri.request when trying to pull services from this server and basically I used a proxy to get around it (Esri recommends this). However, since your KML is hosted on ArcGIS.com, I don't believe there is a proxy property for a Map object. However there are a couple of workarounds that you may try:

#1 - Set up a proxy on your local web server following these: instructions: https://developers.arcgis.com/en/javascript/jshelp/ags_proxy.html

Then in your code towards the top, try using this:
esri.config.defaults.io.proxyUrl = "http://<INSERT SERVER ADDRESS HERE>/proxy/proxy.ashx";

They may force the communication for the KML file through the proxy. I have no idea if this will work, but may be worth a try.

#2 - Load your KML on a web server or I see a lot of people using Dropbox now. Then add your KML to your web map as a URL link and not a local file.

#3 - Load your KML into your web map in your JS app. Check out this sample: https://developers.arcgis.com/en/javascript/jssamples/layers_kml.html

I hope one of these work for you. You may also want to post that error on the forums as a separate thread.

Re: Bypass user login dialog and automatically signing a user account

IanKramer3 — Wed, 18 Sep 2013 22:17:16 GMT

So it looks like this may be a limitation of JS. I would implement it through the URL method.

http://forums.arcgis.com/threads/78003-Adding-KML-file-in-map-control-by-JavaScript-API?highlight=kml+file

Good Luck!

Re: Bypass user login dialog and automatically signing a user account

ScottGrace — Wed, 25 Sep 2013 12:57:52 GMT

So it looks like this may be a limitation of JS. I would implement it through the URL method.

http://forums.arcgis.com/threads/78003-Adding-KML-file-in-map-control-by-JavaScript-API?highlight=kml+file

Good Luck!

I dont mean to beat a dead horse, but when i implement your solution on the basicviewer web application i am unable to see the legend, is there a way to make that visible? for the record it does show up when i sign on with my credentials.