nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Programmatically Log In to ArcGIS Online via Javascript Application

BrianBeck

I have a Javascript Web Map Application using the Esri JS API that is accessing data in ArcGIS Online. I don't want my users to have to log in to ArcGIS Online in order to access the content so I'd like the app to log in instead.

So far I was able to accomplish this using a proxy page that attaches a token to any requests for secured services. This method works, but the proxy page creates a bottleneck and the performance decrease is very noticeable when using the app even when panning and zooming.

I've been looking at the documentation for the IdentityManager, IdentityManagerBase, and Credential classes in the JS API to see if there is a way to recreate the process used when the user is prompted for credentials by adding credentials to the Identity Manager programmatically. So far I cannot figure out how to save a token in the IdentityManager for use by future requests.

Is there a way that I could use my proxy page to retrieve a token when the app is loaded and then add the token to the IdentityManager so it would automatically be added to any necessary requests and the user would not be prompted for credentials?

Encontre mais publicações marcadas com

Accepted answers

All comments

CarlosNantes

Hello, Warren.

We have a customized web appbuilder application that has protected widgets and protected maps.
That function helpped me to login on our portal for arcgis without the need of the default popup of authentication.

If the default popup works for you, you could just use something like this snippet:

require([

'esri/arcgis/Portal'

], function(

arcgisPortal

) {

var PORTAL_ARCGIS_URL = '';

function openAuthPopupIfUserNotSignedIn() {

var portal = new arcgisPortal.Portal(PORTAL_ARCGIS_URL);

portal.signIn().then(function(portalUser) {

console.log(portalUser.credential);

// portalUser.credential.token has what you need to make requests to protected resource,

// if the user you provided has access to it.

}, function(error) {

console.err(error);

});

}

openAuthPopupIfUserNotSignedIn();

});

To test either this snippet or the previous function you could access your web appbuilder app and put them on the browser debugger.
In both casses, after the authentication completes, the global object esri.id.credentials[0].token will have the token to use for subsequent requests to protected resources.

WarrenMedernach

Hello Carlos

Can you provide some further details on where and how this was implemented?

Thanks so much,

Warren

CarlosNantes

// This works for apps created with web appbuilder.

function login(user, password){

var serverInfo = esri.id.serverInfos[0];

var userInfo = {};

userInfo.username = user;

userInfo.password = password;

esri.id.generateToken(serverInfo, userInfo).then(function (response){

response.server = serverInfo.server;

response.userId = user;

esri.id.registerToken(response);

});

}

JeffPace1

here is the code we use to do a hardcoded login

function initPredefinedSecurity() {
//alert('in initPredefinedSecurity');
                                serverInfo = new ServerInfo();
                                serverInfo.server = 'https://'+window.location.hostname+'/arcgis03';
                                serverInfo.tokenServiceUrl = 'https://'+window.location.hostname+'/arcgis03/tokens/generateToken';
                                serverInfo.shortLivedTokenValidity = 720;
                                esri.id.registerServers([serverInfo]);
                               
                             //add your own password
                                var def = esri.id.generateToken(serverInfo, {"username": "util", "password": ""});
                                def.addCallback(lang.hitch(this, function (tokenInfo) {

        //get token creation time in epoch
                                var creationTime = (new Date).getTime();
                                                //calculate the token expiration based on short lived token validity
                                var expirationTime = creationTime + (serverInfo.shortLivedTokenValidity * 60000);
                                                //create array of secured services
                                             
                                 
                                var idObject ={};
                                idObject.serverInfos= [serverInfo];
                                var credentials={};
                                credentials.userId = "util";
                                credentials.server = "https://"+window.location.hostname+"/arcgis03";
                                credentials.token = tokenInfo.token;
                                credentials.expires = expirationTime;
                                credentials.ssl = false;
                                credentials.scope = "server";
                                credentials.validity = 720;
                                credentials.creationTime = creationTime;
                               
                               
                                idObject.credentials = [credentials];
                             
                              //credential object is correct
                                esri.id.initialize(idObject);
                              //  now create map
                                initMap();
                               

                                }));
                            };

JianHuang

That should work. That's the same logic as I suggested.
Here is a simple code running on nodejs to generate token.
1. you don't have to generate a new token every time when a user opens the web app. You can share the common one as long as it's still not expired.
2. On client side, you need to call setInterval(function(){'gettokenfunction'}, 2 hours);

var ex = require("express");
var app = ex();
var http = require("http"),
  qs = require("querystring");

var userToken, userTokenExpire;

var getToken = function(userInfo, res){
  var currentTime = new Date().getTime();
  if (userToken && (userTokenExpire && userTokenExpire - 7200000 > currentTime) ) {
    //-7200000 (it's 2 hours) ensures the token is valid for at least next 2 hours.
    //any new request within the 2 hours will create a new token.
    res.send({token: userToken, expires: userTokenExpire});
  }
  else {
  var options = {
    method: "POST",
    host: /*ip address here*/,
    path: "http://arcgisserverdomain/arcgis/admin/generateToken",
    headers: {"Connection": "keep-alive", "host": /*ip address*/, "Content-Type": "application/x-www-form-urlencoded"}
  };
  var postData = qs.stringify({
    username: userInfo.username,
    password: userInfo.password,
    client: "referer",
    referer: "http://yourwebsitedomain/",
    f: "json", 
    expiration:1440 //it can be up to 24 hours, which is 24*60 minutes
  });
  var request = http.request(options, function(response){
    response.setEncoding('utf8');
    response.on('data', function (chunk) {
      userToken = JSON.parse(chunk).token;
      console.log(userToken);
      userTokenExpire = JSON.parse(chunk).expires;
      console.log(userTokenExpire);
      res.send(chunk);
    });
  });
  request.write(postData);
  request.end();
  }
};

app.get("/gettoken", function(req, res){
  var userInfo = {};
  //userInfo.username = req.query.username;
  //userInfo.password = req.query.password;
  //if (!userInfo.username && !userInfo.password) {
  //since you don't need user to provide username and password, hard-code it.
  userInfo.password = username;
  userInfo.username = password;
  //}
  getToken(userInfo, res);  
});

app.listen(3000);

BrianBeck

Even if I make the webmap public and leave the layers secure, the createMap call tries to access the secured services and will prompt the user for credentials.

I think I may have found a solution. I created a web service that simply calls the generateToken REST endpoint and returns the token to the client. Then I have a Javascript function that creates new Credential objects for each secured resource with the returned token. I can then add each credential to esriKernel.id.credentials. By using the web service, my username and password are still protected in server side code so users have not access to it, but the app can still retrieve a token to save in the IdentityManger.

JianHuang

I think you should make the map (meaning the web map json) public, and secure the data (feature service, map service and so on.).

BrianBeck

Currently everything is shared with Everyone (public) and everything works without requiring the user to login. What I'm trying to do now is make it so certain services are only accessible via the app. That way the only people who can work with the data are those who have access to the application.

JianHuang

When you share the map in arcgis.com viewer, did you select share to public?

BrianBeck

I think this will still prompt the user for credentials during the createMap call because it has to access the secured resources before returning the layers.

JianHuang

After createMap() completes, you can have the reference to map and layers. Then loop through those layers and attach token to the url by:
layer.url = layer.url + "?token=" + token;
layer._url.query.token = token;

Please let me know if this helps.

BrianBeck

In my case, I am not creating individual FeatureLayers because I am using arcgisUtils.createMap() to load data from ArcGIS Online. Is there a way I could do the same thing with the webmap?

JianHuang

For your case, you should disable identity manager by setting esri.id=null;.
The next step is to attach the token to the url when you create a layer. For example, var fl = new FeatureLayer(url+"?token="+token);. There are several things worth pointing out.
1. If you need to use editor and ownership-based-access-control is enable on server side, you need to add credential to the featureLayer by fl.credential = {}; fl.credential.userId = userId; fl.credential.token = token;
2. When generating the token, select HTTP referer or IP referer to make sure the token is only valid through your website.
3. when token is about to expire, you need to generate the token again and replace the token by: fl.url = url+"?token="+newToken; fl._url.query.token = newToken;

In most cases, attaching the token to the url when creating the layer is sufficient enough.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.